#CFDB9C + #F2F0C7 + #DACB9E + #BB6347 + #AFB56B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFDB9C

Willow Green · Khaki · Apple Green

HEX

#CFDB9C

RGB

rgb(207, 219, 156)

HSL

hsl(71, 47%, 74%)

HSB

hsb(71, 29%, 86%)

CMYK

cmyk(5%, 0%, 29%, 14%)

Oklch

oklch(86.7% 0.084 116.9)

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

#F2F0C7

Fresh Green · Bisque · Lemon Cream

HEX

#F2F0C7

RGB

rgb(242, 240, 199)

HSL

hsl(57, 62%, 86%)

HSB

hsb(57, 18%, 95%)

CMYK

cmyk(0%, 1%, 18%, 5%)

Oklch

oklch(94.6% 0.053 105.1)

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

#DACB9E

Goose Yellow · BurlyWood · Sunflower

HEX

#DACB9E

RGB

rgb(218, 203, 158)

HSL

hsl(45, 45%, 74%)

HSB

hsb(45, 28%, 85%)

CMYK

cmyk(0%, 7%, 28%, 15%)

Oklch

oklch(84.3% 0.062 91.8)

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

#BB6347

Crimson · Sienna · Passion Red

HEX

#BB6347

RGB

rgb(187, 99, 71)

HSL

hsl(14, 46%, 51%)

HSB

hsb(14, 62%, 73%)

CMYK

cmyk(0%, 47%, 62%, 27%)

Oklch

oklch(59.7% 0.121 38.3)

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

#AFB56B

Autumn Sage · Tan · Sunflower

HEX

#AFB56B

RGB

rgb(175, 181, 107)

HSL

hsl(65, 33%, 56%)

HSB

hsb(65, 41%, 71%)

CMYK

cmyk(3%, 0%, 41%, 29%)

Oklch

oklch(75.1% 0.097 112.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFDB9C

A99EDC

Analogous

DCC89E

CFDB9C

B1DC9E

Triadic

CFDB9C

9ED0DC

DC9ED0

Split-Comp.

CFDB9C

9EB1DC

C89EDC

Tetradic

CFDB9C

9EDCC8

A99EDC

DC9EB1

Contrast Matrix WCAG 2.1 Contrast

CFDB9C	F2F0C7	DACB9E	BB6347	AFB56B
—	1.3 Fail	1.1 Fail	2.9 Fail	1.5 Fail
1.3 Fail	—	1.4 Fail	3.6 AA Large	1.9 Fail
1.1 Fail	1.4 Fail	—	2.6 Fail	1.3 Fail
2.9 Fail	3.6 AA Large	2.6 Fail	—	1.9 Fail
1.5 Fail	1.9 Fail	1.3 Fail	1.9 Fail	—

White BG

1.5Fail

1.2Fail

1.6Fail

4.2AA Large

2.2Fail

Black BG

14.3AAA

18.1AAA

13.0AAA

5.0AA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4AB

F1F1D1

D4D3A9

95944E

B2B27D

Deuteranopia

D4D3AF

F1F1D3

D4D6AC

9AA14F

B1B181

Tritanopia

D0B7BA

F2D9DA

D9B1B3

B75354

AF8B8E

Achromatopsia

D0D0D0

ECECEC

CACACA

7A7A7A

ABABAB

Shades & Tints Shades & Tints

#CFDB9C

Dark

Light

#F2F0C7

Dark

Light

#DACB9E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfdb9c;
  --color-2: #f2f0c7;
  --color-3: #dacb9e;
  --color-4: #bb6347;
  --color-5: #afb56b;
}

SCSS

$color-1: #cfdb9c;
$color-2: #f2f0c7;
$color-3: #dacb9e;
$color-4: #bb6347;
$color-5: #afb56b;

TAILWIND

colors: {
  'brand-1': '#cfdb9c',
  'brand-2': '#f2f0c7',
  'brand-3': '#dacb9e',
  'brand-4': '#bb6347',
  'brand-5': '#afb56b',
}

RGB Array

[207, 219, 156], [242, 240, 199], [218, 203, 158], [187, 99, 71], [175, 181, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFDB9C, #F2F0C7, #DACB9E, #BB6347, #AFB56B 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: #cfdb9c; --color-2: #f2f0c7; --color-3: #dacb9e; --color-4: #bb6347; --color-5: #afb56b. 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