#254117 + #29561B + #AFA03A + #8E6C23 + #805817 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#254117

Celadon · DarkGreen · Dark Green

HEX

#254117

RGB

rgb(37, 65, 23)

HSL

hsl(100, 48%, 17%)

HSB

hsb(100, 65%, 25%)

CMYK

cmyk(43%, 0%, 65%, 75%)

Oklch

oklch(34.2% 0.075 136.5)

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

#29561B

Pine Green · DarkGreen · Forest Green

HEX

#29561B

RGB

rgb(41, 86, 27)

HSL

hsl(106, 52%, 22%)

HSB

hsb(106, 69%, 34%)

CMYK

cmyk(52%, 0%, 69%, 66%)

Oklch

oklch(40.7% 0.102 139.0)

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

#AFA03A

Autumn Sage · GoldenRod · Honey Gold

HEX

#AFA03A

RGB

rgb(175, 160, 58)

HSL

hsl(52, 50%, 46%)

HSB

hsb(52, 67%, 69%)

CMYK

cmyk(0%, 9%, 67%, 31%)

Oklch

oklch(70.0% 0.122 100.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#8E6C23

Ochre · Sienna · Honey Gold

HEX

#8E6C23

RGB

rgb(142, 108, 35)

HSL

hsl(41, 60%, 35%)

HSB

hsb(41, 75%, 56%)

CMYK

cmyk(0%, 24%, 75%, 44%)

Oklch

oklch(55.2% 0.098 82.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#805817

Ochre · Sienna · Amber Brown

HEX

#805817

RGB

rgb(128, 88, 23)

HSL

hsl(37, 70%, 30%)

HSB

hsb(37, 82%, 50%)

CMYK

cmyk(0%, 31%, 82%, 50%)

Oklch

oklch(49.2% 0.094 74.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

254117

321740

Analogous

394017

254117

17401D

Triadic

254117

172440

401724

Split-Comp.

254117

1D1740

401739

Tetradic

254117

173940

321740

401D17

Contrast Matrix WCAG 2.1 Contrast

254117	29561B	AFA03A	8E6C23	805817
—	1.3 Fail	4.3 AA Large	2.3 Fail	1.8 Fail
1.3 Fail	—	3.2 AA Large	1.8 Fail	1.4 Fail
4.3 AA Large	3.2 AA Large	—	1.8 Fail	2.4 Fail
2.3 Fail	1.8 Fail	1.8 Fail	—	1.3 Fail
1.8 Fail	1.4 Fail	2.4 Fail	1.3 Fail	—

White BG

11.4AAA

8.6AAA

2.7Fail

4.9AA

6.3AA

Black BG

1.8Fail

2.4Fail

7.9AAA

4.3AA Large

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

313121

3C3D29

A9A853

7F7F35

6F6E27

Deuteranopia

302D24

3A372D

A9AB59

818439

71742B

Tritanopia

26292B

2B3537

AE666A

8C4346

7E3336

Achromatopsia

343434

424242

999999

6E6E6E

5D5D5D

Shades & Tints Shades & Tints

#254117

Dark

Light

#29561B

Dark

Light

#AFA03A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #254117;
  --color-2: #29561b;
  --color-3: #afa03a;
  --color-4: #8e6c23;
  --color-5: #805817;
}

SCSS

$color-1: #254117;
$color-2: #29561b;
$color-3: #afa03a;
$color-4: #8e6c23;
$color-5: #805817;

TAILWIND

colors: {
  'brand-1': '#254117',
  'brand-2': '#29561b',
  'brand-3': '#afa03a',
  'brand-4': '#8e6c23',
  'brand-5': '#805817',
}

RGB Array

[37, 65, 23], [41, 86, 27], [175, 160, 58], [142, 108, 35], [128, 88, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #254117, #29561B, #AFA03A, #8E6C23, #805817 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: #254117; --color-2: #29561b; --color-3: #afa03a; --color-4: #8e6c23; --color-5: #805817. 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 warm-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