#CB9D3F + #8F7749 + #623F45 + #15212F + #1F3D47 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CB9D3F

Ginger · GoldenRod · Sunflower

HEX

#CB9D3F

RGB

rgb(203, 157, 63)

HSL

hsl(40, 57%, 52%)

HSB

hsb(40, 69%, 80%)

CMYK

cmyk(0%, 23%, 69%, 20%)

Oklch

oklch(72.2% 0.122 82.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8F7749

Ochre · Sienna · Amber Brown

HEX

#8F7749

RGB

rgb(143, 119, 73)

HSL

hsl(39, 32%, 42%)

HSB

hsb(39, 49%, 56%)

CMYK

cmyk(0%, 17%, 49%, 44%)

Oklch

oklch(58.1% 0.070 82.8)

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

#623F45

Crimson · DarkOliveGreen · Wine Red

HEX

#623F45

RGB

rgb(98, 63, 69)

HSL

hsl(350, 22%, 32%)

HSB

hsb(350, 36%, 38%)

CMYK

cmyk(0%, 36%, 30%, 62%)

Oklch

oklch(41.0% 0.050 8.3)

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

#15212F

Indigo · Black · Deep Sea Blue

HEX

#15212F

RGB

rgb(21, 33, 47)

HSL

hsl(212, 38%, 13%)

HSB

hsb(212, 55%, 18%)

CMYK

cmyk(55%, 30%, 0%, 82%)

Oklch

oklch(24.4% 0.032 252.9)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#1F3D47

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1F3D47

RGB

rgb(31, 61, 71)

HSL

hsl(195, 39%, 20%)

HSB

hsb(195, 56%, 28%)

CMYK

cmyk(56%, 14%, 0%, 72%)

Oklch

oklch(34.1% 0.040 221.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CB9D3F

3F6DCA

Analogous

CA563F

CB9D3F

B3CA3F

Triadic

CB9D3F

3FCA9C

9C3FCA

Split-Comp.

CB9D3F

3FB3CA

563FCA

Tetradic

CB9D3F

3FCA56

3F6DCA

CA3FB3

Contrast Matrix WCAG 2.1 Contrast

CB9D3F	8F7749	623F45	15212F	1F3D47
—	1.7 Fail	3.6 AA Large	6.5 AA	4.6 AA
1.7 Fail	—	2.1 Fail	3.8 AA Large	2.7 Fail
3.6 AA Large	2.1 Fail	—	1.8 Fail	1.3 Fail
6.5 AA	3.8 AA Large	1.8 Fail	—	1.4 Fail
4.6 AA	2.7 Fail	1.3 Fail	1.4 Fail	—

White BG

2.5Fail

4.3AA Large

9.1AAA

16.3AAA

11.6AAA

Black BG

8.4AAA

4.9AA

2.3Fail

1.3Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B756

858454

535344

1A1A2C

2C2C45

Deuteranopia

BABD5B

868857

555843

1A192B

2A2844

Tritanopia

C9686C

8E5D5F

604242

162928

214342

Achromatopsia

A0A0A0

797979

4A4A4A

1F1F1F

353535

Shades & Tints Shades & Tints

#CB9D3F

Dark

Light

#8F7749

Dark

Light

#623F45

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cb9d3f;
  --color-2: #8f7749;
  --color-3: #623f45;
  --color-4: #15212f;
  --color-5: #1f3d47;
}

SCSS

$color-1: #cb9d3f;
$color-2: #8f7749;
$color-3: #623f45;
$color-4: #15212f;
$color-5: #1f3d47;

TAILWIND

colors: {
  'brand-1': '#cb9d3f',
  'brand-2': '#8f7749',
  'brand-3': '#623f45',
  'brand-4': '#15212f',
  'brand-5': '#1f3d47',
}

RGB Array

[203, 157, 63], [143, 119, 73], [98, 63, 69], [21, 33, 47], [31, 61, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CB9D3F, #8F7749, #623F45, #15212F, #1F3D47 is ideal for: tech websites, dark mode UIs, game UIs. 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: #cb9d3f; --color-2: #8f7749; --color-3: #623f45; --color-4: #15212f; --color-5: #1f3d47. 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. 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