← Back to Editor

#8BB4B1 · #F3F1B3 · #4D0C15 · #F5F3E6 · #C8D1B9

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

#8BB4B1

Jade · DarkGray · Lake Green

HEX
#8BB4B1
RGB
rgb(139, 180, 177)
HSL
hsl(176, 21%, 63%)
HSB
hsb(176, 23%, 71%)
CMYK
cmyk(23%, 0%, 2%, 29%)
Oklch
oklch(73.9% 0.044 190.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#F3F1B3

Fresh Green · Wheat · Lemon Cream

HEX
#F3F1B3
RGB
rgb(243, 241, 179)
HSL
hsl(58, 73%, 83%)
HSB
hsb(58, 26%, 95%)
CMYK
cmyk(0%, 1%, 26%, 5%)
Oklch
oklch(94.5% 0.079 106.3)

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

#4D0C15

Vermilion · Maroon · Deep Berry

HEX
#4D0C15
RGB
rgb(77, 12, 21)
HSL
hsl(352, 73%, 17%)
HSB
hsb(352, 84%, 30%)
CMYK
cmyk(0%, 84%, 73%, 70%)
Oklch
oklch(27.8% 0.095 18.8)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#F5F3E6

Fresh Green · Linen · Lemon Cream

HEX
#F5F3E6
RGB
rgb(245, 243, 230)
HSL
hsl(52, 43%, 93%)
HSB
hsb(52, 6%, 96%)
CMYK
cmyk(0%, 1%, 6%, 4%)
Oklch
oklch(96.2% 0.017 99.6)

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

#C8D1B9

Willow Green · Silver · Apple Green

HEX
#C8D1B9
RGB
rgb(200, 209, 185)
HSL
hsl(83, 21%, 77%)
HSB
hsb(83, 11%, 82%)
CMYK
cmyk(4%, 0%, 11%, 18%)
Oklch
oklch(84.7% 0.034 123.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BB4B1
B48D8F

Analogous

8DB49E
8BB4B1
8DA3B4

Triadic

8BB4B1
B28DB4
B4B28D

Split-Comp.

8BB4B1
B48DA3
B49E8D

Tetradic

8BB4B1
9E8DB4
B48D8F
A3B48D

Contrast Matrix WCAG 2.1 Contrast

8BB4B1
F3F1B3
4D0C15
F5F3E6
C8D1B9
—
1.9
Fail
6.7
AA
2.0
Fail
1.4
Fail
1.9
Fail
—
13.1
AAA
1.0
Fail
1.4
Fail
6.7
AA
13.1
AAA
—
13.7
AAA
9.6
AAA
2.0
Fail
1.0
Fail
13.7
AAA
—
1.4
Fail
1.4
Fail
1.4
Fail
9.6
AAA
1.4
Fail
—
White BG
2.3Fail
1.2Fail
15.2AAA
1.1Fail
1.6Fail
Black BG
9.3AAA
18.0AAA
1.4Fail
18.8AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DB2
F2F2C2
313013
F4F4E9
CCCCBF

Deuteranopia

9A97B2
F2F2C6
353A12
F4F4EA
CBCBC0

Tritanopia

8DB2B2
F3CED0
4A1111
F5ECEC
C8C3C4

Achromatopsia

A7A7A7
EBEBEB
202020
F2F2F2
CCCCCC

Shades & Tints Shades & Tints

#8BB4B1

Dark
Light

#F3F1B3

Dark
Light

#4D0C15

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bb4b1;
  --color-2: #f3f1b3;
  --color-3: #4d0c15;
  --color-4: #f5f3e6;
  --color-5: #c8d1b9;
}

SCSS

$color-1: #8bb4b1;
$color-2: #f3f1b3;
$color-3: #4d0c15;
$color-4: #f5f3e6;
$color-5: #c8d1b9;

TAILWIND

colors: {
  'brand-1': '#8bb4b1',
  'brand-2': '#f3f1b3',
  'brand-3': '#4d0c15',
  'brand-4': '#f5f3e6',
  'brand-5': '#c8d1b9',
}

RGB Array

[139, 180, 177], [243, 241, 179], [77, 12, 21], [245, 243, 230], [200, 209, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8BB4B1, #F3F1B3, #4D0C15, #F5F3E6, #C8D1B9 is ideal for: health products, baby brands, fresh-style blogs, 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: #8bb4b1; --color-2: #f3f1b3; --color-3: #4d0c15; --color-4: #f5f3e6; --color-5: #c8d1b9. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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