#AF2D01 + #31331D + #545639 + #787955 + #9B9C71 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AF2D01

Tangerine · FireBrick · Amber Brown

HEX

#AF2D01

RGB

rgb(175, 45, 1)

HSL

hsl(15, 99%, 35%)

HSB

hsb(15, 99%, 69%)

CMYK

cmyk(0%, 74%, 99%, 31%)

Oklch

oklch(49.8% 0.172 35.5)

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

#31331D

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#31331D

RGB

rgb(49, 51, 29)

HSL

hsl(65, 28%, 16%)

HSB

hsb(65, 43%, 20%)

CMYK

cmyk(4%, 0%, 43%, 80%)

Oklch

oklch(31.3% 0.036 112.7)

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

#545639

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#545639

RGB

rgb(84, 86, 57)

HSL

hsl(64, 20%, 28%)

HSB

hsb(64, 34%, 34%)

CMYK

cmyk(2%, 0%, 34%, 66%)

Oklch

oklch(44.3% 0.045 111.4)

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

#787955

Autumn Sage · DimGray · Honey Gold

HEX

#787955

RGB

rgb(120, 121, 85)

HSL

hsl(62, 17%, 40%)

HSB

hsb(62, 30%, 47%)

CMYK

cmyk(1%, 0%, 30%, 53%)

Oklch

oklch(56.6% 0.052 109.3)

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

#9B9C71

Autumn Sage · Gray · Sunflower

HEX

#9B9C71

RGB

rgb(155, 156, 113)

HSL

hsl(61, 18%, 53%)

HSB

hsb(61, 28%, 61%)

CMYK

cmyk(1%, 0%, 28%, 39%)

Oklch

oklch(68.1% 0.060 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF2D01

0185B2

Analogous

B2012D

AF2D01

B28501

Triadic

AF2D01

01B22D

2D01B2

Split-Comp.

AF2D01

01B285

012DB2

Tetradic

AF2D01

2DB201

0185B2

8501B2

Contrast Matrix WCAG 2.1 Contrast

AF2D01	31331D	545639	787955	9B9C71
—	2.0 Fail	1.2 Fail	1.5 Fail	2.3 Fail
2.0 Fail	—	1.7 Fail	2.9 Fail	4.6 AA
1.2 Fail	1.7 Fail	—	1.7 Fail	2.7 Fail
1.5 Fail	2.9 Fail	1.7 Fail	—	1.6 Fail
2.3 Fail	4.6 AA	2.7 Fail	1.6 Fail	—

White BG

6.6AA

12.9AAA

7.6AAA

4.5AA

2.8Fail

Black BG

3.2AA Large

1.6Fail

2.8Fail

4.7AA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

77760C

323222

555540

78785E

9B9B7B

Deuteranopia

7E880E

323224

555542

787860

9B9B7E

Tritanopia

A91416

312727

544647

786566

9B8485

Achromatopsia

4F4F4F

303030

525252

757575

979797

Shades & Tints Shades & Tints

#AF2D01

Dark

Light

#31331D

Dark

Light

#545639

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af2d01;
  --color-2: #31331d;
  --color-3: #545639;
  --color-4: #787955;
  --color-5: #9b9c71;
}

SCSS

$color-1: #af2d01;
$color-2: #31331d;
$color-3: #545639;
$color-4: #787955;
$color-5: #9b9c71;

TAILWIND

colors: {
  'brand-1': '#af2d01',
  'brand-2': '#31331d',
  'brand-3': '#545639',
  'brand-4': '#787955',
  'brand-5': '#9b9c71',
}

RGB Array

[175, 45, 1], [49, 51, 29], [84, 86, 57], [120, 121, 85], [155, 156, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF2D01, #31331D, #545639, #787955, #9B9C71 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: #af2d01; --color-2: #31331d; --color-3: #545639; --color-4: #787955; --color-5: #9b9c71. 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 general-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