← Back to Editor

#899F8A · #C6C39A · #B40F09 · #F7130A · #F5E4B9

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

#899F8A

Celadon · DarkSeaGreen · Olive Green

HEX
#899F8A
RGB
rgb(137, 159, 138)
HSL
hsl(123, 10%, 58%)
HSB
hsb(123, 14%, 62%)
CMYK
cmyk(14%, 0%, 13%, 38%)
Oklch
oklch(67.9% 0.039 146.4)

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

#C6C39A

Fresh Green · Tan · Sunflower

HEX
#C6C39A
RGB
rgb(198, 195, 154)
HSL
hsl(56, 28%, 69%)
HSB
hsb(56, 22%, 78%)
CMYK
cmyk(0%, 2%, 22%, 22%)
Oklch
oklch(80.9% 0.055 104.1)

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

#B40F09

Vermilion · FireBrick · Wine Red

HEX
#B40F09
RGB
rgb(180, 15, 9)
HSL
hsl(2, 90%, 37%)
HSB
hsb(2, 95%, 71%)
CMYK
cmyk(0%, 92%, 95%, 29%)
Oklch
oklch(48.8% 0.194 29.2)

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

#F7130A

Vermilion · Red · Passion Red

HEX
#F7130A
RGB
rgb(247, 19, 10)
HSL
hsl(2, 94%, 50%)
HSB
hsb(2, 96%, 97%)
CMYK
cmyk(0%, 92%, 96%, 3%)
Oklch
oklch(61.7% 0.247 29.3)

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

#F5E4B9

Goose Yellow · Wheat · Lemon Cream

HEX
#F5E4B9
RGB
rgb(245, 228, 185)
HSL
hsl(43, 75%, 84%)
HSB
hsb(43, 24%, 96%)
CMYK
cmyk(0%, 7%, 24%, 4%)
Oklch
oklch(92.2% 0.059 89.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

899F8A
9F899E

Analogous

939F89
899F8A
899F95

Triadic

899F8A
8A899F
9F8A89

Split-Comp.

899F8A
95899F
9F8993

Tetradic

899F8A
89939F
9F899E
9F9589

Contrast Matrix WCAG 2.1 Contrast

899F8A
C6C39A
B40F09
F7130A
F5E4B9
—
1.6
Fail
2.5
Fail
1.5
Fail
2.3
Fail
1.6
Fail
—
3.9
AA Large
2.3
Fail
1.4
Fail
2.5
Fail
3.9
AA Large
—
1.7
Fail
5.5
AA
1.5
Fail
2.3
Fail
1.7
Fail
—
3.3
AA Large
2.3
Fail
1.4
Fail
5.5
AA
3.3
AA Large
—
White BG
2.8Fail
1.8Fail
7.0AA
4.2AA Large
1.3Fail
Black BG
7.4AAA
11.7AAA
3.0AA Large
5.1AA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

93938F
C5C5A4
6D6B0A
94920C
EEEDC3

Deuteranopia

919090
C5C5A6
76830B
A2B30D
EFF0C6

Tritanopia

8A9394
C6ACAD
AC0C0C
EC0E0E
F4CCCD

Achromatopsia

969696
BFBFBF
404040
565656
E4E4E4

Shades & Tints Shades & Tints

#899F8A

Dark
Light

#C6C39A

Dark
Light

#B40F09

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #899f8a;
  --color-2: #c6c39a;
  --color-3: #b40f09;
  --color-4: #f7130a;
  --color-5: #f5e4b9;
}

SCSS

$color-1: #899f8a;
$color-2: #c6c39a;
$color-3: #b40f09;
$color-4: #f7130a;
$color-5: #f5e4b9;

TAILWIND

colors: {
  'brand-1': '#899f8a',
  'brand-2': '#c6c39a',
  'brand-3': '#b40f09',
  'brand-4': '#f7130a',
  'brand-5': '#f5e4b9',
}

RGB Array

[137, 159, 138], [198, 195, 154], [180, 15, 9], [247, 19, 10], [245, 228, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #899F8A, #C6C39A, #B40F09, #F7130A, #F5E4B9 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: #899f8a; --color-2: #c6c39a; --color-3: #b40f09; --color-4: #f7130a; --color-5: #f5e4b9. 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