← Back to Editor

#D2CA97 · #83767A · #F0CD6F · #581D28 · #DD5228

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

#D2CA97

Fresh Green · Tan · Sunflower

HEX
#D2CA97
RGB
rgb(210, 202, 151)
HSL
hsl(52, 40%, 71%)
HSB
hsb(52, 28%, 82%)
CMYK
cmyk(0%, 4%, 28%, 18%)
Oklch
oklch(83.3% 0.068 100.2)

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

#83767A

Ink Gray · Gray · Warm Gray

HEX
#83767A
RGB
rgb(131, 118, 122)
HSL
hsl(342, 5%, 49%)
HSB
hsb(342, 10%, 51%)
CMYK
cmyk(0%, 10%, 7%, 49%)
Oklch
oklch(57.9% 0.017 357.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#F0CD6F

Ginger · BurlyWood · Sunflower

HEX
#F0CD6F
RGB
rgb(240, 205, 111)
HSL
hsl(44, 81%, 69%)
HSB
hsb(44, 54%, 94%)
CMYK
cmyk(0%, 15%, 54%, 6%)
Oklch
oklch(85.9% 0.120 89.4)

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

#581D28

Crimson · Maroon · Wine Red

HEX
#581D28
RGB
rgb(88, 29, 40)
HSL
hsl(349, 50%, 23%)
HSB
hsb(349, 67%, 35%)
CMYK
cmyk(0%, 67%, 55%, 65%)
Oklch
oklch(32.5% 0.087 12.1)

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

#DD5228

Vermilion · Chocolate · Passion Red

HEX
#DD5228
RGB
rgb(221, 82, 40)
HSL
hsl(14, 73%, 51%)
HSB
hsb(14, 82%, 87%)
CMYK
cmyk(0%, 63%, 82%, 13%)
Oklch
oklch(62.0% 0.182 36.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2CA97
979FD3

Analogous

D3AD97
D2CA97
BDD397

Triadic

D2CA97
97D3CB
CB97D3

Split-Comp.

D2CA97
97BDD3
AD97D3

Tetradic

D2CA97
97D3AD
979FD3
D397BD

Contrast Matrix WCAG 2.1 Contrast

D2CA97
83767A
F0CD6F
581D28
DD5228
—
2.6
Fail
1.1
Fail
7.8
AAA
2.4
Fail
2.6
Fail
—
2.8
Fail
3.0
Fail
1.1
Fail
1.1
Fail
2.8
Fail
—
8.4
AAA
2.6
Fail
7.8
AAA
3.0
Fail
8.4
AAA
—
3.3
AA Large
2.4
Fail
1.1
Fail
2.6
Fail
3.3
AA Large
—
White BG
1.7Fail
4.3AA Large
1.5Fail
13.0AAA
4.0AA Large
Black BG
12.6AAA
4.8AA
13.7AAA
1.6Fail
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCEA3
7D7D79
E1E186
3E3E25
A1A032

Deuteranopia

CFD0A6
7E7F79
E3E68B
424625
A9B335

Tritanopia

D2ADAF
827878
EE989C
552323
D63A3C

Achromatopsia

C7C7C7
7A7A7A
CDCDCD
303030
777777

Shades & Tints Shades & Tints

#D2CA97

Dark
Light

#83767A

Dark
Light

#F0CD6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2ca97;
  --color-2: #83767a;
  --color-3: #f0cd6f;
  --color-4: #581d28;
  --color-5: #dd5228;
}

SCSS

$color-1: #d2ca97;
$color-2: #83767a;
$color-3: #f0cd6f;
$color-4: #581d28;
$color-5: #dd5228;

TAILWIND

colors: {
  'brand-1': '#d2ca97',
  'brand-2': '#83767a',
  'brand-3': '#f0cd6f',
  'brand-4': '#581d28',
  'brand-5': '#dd5228',
}

RGB Array

[210, 202, 151], [131, 118, 122], [240, 205, 111], [88, 29, 40], [221, 82, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2CA97, #83767A, #F0CD6F, #581D28, #DD5228 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: #d2ca97; --color-2: #83767a; --color-3: #f0cd6f; --color-4: #581d28; --color-5: #dd5228. 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