← Back to Editor

#6C7981 · #ED6203 · #FC9411 · #E3DB78 · #FBE7C2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#6C7981

Slate Blue · SlateGray · Warm Gray

HEX
#6C7981
RGB
rgb(108, 121, 129)
HSL
hsl(203, 9%, 46%)
HSB
hsb(203, 16%, 51%)
CMYK
cmyk(16%, 6%, 0%, 49%)
Oklch
oklch(56.8% 0.020 234.8)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#ED6203

Tangerine · OrangeRed · Amber Brown

HEX
#ED6203
RGB
rgb(237, 98, 3)
HSL
hsl(24, 98%, 47%)
HSB
hsb(24, 99%, 93%)
CMYK
cmyk(0%, 59%, 99%, 7%)
Oklch
oklch(66.3% 0.190 44.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#FC9411

Ginger · Orange · Warm Sun

HEX
#FC9411
RGB
rgb(252, 148, 17)
HSL
hsl(33, 98%, 53%)
HSB
hsb(33, 93%, 99%)
CMYK
cmyk(0%, 41%, 93%, 1%)
Oklch
oklch(76.0% 0.171 62.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E3DB78

Fresh Green · Khaki · Sunflower

HEX
#E3DB78
RGB
rgb(227, 219, 120)
HSL
hsl(56, 66%, 68%)
HSB
hsb(56, 47%, 89%)
CMYK
cmyk(0%, 4%, 47%, 11%)
Oklch
oklch(87.7% 0.122 104.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FBE7C2

Goose Yellow · Bisque · Peach Orange

HEX
#FBE7C2
RGB
rgb(251, 231, 194)
HSL
hsl(39, 88%, 87%)
HSB
hsb(39, 23%, 98%)
CMYK
cmyk(0%, 8%, 23%, 2%)
Oklch
oklch(93.5% 0.053 82.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C7981
80736B

Analogous

6B807D
6C7981
6B6D80

Triadic

6C7981
806B78
78806B

Split-Comp.

6C7981
806B6D
807D6B

Tetradic

6C7981
7D6B80
80736B
6D806B

Contrast Matrix WCAG 2.1 Contrast

6C7981
ED6203
FC9411
E3DB78
FBE7C2
—
1.4
Fail
2.0
Fail
3.1
AA Large
3.7
AA Large
1.4
Fail
—
1.5
Fail
2.3
Fail
2.7
Fail
2.0
Fail
1.5
Fail
—
1.6
Fail
1.8
Fail
3.1
AA Large
2.3
Fail
1.6
Fail
—
1.2
Fail
3.7
AA Large
2.7
Fail
1.8
Fail
1.2
Fail
—
White BG
4.5AA Large
3.3AA Large
2.2Fail
1.4Fail
1.2Fail
Black BG
4.7AA
6.3AA
9.4AAA
14.7AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72727F
B1B01A
CFCE31
E0DF90
F2F2CB

Deuteranopia

71707F
B9C320
D5DD38
E0E196
F4F5CD

Tritanopia

6D7E7D
E62C30
F74A4F
E3A3A7
FAD2D4

Achromatopsia

767676
818181
A4A4A4
D2D2D2
E9E9E9

Shades & Tints Shades & Tints

#6C7981

Dark
Light

#ED6203

Dark
Light

#FC9411

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c7981;
  --color-2: #ed6203;
  --color-3: #fc9411;
  --color-4: #e3db78;
  --color-5: #fbe7c2;
}

SCSS

$color-1: #6c7981;
$color-2: #ed6203;
$color-3: #fc9411;
$color-4: #e3db78;
$color-5: #fbe7c2;

TAILWIND

colors: {
  'brand-1': '#6c7981',
  'brand-2': '#ed6203',
  'brand-3': '#fc9411',
  'brand-4': '#e3db78',
  'brand-5': '#fbe7c2',
}

RGB Array

[108, 121, 129], [237, 98, 3], [252, 148, 17], [227, 219, 120], [251, 231, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6C7981, #ED6203, #FC9411, #E3DB78, #FBE7C2 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #6c7981; --color-2: #ed6203; --color-3: #fc9411; --color-4: #e3db78; --color-5: #fbe7c2. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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