← Back to Editor

#CFB68E · #E1D1B8 · #D6C6AF · #C5B385 · #5A564B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CFB68E

Ginger · Tan · Warm Sun

HEX
#CFB68E
RGB
rgb(207, 182, 142)
HSL
hsl(37, 40%, 68%)
HSB
hsb(37, 31%, 81%)
CMYK
cmyk(0%, 12%, 31%, 19%)
Oklch
oklch(78.8% 0.061 79.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E1D1B8

Goose Yellow · Wheat · Peach Orange

HEX
#E1D1B8
RGB
rgb(225, 209, 184)
HSL
hsl(37, 41%, 80%)
HSB
hsb(37, 18%, 88%)
CMYK
cmyk(0%, 7%, 18%, 12%)
Oklch
oklch(86.7% 0.038 79.1)

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

#D6C6AF

Goose Yellow · Silver · Peach Orange

HEX
#D6C6AF
RGB
rgb(214, 198, 175)
HSL
hsl(35, 32%, 76%)
HSB
hsb(35, 18%, 84%)
CMYK
cmyk(0%, 7%, 18%, 16%)
Oklch
oklch(83.4% 0.036 77.0)

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

#C5B385

Ginger · Tan · Sunflower

HEX
#C5B385
RGB
rgb(197, 179, 133)
HSL
hsl(43, 36%, 65%)
HSB
hsb(43, 32%, 77%)
CMYK
cmyk(0%, 9%, 32%, 23%)
Oklch
oklch(77.1% 0.065 89.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#5A564B

Ochre · DarkOliveGreen · Charcoal

HEX
#5A564B
RGB
rgb(90, 86, 75)
HSL
hsl(44, 9%, 32%)
HSB
hsb(44, 17%, 35%)
CMYK
cmyk(0%, 4%, 17%, 65%)
Oklch
oklch(45.4% 0.018 90.4)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFB68E
8DA6CE

Analogous

CE948D
CFB68E
C6CE8D

Triadic

CFB68E
8DCEB5
B58DCE

Split-Comp.

CFB68E
8DC6CE
948DCE

Tetradic

CFB68E
8DCE94
8DA6CE
CE8DC6

Contrast Matrix WCAG 2.1 Contrast

CFB68E
E1D1B8
D6C6AF
C5B385
5A564B
—
1.3
Fail
1.2
Fail
1.1
Fail
3.7
AA Large
1.3
Fail
—
1.1
Fail
1.4
Fail
4.9
AA
1.2
Fail
1.1
Fail
—
1.2
Fail
4.4
AA Large
1.1
Fail
1.4
Fail
1.2
Fail
—
3.5
AA Large
3.7
AA Large
4.9
AA
4.4
AA Large
3.5
AA Large
—
White BG
2.0Fail
1.5Fail
1.7Fail
2.1Fail
7.3AAA
Black BG
10.7AAA
14.0AAA
12.6AAA
10.2AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C498
DADABE
CFCFB5
BDBD90
58584E

Deuteranopia

C6C79A
DBDCBF
D0D1B6
BEC093
59594E

Tritanopia

CE9FA1
E0C3C4
D5B9BA
C4999B
5A5050

Achromatopsia

B9B9B9
D3D3D3
C8C8C8
B3B3B3
565656

Shades & Tints Shades & Tints

#CFB68E

Dark
Light

#E1D1B8

Dark
Light

#D6C6AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfb68e;
  --color-2: #e1d1b8;
  --color-3: #d6c6af;
  --color-4: #c5b385;
  --color-5: #5a564b;
}

SCSS

$color-1: #cfb68e;
$color-2: #e1d1b8;
$color-3: #d6c6af;
$color-4: #c5b385;
$color-5: #5a564b;

TAILWIND

colors: {
  'brand-1': '#cfb68e',
  'brand-2': '#e1d1b8',
  'brand-3': '#d6c6af',
  'brand-4': '#c5b385',
  'brand-5': '#5a564b',
}

RGB Array

[207, 182, 142], [225, 209, 184], [214, 198, 175], [197, 179, 133], [90, 86, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFB68E, #E1D1B8, #D6C6AF, #C5B385, #5A564B 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: #cfb68e; --color-2: #e1d1b8; --color-3: #d6c6af; --color-4: #c5b385; --color-5: #5a564b. 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