← Back to Editor

#30302E · #868F96 · #BCC0C3 · #CFD14A · #F2ECDE

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#30302E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#30302E
RGB
rgb(48, 48, 46)
HSL
hsl(60, 2%, 18%)
HSB
hsb(60, 4%, 19%)
CMYK
cmyk(0%, 0%, 4%, 81%)
Oklch
oklch(30.8% 0.004 106.6)

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

#868F96

Ash · LightSlateGray · Silver Sand

HEX
#868F96
RGB
rgb(134, 143, 150)
HSL
hsl(206, 7%, 56%)
HSB
hsb(206, 11%, 59%)
CMYK
cmyk(11%, 5%, 0%, 41%)
Oklch
oklch(64.5% 0.015 241.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BCC0C3

Silver Gray · Silver · Pearl Gray

HEX
#BCC0C3
RGB
rgb(188, 192, 195)
HSL
hsl(206, 6%, 75%)
HSB
hsb(206, 4%, 76%)
CMYK
cmyk(4%, 2%, 0%, 24%)
Oklch
oklch(80.6% 0.006 239.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#CFD14A

Autumn Sage · GoldenRod · Sunflower

HEX
#CFD14A
RGB
rgb(207, 209, 74)
HSL
hsl(61, 59%, 55%)
HSB
hsb(61, 65%, 82%)
CMYK
cmyk(1%, 0%, 65%, 18%)
Oklch
oklch(83.5% 0.154 110.1)

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

#F2ECDE

Goose Yellow · Beige · Lemon Cream

HEX
#F2ECDE
RGB
rgb(242, 236, 222)
HSL
hsl(42, 43%, 91%)
HSB
hsb(42, 8%, 95%)
CMYK
cmyk(0%, 2%, 8%, 5%)
Oklch
oklch(94.4% 0.020 87.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30302E
2D2D2F

Analogous

2F2E2D
30302E
2E2F2D

Triadic

30302E
2D2F2F
2F2D2F

Split-Comp.

30302E
2D2E2F
2E2D2F

Tetradic

30302E
2D2F2E
2D2D2F
2F2D2E

Contrast Matrix WCAG 2.1 Contrast

30302E
868F96
BCC0C3
CFD14A
F2ECDE
—
4.0
AA Large
7.2
AAA
8.1
AAA
11.2
AAA
4.0
AA Large
—
1.8
Fail
2.0
Fail
2.8
Fail
7.2
AAA
1.8
Fail
—
1.1
Fail
1.6
Fail
8.1
AAA
2.0
Fail
1.1
Fail
—
1.4
Fail
11.2
AAA
2.8
Fail
1.6
Fail
1.4
Fail
—
White BG
13.2AAA
3.3AA Large
1.8Fail
1.6Fail
1.2Fail
Black BG
1.6Fail
6.4AA
11.5AAA
12.9AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30302E
8A8A94
BEBEC2
D0D06B
EFEFE1

Deuteranopia

30302F
898994
BEBDC2
D0D073
F0F0E2

Tritanopia

302F2F
869393
BCC2C2
CF848A
F2E4E5

Achromatopsia

303030
8D8D8D
BFBFBF
C1C1C1
ECECEC

Shades & Tints Shades & Tints

#30302E

Dark
Light

#868F96

Dark
Light

#BCC0C3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30302e;
  --color-2: #868f96;
  --color-3: #bcc0c3;
  --color-4: #cfd14a;
  --color-5: #f2ecde;
}

SCSS

$color-1: #30302e;
$color-2: #868f96;
$color-3: #bcc0c3;
$color-4: #cfd14a;
$color-5: #f2ecde;

TAILWIND

colors: {
  'brand-1': '#30302e',
  'brand-2': '#868f96',
  'brand-3': '#bcc0c3',
  'brand-4': '#cfd14a',
  'brand-5': '#f2ecde',
}

RGB Array

[48, 48, 46], [134, 143, 150], [188, 192, 195], [207, 209, 74], [242, 236, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #30302E, #868F96, #BCC0C3, #CFD14A, #F2ECDE 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: #30302e; --color-2: #868f96; --color-3: #bcc0c3; --color-4: #cfd14a; --color-5: #f2ecde. 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