← Back to Editor

#D1D5A2 · #C7B76C · #B67F3C · #EA3A22 · #C03120

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 Library

Color Details Color Details

#D1D5A2

Fresh Green · Tan · Sunflower

HEX
#D1D5A2
RGB
rgb(209, 213, 162)
HSL
hsl(65, 38%, 74%)
HSB
hsb(65, 24%, 84%)
CMYK
cmyk(2%, 0%, 24%, 16%)
Oklch
oklch(85.7% 0.068 111.5)

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

#C7B76C

Ginger · Tan · Sunflower

HEX
#C7B76C
RGB
rgb(199, 183, 108)
HSL
hsl(49, 45%, 60%)
HSB
hsb(49, 46%, 78%)
CMYK
cmyk(0%, 8%, 46%, 22%)
Oklch
oklch(77.6% 0.097 97.6)

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

#B67F3C

Ochre · Chocolate · Amber Brown

HEX
#B67F3C
RGB
rgb(182, 127, 60)
HSL
hsl(33, 50%, 47%)
HSB
hsb(33, 67%, 71%)
CMYK
cmyk(0%, 30%, 67%, 29%)
Oklch
oklch(63.9% 0.108 69.0)

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

#EA3A22

Vermilion · OrangeRed · Passion Red

HEX
#EA3A22
RGB
rgb(234, 58, 34)
HSL
hsl(7, 83%, 53%)
HSB
hsb(7, 85%, 92%)
CMYK
cmyk(0%, 75%, 85%, 8%)
Oklch
oklch(61.6% 0.215 31.2)

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

#C03120

Vermilion · FireBrick · Passion Red

HEX
#C03120
RGB
rgb(192, 49, 32)
HSL
hsl(6, 71%, 44%)
HSB
hsb(6, 83%, 75%)
CMYK
cmyk(0%, 74%, 83%, 25%)
Oklch
oklch(53.4% 0.182 30.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1D5A2
A8A4D6

Analogous

D6C1A4
D1D5A2
B9D6A4

Triadic

D1D5A2
A4D2D6
D6A4D2

Split-Comp.

D1D5A2
A4B9D6
C1A4D6

Tetradic

D1D5A2
A4D6C1
A8A4D6
D6A4B9

Contrast Matrix WCAG 2.1 Contrast

D1D5A2
C7B76C
B67F3C
EA3A22
C03120
—
1.3
Fail
2.3
Fail
2.7
Fail
3.7
AA Large
1.3
Fail
—
1.7
Fail
2.0
Fail
2.8
Fail
2.3
Fail
1.7
Fail
—
1.2
Fail
1.6
Fail
2.7
Fail
2.0
Fail
1.2
Fail
—
1.4
Fail
3.7
AA Large
2.8
Fail
1.6
Fail
1.4
Fail
—
White BG
1.5Fail
2.0Fail
3.4AA Large
4.1AA Large
5.7AA
Black BG
13.8AAA
10.4AAA
6.1AA
5.1AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3AE
C0C07E
9E9E4C
9E9C28
828124

Deuteranopia

D3D2B1
C1C283
A1A650
A8B529
8A9525

Tritanopia

D1B8BA
C68C90
B3595C
E12C2D
B92728

Achromatopsia

CECECE
B3B3B3
888888
6C6C6C
5A5A5A

Shades & Tints Shades & Tints

#D1D5A2

Dark
Light

#C7B76C

Dark
Light

#B67F3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1d5a2;
  --color-2: #c7b76c;
  --color-3: #b67f3c;
  --color-4: #ea3a22;
  --color-5: #c03120;
}

SCSS

$color-1: #d1d5a2;
$color-2: #c7b76c;
$color-3: #b67f3c;
$color-4: #ea3a22;
$color-5: #c03120;

TAILWIND

colors: {
  'brand-1': '#d1d5a2',
  'brand-2': '#c7b76c',
  'brand-3': '#b67f3c',
  'brand-4': '#ea3a22',
  'brand-5': '#c03120',
}

RGB Array

[209, 213, 162], [199, 183, 108], [182, 127, 60], [234, 58, 34], [192, 49, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1D5A2, #C7B76C, #B67F3C, #EA3A22, #C03120 is ideal for: corporate websites, product showcases, portfolios. 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: #d1d5a2; --color-2: #c7b76c; --color-3: #b67f3c; --color-4: #ea3a22; --color-5: #c03120. 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. 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