← Back to Editor

#F5CB39 · #ECD27E · #642F27 · #070B0A · #B1B6D4

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 LibraryData Visualization

Color Details Color Details

#F5CB39

Ginger · GoldenRod · Sunflower

HEX
#F5CB39
RGB
rgb(245, 203, 57)
HSL
hsl(47, 90%, 59%)
HSB
hsb(47, 77%, 96%)
CMYK
cmyk(0%, 17%, 77%, 4%)
Oklch
oklch(85.5% 0.159 91.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#ECD27E

Goose Yellow · Khaki · Sunflower

HEX
#ECD27E
RGB
rgb(236, 210, 126)
HSL
hsl(46, 74%, 71%)
HSB
hsb(46, 47%, 93%)
CMYK
cmyk(0%, 11%, 47%, 7%)
Oklch
oklch(86.8% 0.108 92.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#642F27

Crimson · DarkOliveGreen · Wine Red

HEX
#642F27
RGB
rgb(100, 47, 39)
HSL
hsl(8, 44%, 27%)
HSB
hsb(8, 61%, 39%)
CMYK
cmyk(0%, 53%, 61%, 61%)
Oklch
oklch(37.4% 0.078 30.1)

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

#070B0A

Mineral Blue · Black · Peacock Green

HEX
#070B0A
RGB
rgb(7, 11, 10)
HSL
hsl(165, 22%, 4%)
HSB
hsb(165, 36%, 4%)
CMYK
cmyk(36%, 0%, 9%, 96%)
Oklch
oklch(14.4% 0.007 179.6)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#B1B6D4

Azure · LightSteelBlue · Cobalt Blue

HEX
#B1B6D4
RGB
rgb(177, 182, 212)
HSL
hsl(231, 29%, 76%)
HSB
hsb(231, 17%, 83%)
CMYK
cmyk(17%, 14%, 0%, 17%)
Oklch
oklch(78.2% 0.043 277.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5CB39
3861F5

Analogous

F56E38
F5CB39
BFF538

Triadic

F5CB39
38F5CC
CC38F5

Split-Comp.

F5CB39
38BFF5
6E38F5

Tetradic

F5CB39
38F56E
3861F5
F538BF

Contrast Matrix WCAG 2.1 Contrast

F5CB39
ECD27E
642F27
070B0A
B1B6D4
—
1.0
Fail
6.8
AA
12.7
AAA
1.3
Fail
1.0
Fail
—
7.1
AAA
13.3
AAA
1.3
Fail
6.8
AA
7.1
AAA
—
1.9
Fail
5.3
AA
12.7
AAA
13.3
AAA
1.9
Fail
—
9.9
AAA
1.3
Fail
1.3
Fail
5.3
AA
9.9
AAA
—
White BG
1.6Fail
1.5Fail
10.6AAA
19.8AAA
2.0Fail
Black BG
13.5AAA
14.1AAA
2.0Fail
1.1Fail
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E25C
E1E192
4D4D29
09090A
B3B3CD

Deuteranopia

E5E865
E2E497
505429
09080A
B3B3CB

Tritanopia

F3787E
EBA2A6
612A2B
070A0A
B1C7C6

Achromatopsia

C7C7C7
D0D0D0
3E3E3E
0A0A0A
B8B8B8

Shades & Tints Shades & Tints

#F5CB39

Dark
Light

#ECD27E

Dark
Light

#642F27

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5cb39;
  --color-2: #ecd27e;
  --color-3: #642f27;
  --color-4: #070b0a;
  --color-5: #b1b6d4;
}

SCSS

$color-1: #f5cb39;
$color-2: #ecd27e;
$color-3: #642f27;
$color-4: #070b0a;
$color-5: #b1b6d4;

TAILWIND

colors: {
  'brand-1': '#f5cb39',
  'brand-2': '#ecd27e',
  'brand-3': '#642f27',
  'brand-4': '#070b0a',
  'brand-5': '#b1b6d4',
}

RGB Array

[245, 203, 57], [236, 210, 126], [100, 47, 39], [7, 11, 10], [177, 182, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5CB39, #ECD27E, #642F27, #070B0A, #B1B6D4 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5cb39; --color-2: #ecd27e; --color-3: #642f27; --color-4: #070b0a; --color-5: #b1b6d4. 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 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