#162C16 + #497449 + #991111 + #C72929 + #C7671D · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#162C16

Celadon · Black · Dark Green

HEX

#162C16

RGB

rgb(22, 44, 22)

HSL

hsl(120, 33%, 13%)

HSB

hsb(120, 50%, 17%)

CMYK

cmyk(50%, 0%, 50%, 83%)

Oklch

oklch(26.8% 0.049 144.1)

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

#497449

Celadon · DarkOliveGreen · Forest Green

HEX

#497449

RGB

rgb(73, 116, 73)

HSL

hsl(120, 23%, 37%)

HSB

hsb(120, 37%, 45%)

CMYK

cmyk(37%, 0%, 37%, 55%)

Oklch

oklch(51.5% 0.082 144.3)

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

#991111

Vermilion · DarkRed · Wine Red

HEX

#991111

RGB

rgb(153, 17, 17)

HSL

hsl(0, 80%, 33%)

HSB

hsb(0, 89%, 60%)

CMYK

cmyk(0%, 89%, 89%, 40%)

Oklch

oklch(43.7% 0.168 27.9)

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

#C72929

Vermilion · FireBrick · Passion Red

HEX

#C72929

RGB

rgb(199, 41, 41)

HSL

hsl(0, 66%, 47%)

HSB

hsb(0, 79%, 78%)

CMYK

cmyk(0%, 79%, 79%, 22%)

Oklch

oklch(54.1% 0.194 26.7)

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

#C7671D

Tangerine · Chocolate · Amber Brown

HEX

#C7671D

RGB

rgb(199, 103, 29)

HSL

hsl(26, 75%, 45%)

HSB

hsb(26, 85%, 78%)

CMYK

cmyk(0%, 48%, 85%, 22%)

Oklch

oklch(61.6% 0.146 52.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

162C16

2C162C

Analogous

212C16

162C16

162C21

Triadic

162C16

16162C

2C1616

Split-Comp.

162C16

21162C

2C1621

Tetradic

162C16

16212C

2C162C

2C2116

Contrast Matrix WCAG 2.1 Contrast

162C16	497449	991111	C72929	C7671D
—	2.8 Fail	1.7 Fail	2.7 Fail	3.8 AA Large
2.8 Fail	—	1.6 Fail	1.0 Fail	1.4 Fail
1.7 Fail	1.6 Fail	—	1.5 Fail	2.2 Fail
2.7 Fail	1.0 Fail	1.5 Fail	—	1.4 Fail
3.8 AA Large	1.4 Fail	2.2 Fail	1.4 Fail	—

White BG

14.9AAA

5.4AA

8.6AAA

5.6AA

3.9AA Large

Black BG

1.4Fail

3.9AA Large

2.4Fail

3.8AA Large

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

20201B

5C5C53

5E5D11

838129

9D9D2F

Deuteranopia

1E1D1D

595656

667011

8C9829

A3AA33

Tritanopia

172020

4B5C5D

921111

BF2929

C23D40

Achromatopsia

232323

626262

3A3A3A

585858

7B7B7B

Shades & Tints Shades & Tints

#162C16

Dark

Light

#497449

Dark

Light

#991111

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #162c16;
  --color-2: #497449;
  --color-3: #991111;
  --color-4: #c72929;
  --color-5: #c7671d;
}

SCSS

$color-1: #162c16;
$color-2: #497449;
$color-3: #991111;
$color-4: #c72929;
$color-5: #c7671d;

TAILWIND

colors: {
  'brand-1': '#162c16',
  'brand-2': '#497449',
  'brand-3': '#991111',
  'brand-4': '#c72929',
  'brand-5': '#c7671d',
}

RGB Array

[22, 44, 22], [73, 116, 73], [153, 17, 17], [199, 41, 41], [199, 103, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #162C16, #497449, #991111, #C72929, #C7671D 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: #162c16; --color-2: #497449; --color-3: #991111; --color-4: #c72929; --color-5: #c7671d. 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