#CFC77F + #B2AC5E + #FAB088 + #B9AE97 + #FCE19F · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CFC77F

Fresh Green · BurlyWood · Sunflower

HEX

#CFC77F

RGB

rgb(207, 199, 127)

HSL

hsl(54, 45%, 65%)

HSB

hsb(54, 39%, 81%)

CMYK

cmyk(0%, 4%, 39%, 19%)

Oklch

oklch(82.0% 0.093 102.8)

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

#B2AC5E

Autumn Sage · Tan · Sunflower

HEX

#B2AC5E

RGB

rgb(178, 172, 94)

HSL

hsl(56, 35%, 53%)

HSB

hsb(56, 47%, 70%)

CMYK

cmyk(0%, 3%, 47%, 30%)

Oklch

oklch(73.2% 0.100 104.7)

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

#FAB088

Apricot · LightSalmon · Peach Orange

HEX

#FAB088

RGB

rgb(250, 176, 136)

HSL

hsl(21, 92%, 76%)

HSB

hsb(21, 46%, 98%)

CMYK

cmyk(0%, 30%, 46%, 2%)

Oklch

oklch(81.8% 0.102 49.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#B9AE97

Ginger · DarkGray · Sunflower

HEX

#B9AE97

RGB

rgb(185, 174, 151)

HSL

hsl(41, 20%, 66%)

HSB

hsb(41, 18%, 73%)

CMYK

cmyk(0%, 6%, 18%, 27%)

Oklch

oklch(75.4% 0.034 85.5)

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

#FCE19F

Goose Yellow · Wheat · Lemon Cream

HEX

#FCE19F

RGB

rgb(252, 225, 159)

HSL

hsl(43, 94%, 81%)

HSB

hsb(43, 37%, 99%)

CMYK

cmyk(0%, 11%, 37%, 1%)

Oklch

oklch(91.7% 0.089 88.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFC77F

7E86CE

Analogous

CE9E7E

CFC77F

AECE7E

Triadic

CFC77F

7ECEC6

C67ECE

Split-Comp.

CFC77F

7EAECE

9E7ECE

Tetradic

CFC77F

7ECE9E

7E86CE

CE7EAE

Contrast Matrix WCAG 2.1 Contrast

CFC77F	B2AC5E	FAB088	B9AE97	FCE19F
—	1.4 Fail	1.0 Fail	1.3 Fail	1.4 Fail
1.4 Fail	—	1.3 Fail	1.1 Fail	1.8 Fail
1.0 Fail	1.3 Fail	—	1.2 Fail	1.4 Fail
1.3 Fail	1.1 Fail	1.2 Fail	—	1.7 Fail
1.4 Fail	1.8 Fail	1.4 Fail	1.7 Fail	—

White BG

1.7Fail

2.3Fail

1.8Fail

2.2Fail

1.3Fail

Black BG

12.1AAA

9.0AAA

11.6AAA

9.6AAA

16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCB90

AFAF71

DAD992

B4B49D

F0F0AF

Deuteranopia

CCCD95

B0B075

DEE494

B5B69E

F2F4B3

Tritanopia

CF9EA1

B28083

F6999B

B8A1A2

FBBCBE

Achromatopsia

C1C1C1

A5A5A5

C2C2C2

AFAFAF

E2E2E2

Shades & Tints Shades & Tints

#CFC77F

Dark

Light

#B2AC5E

Dark

Light

#FAB088

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfc77f;
  --color-2: #b2ac5e;
  --color-3: #fab088;
  --color-4: #b9ae97;
  --color-5: #fce19f;
}

SCSS

$color-1: #cfc77f;
$color-2: #b2ac5e;
$color-3: #fab088;
$color-4: #b9ae97;
$color-5: #fce19f;

TAILWIND

colors: {
  'brand-1': '#cfc77f',
  'brand-2': '#b2ac5e',
  'brand-3': '#fab088',
  'brand-4': '#b9ae97',
  'brand-5': '#fce19f',
}

RGB Array

[207, 199, 127], [178, 172, 94], [250, 176, 136], [185, 174, 151], [252, 225, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CFC77F, #B2AC5E, #FAB088, #B9AE97, #FCE19F 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: #cfc77f; --color-2: #b2ac5e; --color-3: #fab088; --color-4: #b9ae97; --color-5: #fce19f. 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 nature-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