← Back to Editor

#886A68 · #CEAC90 · #FFFFFF · #302A06 · #FBDD65

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

#886A68

Crimson · DimGray · Passion Red

HEX
#886A68
RGB
rgb(136, 106, 104)
HSL
hsl(4, 13%, 47%)
HSB
hsb(4, 24%, 53%)
CMYK
cmyk(0%, 22%, 24%, 47%)
Oklch
oklch(55.3% 0.039 22.8)

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

#CEAC90

Apricot · Tan · Warm Sun

HEX
#CEAC90
RGB
rgb(206, 172, 144)
HSL
hsl(27, 39%, 69%)
HSB
hsb(27, 30%, 81%)
CMYK
cmyk(0%, 17%, 30%, 19%)
Oklch
oklch(76.7% 0.055 61.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#302A06

Autumn Sage · Black · Amber Gold

HEX
#302A06
RGB
rgb(48, 42, 6)
HSL
hsl(51, 78%, 11%)
HSB
hsb(51, 88%, 19%)
CMYK
cmyk(0%, 13%, 87%, 81%)
Oklch
oklch(28.4% 0.053 99.6)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#FBDD65

Ginger · Khaki · Sunflower

HEX
#FBDD65
RGB
rgb(251, 221, 101)
HSL
hsl(48, 95%, 69%)
HSB
hsb(48, 60%, 98%)
CMYK
cmyk(0%, 12%, 60%, 2%)
Oklch
oklch(90.0% 0.142 95.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

886A68
688587

Analogous

876876
886A68
877A68

Triadic

886A68
68876A
6A6887

Split-Comp.

886A68
68877A
687687

Tetradic

886A68
768768
688587
7A6887

Contrast Matrix WCAG 2.1 Contrast

886A68
CEAC90
FFFFFF
302A06
FBDD65
—
2.3
Fail
4.9
AA
3.0
Fail
3.6
AA Large
2.3
Fail
—
2.1
Fail
6.8
AA
1.6
Fail
4.9
AA
2.1
Fail
—
14.4
AAA
1.3
Fail
3.0
Fail
6.8
AA
14.4
AAA
—
10.7
AAA
3.6
AA Large
1.6
Fail
1.3
Fail
10.7
AAA
—
White BG
4.9AA
2.1Fail
1.0Fail
14.4AAA
1.3Fail
Black BG
4.3AA Large
9.9AAA
21.0AAA
1.5Fail
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B68
BFBF97
FFFFFF
2D2D0F
EEEE82

Deuteranopia

7D7F69
C1C498
FFFFFF
2E2E11
F0F289

Tritanopia

876969
CC9C9D
FFFFFF
301617
FA999E

Achromatopsia

737373
B3B3B3
FFFFFF
282828
D8D8D8

Shades & Tints Shades & Tints

#886A68

Dark
Light

#CEAC90

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #886a68;
  --color-2: #ceac90;
  --color-3: #ffffff;
  --color-4: #302a06;
  --color-5: #fbdd65;
}

SCSS

$color-1: #886a68;
$color-2: #ceac90;
$color-3: #ffffff;
$color-4: #302a06;
$color-5: #fbdd65;

TAILWIND

colors: {
  'brand-1': '#886a68',
  'brand-2': '#ceac90',
  'brand-3': '#ffffff',
  'brand-4': '#302a06',
  'brand-5': '#fbdd65',
}

RGB Array

[136, 106, 104], [206, 172, 144], [255, 255, 255], [48, 42, 6], [251, 221, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #886A68, #CEAC90, #FFFFFF, #302A06, #FBDD65 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #886a68; --color-2: #ceac90; --color-3: #ffffff; --color-4: #302a06; --color-5: #fbdd65. 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. 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