← Back to Editor

#5BE1C6 · #A4A299 · #BC8678 · #EB4F34 · #E1E72A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5BE1C6

Jade · MediumTurquoise · Lake Green

HEX
#5BE1C6
RGB
rgb(91, 225, 198)
HSL
hsl(168, 69%, 62%)
HSB
hsb(168, 60%, 88%)
CMYK
cmyk(60%, 0%, 12%, 12%)
Oklch
oklch(82.9% 0.124 177.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A4A299

Ash · DarkGray · Silver Sand

HEX
#A4A299
RGB
rgb(164, 162, 153)
HSL
hsl(49, 6%, 62%)
HSB
hsb(49, 7%, 64%)
CMYK
cmyk(0%, 1%, 7%, 36%)
Oklch
oklch(71.1% 0.013 96.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BC8678

Crimson · DarkSalmon · Passion Red

HEX
#BC8678
RGB
rgb(188, 134, 120)
HSL
hsl(12, 34%, 60%)
HSB
hsb(12, 36%, 74%)
CMYK
cmyk(0%, 29%, 36%, 26%)
Oklch
oklch(67.0% 0.070 35.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#EB4F34

Vermilion · Tomato · Passion Red

HEX
#EB4F34
RGB
rgb(235, 79, 52)
HSL
hsl(9, 82%, 56%)
HSB
hsb(9, 78%, 92%)
CMYK
cmyk(0%, 66%, 78%, 8%)
Oklch
oklch(64.0% 0.197 32.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E1E72A

Autumn Sage · Gold · Sunflower

HEX
#E1E72A
RGB
rgb(225, 231, 42)
HSL
hsl(62, 80%, 54%)
HSB
hsb(62, 82%, 91%)
CMYK
cmyk(3%, 0%, 82%, 9%)
Oklch
oklch(89.4% 0.189 111.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5BE1C6
E15B76

Analogous

5BE183
5BE1C6
5BB9E1

Triadic

5BE1C6
C65BE1
E1C65B

Split-Comp.

5BE1C6
E15BB9
E1835B

Tetradic

5BE1C6
835BE1
E15B76
B9E15B

Contrast Matrix WCAG 2.1 Contrast

5BE1C6
A4A299
BC8678
EB4F34
E1E72A
—
1.6
Fail
1.9
Fail
2.3
Fail
1.2
Fail
1.6
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
2.3
Fail
1.4
Fail
1.2
Fail
—
2.7
Fail
1.2
Fail
1.9
Fail
2.3
Fail
2.7
Fail
—
White BG
1.6Fail
2.6Fail
3.1AA Large
3.7AA Large
1.3Fail
Black BG
13.0AAA
8.2AAA
6.8AA
5.7AA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9596CD
A3A39B
A5A47B
A7A63B
E4E458

Deuteranopia

8D83CE
A3A39C
A8AC7C
B1BC3C
E3E363

Tritanopia

62D2D3
A49D9D
B97E7F
E34041
E17C84

Achromatopsia

B6B6B6
A2A2A2
959595
7B7B7B
D0D0D0

Shades & Tints Shades & Tints

#5BE1C6

Dark
Light

#A4A299

Dark
Light

#BC8678

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5be1c6;
  --color-2: #a4a299;
  --color-3: #bc8678;
  --color-4: #eb4f34;
  --color-5: #e1e72a;
}

SCSS

$color-1: #5be1c6;
$color-2: #a4a299;
$color-3: #bc8678;
$color-4: #eb4f34;
$color-5: #e1e72a;

TAILWIND

colors: {
  'brand-1': '#5be1c6',
  'brand-2': '#a4a299',
  'brand-3': '#bc8678',
  'brand-4': '#eb4f34',
  'brand-5': '#e1e72a',
}

RGB Array

[91, 225, 198], [164, 162, 153], [188, 134, 120], [235, 79, 52], [225, 231, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5BE1C6, #A4A299, #BC8678, #EB4F34, #E1E72A is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5be1c6; --color-2: #a4a299; --color-3: #bc8678; --color-4: #eb4f34; --color-5: #e1e72a. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color