#DE8014 + #3F277F + #AF884F + #D2431A + #1C1B20 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE8014

Ochre · Chocolate · Amber Brown

HEX

#DE8014

RGB

rgb(222, 128, 20)

HSL

hsl(32, 83%, 47%)

HSB

hsb(32, 91%, 87%)

CMYK

cmyk(0%, 42%, 91%, 13%)

Oklch

oklch(68.8% 0.155 60.7)

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

#3F277F

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#3F277F

RGB

rgb(63, 39, 127)

HSL

hsl(256, 53%, 33%)

HSB

hsb(256, 69%, 50%)

CMYK

cmyk(50%, 69%, 0%, 50%)

Oklch

oklch(35.8% 0.140 290.0)

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

#AF884F

Ochre · Sienna · Amber Brown

HEX

#AF884F

RGB

rgb(175, 136, 79)

HSL

hsl(36, 38%, 50%)

HSB

hsb(36, 55%, 69%)

CMYK

cmyk(0%, 22%, 55%, 31%)

Oklch

oklch(65.2% 0.089 75.6)

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

#D2431A

Vermilion · Chocolate · Passion Red

HEX

#D2431A

RGB

rgb(210, 67, 26)

HSL

hsl(13, 78%, 46%)

HSB

hsb(13, 88%, 82%)

CMYK

cmyk(0%, 68%, 88%, 18%)

Oklch

oklch(58.3% 0.186 35.6)

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

#1C1B20

Deep Indigo · Black · Dark Stone

HEX

#1C1B20

RGB

rgb(28, 27, 32)

HSL

hsl(252, 8%, 12%)

HSB

hsb(252, 16%, 13%)

CMYK

cmyk(12%, 16%, 0%, 87%)

Oklch

oklch(22.5% 0.010 294.8)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE8014

1471DB

Analogous

DB1B14

DE8014

D5DB14

Triadic

DE8014

14DB7E

7E14DB

Split-Comp.

DE8014

14D5DB

1B14DB

Tetradic

DE8014

14DB1B

1471DB

DB14D5

Contrast Matrix WCAG 2.1 Contrast

DE8014	3F277F	AF884F	D2431A	1C1B20
—	4.0 AA Large	1.1 Fail	1.6 Fail	5.9 AA
4.0 AA Large	—	3.6 AA Large	2.5 Fail	1.5 Fail
1.1 Fail	3.6 AA Large	—	1.4 Fail	5.3 AA
1.6 Fail	2.5 Fail	1.4 Fail	—	3.7 AA Large
5.9 AA	1.5 Fail	5.3 AA	3.7 AA Large	—

White BG

2.9Fail

11.6AAA

3.3AA Large

4.6AA

17.1AAA

Black BG

7.2AAA

1.8Fail

6.5AA

4.6AA

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B42E

35346A

9E9E5D

949324

1C1C1F

Deuteranopia

BBC234

363865

A0A360

9CA726

1C1C1F

Tritanopia

D94347

3E5955

AD686A

CB2C2D

1C1E1E

Achromatopsia

909090

383838

8D8D8D

696969

1C1C1C

Shades & Tints Shades & Tints

#DE8014

Dark

Light

#3F277F

Dark

Light

#AF884F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de8014;
  --color-2: #3f277f;
  --color-3: #af884f;
  --color-4: #d2431a;
  --color-5: #1c1b20;
}

SCSS

$color-1: #de8014;
$color-2: #3f277f;
$color-3: #af884f;
$color-4: #d2431a;
$color-5: #1c1b20;

TAILWIND

colors: {
  'brand-1': '#de8014',
  'brand-2': '#3f277f',
  'brand-3': '#af884f',
  'brand-4': '#d2431a',
  'brand-5': '#1c1b20',
}

RGB Array

[222, 128, 20], [63, 39, 127], [175, 136, 79], [210, 67, 26], [28, 27, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #DE8014, #3F277F, #AF884F, #D2431A, #1C1B20 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: #de8014; --color-2: #3f277f; --color-3: #af884f; --color-4: #d2431a; --color-5: #1c1b20. 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