#C4CCA7 + #E2DBBE + #BBAA5A + #E0CBAE + #BF2B3B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4CCA7

Willow Green · Silver · Apple Green

HEX

#C4CCA7

RGB

rgb(196, 204, 167)

HSL

hsl(73, 27%, 73%)

HSB

hsb(73, 18%, 80%)

CMYK

cmyk(4%, 0%, 18%, 20%)

Oklch

oklch(82.9% 0.051 117.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E2DBBE

Goose Yellow · Wheat · Lemon Cream

HEX

#E2DBBE

RGB

rgb(226, 219, 190)

HSL

hsl(48, 38%, 82%)

HSB

hsb(48, 16%, 89%)

CMYK

cmyk(0%, 3%, 16%, 11%)

Oklch

oklch(88.9% 0.039 95.9)

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

#BBAA5A

Ginger · Tan · Sunflower

HEX

#BBAA5A

RGB

rgb(187, 170, 90)

HSL

hsl(49, 42%, 54%)

HSB

hsb(49, 52%, 73%)

CMYK

cmyk(0%, 9%, 52%, 27%)

Oklch

oklch(73.6% 0.103 97.6)

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

#E0CBAE

Goose Yellow · Wheat · Peach Orange

HEX

#E0CBAE

RGB

rgb(224, 203, 174)

HSL

hsl(35, 45%, 78%)

HSB

hsb(35, 22%, 88%)

CMYK

cmyk(0%, 9%, 22%, 12%)

Oklch

oklch(85.2% 0.045 75.9)

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

#BF2B3B

Vermilion · FireBrick · Passion Red

HEX

#BF2B3B

RGB

rgb(191, 43, 59)

HSL

hsl(354, 63%, 46%)

HSB

hsb(354, 77%, 75%)

CMYK

cmyk(0%, 77%, 69%, 25%)

Oklch

oklch(53.1% 0.183 20.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4CCA7

B0A8CD

Analogous

CDC2A8

C4CCA7

B2CDA8

Triadic

C4CCA7

A8C5CD

CDA8C5

Split-Comp.

C4CCA7

A8B2CD

C2A8CD

Tetradic

C4CCA7

A8CDC2

B0A8CD

CDA8B2

Contrast Matrix WCAG 2.1 Contrast

C4CCA7	E2DBBE	BBAA5A	E0CBAE	BF2B3B
—	1.2 Fail	1.4 Fail	1.1 Fail	3.5 AA Large
1.2 Fail	—	1.7 Fail	1.1 Fail	4.2 AA Large
1.4 Fail	1.7 Fail	—	1.5 Fail	2.5 Fail
1.1 Fail	1.1 Fail	1.5 Fail	—	3.7 AA Large
3.5 AA Large	4.2 AA Large	2.5 Fail	3.7 AA Large	—

White BG

1.7Fail

1.4Fail

2.3Fail

1.6Fail

5.8AA

Black BG

12.5AAA

15.1AAA

9.0AAA

13.3AAA

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C8B0

DFDFC5

B4B36D

D7D7B5

7F7E37

Deuteranopia

C7C6B2

DFE0C7

B5B672

D8DAB7

889336

Tritanopia

C4B7B9

E2CBCC

BA7D80

DFBBBC

B83433

Achromatopsia

C5C5C5

DADADA

A6A6A6

CECECE

595959

Shades & Tints Shades & Tints

#C4CCA7

Dark

Light

#E2DBBE

Dark

Light

#BBAA5A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4cca7;
  --color-2: #e2dbbe;
  --color-3: #bbaa5a;
  --color-4: #e0cbae;
  --color-5: #bf2b3b;
}

SCSS

$color-1: #c4cca7;
$color-2: #e2dbbe;
$color-3: #bbaa5a;
$color-4: #e0cbae;
$color-5: #bf2b3b;

TAILWIND

colors: {
  'brand-1': '#c4cca7',
  'brand-2': '#e2dbbe',
  'brand-3': '#bbaa5a',
  'brand-4': '#e0cbae',
  'brand-5': '#bf2b3b',
}

RGB Array

[196, 204, 167], [226, 219, 190], [187, 170, 90], [224, 203, 174], [191, 43, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4CCA7, #E2DBBE, #BBAA5A, #E0CBAE, #BF2B3B is ideal for: health products, baby brands, fresh-style blogs. 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: #c4cca7; --color-2: #e2dbbe; --color-3: #bbaa5a; --color-4: #e0cbae; --color-5: #bf2b3b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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