← Back to Editor

#BCCDAB · #9E2439 · #BE8A34 · #F0D17F · #302529

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

#BCCDAB

Celadon · Silver · Apple Green

HEX
#BCCDAB
RGB
rgb(188, 205, 171)
HSL
hsl(90, 25%, 74%)
HSB
hsb(90, 17%, 80%)
CMYK
cmyk(8%, 0%, 17%, 20%)
Oklch
oklch(82.6% 0.050 129.2)

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

#9E2439

Vermilion · Brown · Wine Red

HEX
#9E2439
RGB
rgb(158, 36, 57)
HSL
hsl(350, 63%, 38%)
HSB
hsb(350, 77%, 62%)
CMYK
cmyk(0%, 77%, 64%, 38%)
Oklch
oklch(46.5% 0.157 16.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#BE8A34

Ochre · DarkGoldenRod · Amber Brown

HEX
#BE8A34
RGB
rgb(190, 138, 52)
HSL
hsl(37, 57%, 47%)
HSB
hsb(37, 73%, 75%)
CMYK
cmyk(0%, 27%, 73%, 25%)
Oklch
oklch(66.9% 0.119 76.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F0D17F

Goose Yellow · Khaki · Sunflower

HEX
#F0D17F
RGB
rgb(240, 209, 127)
HSL
hsl(44, 79%, 72%)
HSB
hsb(44, 47%, 94%)
CMYK
cmyk(0%, 13%, 47%, 6%)
Oklch
oklch(86.9% 0.107 89.4)

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

#302529

Dark Violet · DarkSlateGray · Raspberry

HEX
#302529
RGB
rgb(48, 37, 41)
HSL
hsl(338, 13%, 17%)
HSB
hsb(338, 23%, 19%)
CMYK
cmyk(0%, 23%, 15%, 81%)
Oklch
oklch(27.9% 0.018 354.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCCDAB
BDACCD

Analogous

CDCDAC
BCCDAB
ACCDAC

Triadic

BCCDAB
ACBDCD
CDACBD

Split-Comp.

BCCDAB
ACACCD
CDACCD

Tetradic

BCCDAB
ACCDCD
BDACCD
CDACAC

Contrast Matrix WCAG 2.1 Contrast

BCCDAB
9E2439
BE8A34
F0D17F
302529
—
4.5
AA
1.8
Fail
1.1
Fail
8.8
AAA
4.5
AA
—
2.5
Fail
5.1
AA
1.9
Fail
1.8
Fail
2.5
Fail
—
2.1
Fail
4.8
AA
1.1
Fail
5.1
AA
2.1
Fail
—
9.9
AAA
8.8
AAA
1.9
Fail
4.8
AA
9.9
AAA
—
White BG
1.7Fail
7.6AAA
3.1AA Large
1.5Fail
14.8AAA
Black BG
12.5AAA
2.8Fail
6.9AA
14.1AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C4B3
696834
A7A749
E3E293
2B2B28

Deuteranopia

C2C1B5
707933
ABAE4E
E4E798
2C2D28

Tritanopia

BDBABB
98302F
BB595D
EEA3A6
2F2727

Achromatopsia

C4C4C4
4B4B4B
909090
D1D1D1
292929

Shades & Tints Shades & Tints

#BCCDAB

Dark
Light

#9E2439

Dark
Light

#BE8A34

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bccdab;
  --color-2: #9e2439;
  --color-3: #be8a34;
  --color-4: #f0d17f;
  --color-5: #302529;
}

SCSS

$color-1: #bccdab;
$color-2: #9e2439;
$color-3: #be8a34;
$color-4: #f0d17f;
$color-5: #302529;

TAILWIND

colors: {
  'brand-1': '#bccdab',
  'brand-2': '#9e2439',
  'brand-3': '#be8a34',
  'brand-4': '#f0d17f',
  'brand-5': '#302529',
}

RGB Array

[188, 205, 171], [158, 36, 57], [190, 138, 52], [240, 209, 127], [48, 37, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BCCDAB, #9E2439, #BE8A34, #F0D17F, #302529 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: #bccdab; --color-2: #9e2439; --color-3: #be8a34; --color-4: #f0d17f; --color-5: #302529. 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