← Back to Editor

#232F20 · #216952 · #FFFCC5 · #B4C730 · #003331

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#232F20

Celadon · DarkSlateGray · Dark Green

HEX
#232F20
RGB
rgb(35, 47, 32)
HSL
hsl(108, 19%, 15%)
HSB
hsb(108, 32%, 18%)
CMYK
cmyk(26%, 0%, 32%, 82%)
Oklch
oklch(28.9% 0.031 139.4)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

#216952

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#216952
RGB
rgb(33, 105, 82)
HSL
hsl(161, 52%, 27%)
HSB
hsb(161, 69%, 41%)
CMYK
cmyk(69%, 0%, 22%, 59%)
Oklch
oklch(47.0% 0.080 168.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#FFFCC5

Fresh Green · Bisque · Lemon Cream

HEX
#FFFCC5
RGB
rgb(255, 252, 197)
HSL
hsl(57, 100%, 89%)
HSB
hsb(57, 23%, 100%)
CMYK
cmyk(0%, 1%, 23%, 0%)
Oklch
oklch(98.0% 0.070 105.0)

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

#B4C730

Autumn Sage · GoldenRod · Honey Gold

HEX
#B4C730
RGB
rgb(180, 199, 48)
HSL
hsl(68, 61%, 48%)
HSB
hsb(68, 76%, 78%)
CMYK
cmyk(10%, 0%, 76%, 22%)
Oklch
oklch(78.9% 0.167 116.8)

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

#003331

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#003331
RGB
rgb(0, 51, 49)
HSL
hsl(178, 100%, 10%)
HSB
hsb(178, 100%, 20%)
CMYK
cmyk(100%, 0%, 4%, 80%)
Oklch
oklch(29.0% 0.050 190.6)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

232F20
2B1F2E

Analogous

292E1F
232F20
1F2E23

Triadic

232F20
1F222E
2E1F22

Split-Comp.

232F20
231F2E
2E1F29

Tetradic

232F20
1F292E
2B1F2E
2E231F

Contrast Matrix WCAG 2.1 Contrast

232F20
216952
FFFCC5
B4C730
003331
—
2.1
Fail
13.3
AAA
7.4
AAA
1.0
Fail
2.1
Fail
—
6.2
AA
3.5
AA Large
2.1
Fail
13.3
AAA
6.2
AA
—
1.8
Fail
13.2
AAA
7.4
AAA
3.5
AA Large
1.8
Fail
—
7.3
AAA
1.0
Fail
2.1
Fail
13.2
AAA
7.3
AAA
—
White BG
14.0AAA
6.5AA
1.1Fail
1.9Fail
13.8AAA
Black BG
1.5Fail
3.2AA Large
20.0AAA
11.2AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

282824
404158
FEFED2
BCBC55
161731

Deuteranopia

282725
3C3759
FEFED5
BBBA5D
130F32

Tritanopia

242627
255C5D
FFDDDF
B57178
033232

Achromatopsia

2A2A2A
515151
F7F7F7
B0B0B0
242424

Shades & Tints Shades & Tints

#232F20

Dark
Light

#216952

Dark
Light

#FFFCC5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #232f20;
  --color-2: #216952;
  --color-3: #fffcc5;
  --color-4: #b4c730;
  --color-5: #003331;
}

SCSS

$color-1: #232f20;
$color-2: #216952;
$color-3: #fffcc5;
$color-4: #b4c730;
$color-5: #003331;

TAILWIND

colors: {
  'brand-1': '#232f20',
  'brand-2': '#216952',
  'brand-3': '#fffcc5',
  'brand-4': '#b4c730',
  'brand-5': '#003331',
}

RGB Array

[35, 47, 32], [33, 105, 82], [255, 252, 197], [180, 199, 48], [0, 51, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #232F20, #216952, #FFFCC5, #B4C730, #003331 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #232f20; --color-2: #216952; --color-3: #fffcc5; --color-4: #b4c730; --color-5: #003331. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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