← Back to Editor

#F5DC7F · #B6B6AA · #60A7D5 · #2A1814 · #C72C28

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

#F5DC7F

Goose Yellow · Khaki · Sunflower

HEX
#F5DC7F
RGB
rgb(245, 220, 127)
HSL
hsl(47, 86%, 73%)
HSB
hsb(47, 48%, 96%)
CMYK
cmyk(0%, 10%, 48%, 4%)
Oklch
oklch(89.6% 0.117 94.7)

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

#B6B6AA

Fresh Green · DarkGray · Silver Sand

HEX
#B6B6AA
RGB
rgb(182, 182, 170)
HSL
hsl(60, 8%, 69%)
HSB
hsb(60, 7%, 71%)
CMYK
cmyk(0%, 0%, 7%, 29%)
Oklch
oklch(77.3% 0.017 106.8)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#60A7D5

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#60A7D5
RGB
rgb(96, 167, 213)
HSL
hsl(204, 58%, 61%)
HSB
hsb(204, 55%, 84%)
CMYK
cmyk(55%, 22%, 0%, 16%)
Oklch
oklch(70.0% 0.099 238.7)

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

#2A1814

Crimson · Black · Deep Berry

HEX
#2A1814
RGB
rgb(42, 24, 20)
HSL
hsl(11, 35%, 12%)
HSB
hsb(11, 52%, 16%)
CMYK
cmyk(0%, 43%, 52%, 84%)
Oklch
oklch(23.2% 0.030 33.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#C72C28

Vermilion · FireBrick · Passion Red

HEX
#C72C28
RGB
rgb(199, 44, 40)
HSL
hsl(2, 67%, 47%)
HSB
hsb(2, 80%, 78%)
CMYK
cmyk(0%, 78%, 80%, 22%)
Oklch
oklch(54.3% 0.192 27.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5DC7F
7F99F5

Analogous

F5A07F
F5DC7F
D4F57F

Triadic

F5DC7F
7FF5DC
DC7FF5

Split-Comp.

F5DC7F
7FD4F5
A07FF5

Tetradic

F5DC7F
7FF5A0
7F99F5
F57FD4

Contrast Matrix WCAG 2.1 Contrast

F5DC7F
B6B6AA
60A7D5
2A1814
C72C28
—
1.5
Fail
1.9
Fail
12.4
AAA
4.0
AA Large
1.5
Fail
—
1.3
Fail
8.3
AAA
2.7
Fail
1.9
Fail
1.3
Fail
—
6.4
AA
2.1
Fail
12.4
AAA
8.3
AAA
6.4
AA
—
3.1
AA Large
4.0
AA Large
2.7
Fail
2.1
Fail
3.1
AA Large
—
White BG
1.4Fail
2.0Fail
2.6Fail
16.9AAA
5.5AA
Black BG
15.4AAA
10.3AAA
8.0AAA
1.2Fail
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEA96
B6B6AD
7F7FCA
222215
848229

Deuteranopia

ECEE9B
B6B6AE
7B75C7
232515
8D9829

Tritanopia

F4A7AB
B6AFB0
64C1BF
291616
BF2A2A

Achromatopsia

D9D9D9
B5B5B5
979797
1D1D1D
5A5A5A

Shades & Tints Shades & Tints

#F5DC7F

Dark
Light

#B6B6AA

Dark
Light

#60A7D5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5dc7f;
  --color-2: #b6b6aa;
  --color-3: #60a7d5;
  --color-4: #2a1814;
  --color-5: #c72c28;
}

SCSS

$color-1: #f5dc7f;
$color-2: #b6b6aa;
$color-3: #60a7d5;
$color-4: #2a1814;
$color-5: #c72c28;

TAILWIND

colors: {
  'brand-1': '#f5dc7f',
  'brand-2': '#b6b6aa',
  'brand-3': '#60a7d5',
  'brand-4': '#2a1814',
  'brand-5': '#c72c28',
}

RGB Array

[245, 220, 127], [182, 182, 170], [96, 167, 213], [42, 24, 20], [199, 44, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5DC7F, #B6B6AA, #60A7D5, #2A1814, #C72C28 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: #f5dc7f; --color-2: #b6b6aa; --color-3: #60a7d5; --color-4: #2a1814; --color-5: #c72c28. 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