← Back to Editor

#CED59F · #F1EDC0 · #B1BEA4 · #647168 · #282828

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#CED59F

Fresh Green · Tan · Sunflower

HEX
#CED59F
RGB
rgb(206, 213, 159)
HSL
hsl(68, 39%, 73%)
HSB
hsb(68, 25%, 84%)
CMYK
cmyk(3%, 0%, 25%, 16%)
Oklch
oklch(85.4% 0.072 113.9)

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

#F1EDC0

Fresh Green · Bisque · Lemon Cream

HEX
#F1EDC0
RGB
rgb(241, 237, 192)
HSL
hsl(55, 64%, 85%)
HSB
hsb(55, 20%, 95%)
CMYK
cmyk(0%, 2%, 20%, 5%)
Oklch
oklch(93.8% 0.059 103.3)

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

#B1BEA4

Celadon · DarkGray · Apple Green

HEX
#B1BEA4
RGB
rgb(177, 190, 164)
HSL
hsl(90, 17%, 69%)
HSB
hsb(90, 14%, 75%)
CMYK
cmyk(7%, 0%, 14%, 25%)
Oklch
oklch(78.4% 0.039 129.0)

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

#647168

Ink Gray · DimGray · Warm Gray

HEX
#647168
RGB
rgb(100, 113, 104)
HSL
hsl(138, 6%, 42%)
HSB
hsb(138, 12%, 44%)
CMYK
cmyk(12%, 0%, 8%, 56%)
Oklch
oklch(53.5% 0.021 155.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#282828

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#282828
RGB
rgb(40, 40, 40)
HSL
hsl(0, 0%, 16%)
HSB
hsb(0, 0%, 16%)
CMYK
cmyk(0%, 0%, 0%, 84%)
Oklch
oklch(27.7% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CED59F
A69FD5

Analogous

D5C19F
CED59F
B3D59F

Triadic

CED59F
9FCED5
D59FCE

Split-Comp.

CED59F
9FB3D5
C19FD5

Tetradic

CED59F
9FD5C1
A69FD5
D59FB3

Contrast Matrix WCAG 2.1 Contrast

CED59F
F1EDC0
B1BEA4
647168
282828
—
1.3
Fail
1.3
Fail
3.3
AA Large
9.6
AAA
1.3
Fail
—
1.6
Fail
4.3
AA Large
12.4
AAA
1.3
Fail
1.6
Fail
—
2.6
Fail
7.6
AAA
3.3
AA Large
4.3
AA Large
2.6
Fail
—
2.9
Fail
9.6
AAA
12.4
AAA
7.6
AAA
2.9
Fail
—
White BG
1.5Fail
1.2Fail
1.9Fail
5.1AA
14.7AAA
Black BG
13.6AAA
17.6AAA
10.8AAA
4.1AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1AC
EFEFCB
B7B7AA
6A6A6A
282828

Deuteranopia

D1D0AF
F0F0CD
B6B5AC
69686B
282828

Tritanopia

CEB6B9
F1D3D5
B2AFB0
656C6C
282828

Achromatopsia

CDCDCD
E9E9E9
B7B7B7
6C6C6C
282828

Shades & Tints Shades & Tints

#CED59F

Dark
Light

#F1EDC0

Dark
Light

#B1BEA4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ced59f;
  --color-2: #f1edc0;
  --color-3: #b1bea4;
  --color-4: #647168;
  --color-5: #282828;
}

SCSS

$color-1: #ced59f;
$color-2: #f1edc0;
$color-3: #b1bea4;
$color-4: #647168;
$color-5: #282828;

TAILWIND

colors: {
  'brand-1': '#ced59f',
  'brand-2': '#f1edc0',
  'brand-3': '#b1bea4',
  'brand-4': '#647168',
  'brand-5': '#282828',
}

RGB Array

[206, 213, 159], [241, 237, 192], [177, 190, 164], [100, 113, 104], [40, 40, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CED59F, #F1EDC0, #B1BEA4, #647168, #282828 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ced59f; --color-2: #f1edc0; --color-3: #b1bea4; --color-4: #647168; --color-5: #282828. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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