← Back to Editor

#D2DA91 · #C22820 · #CCAA22 · #D5C673 · #B7C178

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

#D2DA91

Fresh Green · Khaki · Sunflower

HEX
#D2DA91
RGB
rgb(210, 218, 145)
HSL
hsl(67, 50%, 71%)
HSB
hsb(67, 33%, 85%)
CMYK
cmyk(4%, 0%, 33%, 15%)
Oklch
oklch(86.5% 0.095 113.5)

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

#C22820

Vermilion · FireBrick · Passion Red

HEX
#C22820
RGB
rgb(194, 40, 32)
HSL
hsl(3, 72%, 44%)
HSB
hsb(3, 84%, 76%)
CMYK
cmyk(0%, 79%, 84%, 24%)
Oklch
oklch(53.1% 0.191 28.7)

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

#CCAA22

Ochre · GoldenRod · Honey Gold

HEX
#CCAA22
RGB
rgb(204, 170, 34)
HSL
hsl(48, 71%, 47%)
HSB
hsb(48, 83%, 80%)
CMYK
cmyk(0%, 17%, 83%, 20%)
Oklch
oklch(74.7% 0.145 93.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#D5C673

Fresh Green · BurlyWood · Sunflower

HEX
#D5C673
RGB
rgb(213, 198, 115)
HSL
hsl(51, 54%, 64%)
HSB
hsb(51, 46%, 84%)
CMYK
cmyk(0%, 7%, 46%, 16%)
Oklch
oklch(82.1% 0.106 99.3)

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

#B7C178

Fresh Green · Tan · Sunflower

HEX
#B7C178
RGB
rgb(183, 193, 120)
HSL
hsl(68, 37%, 61%)
HSB
hsb(68, 38%, 76%)
CMYK
cmyk(5%, 0%, 38%, 24%)
Oklch
oklch(78.6% 0.096 115.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2DA91
9990DA

Analogous

DABE90
D2DA91
ACDA90

Triadic

D2DA91
90D1DA
DA90D1

Split-Comp.

D2DA91
90ACDA
BE90DA

Tetradic

D2DA91
90DABE
9990DA
DA90AC

Contrast Matrix WCAG 2.1 Contrast

D2DA91
C22820
CCAA22
D5C673
B7C178
—
3.9
AA Large
1.5
Fail
1.2
Fail
1.3
Fail
3.9
AA Large
—
2.6
Fail
3.4
AA Large
3.0
AA Large
1.5
Fail
2.6
Fail
—
1.3
Fail
1.2
Fail
1.2
Fail
3.4
AA Large
1.3
Fail
—
1.1
Fail
1.3
Fail
3.0
AA Large
1.2
Fail
1.1
Fail
—
White BG
1.5Fail
5.8AA
2.2Fail
1.7Fail
1.9Fail
Black BG
14.2AAA
3.6AA Large
9.3AAA
12.2AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D6A3
7F7E22
BDBD43
CFCE87
BBBB8A

Deuteranopia

D5D4A7
889422
BFC24B
CFD18C
BBBA8E

Tritanopia

D2B1B4
BA2324
CA5D63
D4979A
B8989B

Achromatopsia

CFCFCF
555555
A5A5A5
C1C1C1
B6B6B6

Shades & Tints Shades & Tints

#D2DA91

Dark
Light

#C22820

Dark
Light

#CCAA22

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2da91;
  --color-2: #c22820;
  --color-3: #ccaa22;
  --color-4: #d5c673;
  --color-5: #b7c178;
}

SCSS

$color-1: #d2da91;
$color-2: #c22820;
$color-3: #ccaa22;
$color-4: #d5c673;
$color-5: #b7c178;

TAILWIND

colors: {
  'brand-1': '#d2da91',
  'brand-2': '#c22820',
  'brand-3': '#ccaa22',
  'brand-4': '#d5c673',
  'brand-5': '#b7c178',
}

RGB Array

[210, 218, 145], [194, 40, 32], [204, 170, 34], [213, 198, 115], [183, 193, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2DA91, #C22820, #CCAA22, #D5C673, #B7C178 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: #d2da91; --color-2: #c22820; --color-3: #ccaa22; --color-4: #d5c673; --color-5: #b7c178. 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