← Back to Editor

#D44922 · #DD8C16 · #E9BD02 · #8DA470 · #748165

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D44922

Vermilion · Chocolate · Passion Red

HEX
#D44922
RGB
rgb(212, 73, 34)
HSL
hsl(13, 72%, 48%)
HSB
hsb(13, 84%, 83%)
CMYK
cmyk(0%, 66%, 84%, 17%)
Oklch
oklch(59.4% 0.182 35.8)

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

#DD8C16

Ochre · GoldenRod · Amber Brown

HEX
#DD8C16
RGB
rgb(221, 140, 22)
HSL
hsl(36, 82%, 48%)
HSB
hsb(36, 90%, 87%)
CMYK
cmyk(0%, 37%, 90%, 13%)
Oklch
oklch(70.8% 0.150 68.0)

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

#E9BD02

Ochre · Orange · Honey Gold

HEX
#E9BD02
RGB
rgb(233, 189, 2)
HSL
hsl(49, 98%, 46%)
HSB
hsb(49, 99%, 91%)
CMYK
cmyk(0%, 19%, 99%, 9%)
Oklch
oklch(81.4% 0.166 91.8)

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

#8DA470

Grass Green · DarkSeaGreen · Olive Green

HEX
#8DA470
RGB
rgb(141, 164, 112)
HSL
hsl(87, 22%, 54%)
HSB
hsb(87, 32%, 64%)
CMYK
cmyk(14%, 0%, 32%, 36%)
Oklch
oklch(68.8% 0.077 127.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#748165

Grass Green · DimGray · Olive Green

HEX
#748165
RGB
rgb(116, 129, 101)
HSL
hsl(88, 12%, 45%)
HSB
hsb(88, 22%, 51%)
CMYK
cmyk(10%, 0%, 22%, 49%)
Oklch
oklch(58.5% 0.044 128.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D44922
22ACD3

Analogous

D32254
D44922
D3A122

Triadic

D44922
22D348
4822D3

Split-Comp.

D44922
22D3A1
2254D3

Tetradic

D44922
54D322
22ACD3
A122D3

Contrast Matrix WCAG 2.1 Contrast

D44922
DD8C16
E9BD02
8DA470
748165
—
1.6
Fail
2.5
Fail
1.6
Fail
1.1
Fail
1.6
Fail
—
1.5
Fail
1.0
Fail
1.5
Fail
2.5
Fail
1.5
Fail
—
1.5
Fail
2.3
Fail
1.6
Fail
1.0
Fail
1.5
Fail
—
1.5
Fail
1.1
Fail
1.5
Fail
2.3
Fail
1.5
Fail
—
White BG
4.4AA Large
2.7Fail
1.8Fail
2.7Fail
4.1AA Large
Black BG
4.8AA
7.8AAA
11.7AAA
7.7AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98972B
BAB933
D6D62F
97977D
7A7A6C

Deuteranopia

A0AA2E
BFC539
D9DC3A
969480
79786D

Tritanopia

CD3335
D9494E
E7535B
8E8789
757172

Achromatopsia

6E6E6E
979797
B5B5B5
979797
7A7A7A

Shades & Tints Shades & Tints

#D44922

Dark
Light

#DD8C16

Dark
Light

#E9BD02

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d44922;
  --color-2: #dd8c16;
  --color-3: #e9bd02;
  --color-4: #8da470;
  --color-5: #748165;
}

SCSS

$color-1: #d44922;
$color-2: #dd8c16;
$color-3: #e9bd02;
$color-4: #8da470;
$color-5: #748165;

TAILWIND

colors: {
  'brand-1': '#d44922',
  'brand-2': '#dd8c16',
  'brand-3': '#e9bd02',
  'brand-4': '#8da470',
  'brand-5': '#748165',
}

RGB Array

[212, 73, 34], [221, 140, 22], [233, 189, 2], [141, 164, 112], [116, 129, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D44922, #DD8C16, #E9BD02, #8DA470, #748165 is ideal for: corporate websites, product showcases, portfolios. 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: #d44922; --color-2: #dd8c16; --color-3: #e9bd02; --color-4: #8da470; --color-5: #748165. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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