← Back to Editor

#DB4620 · #D47259 · #CFBA83 · #A8A184 · #777469

dark

A 5-color dark 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

#DB4620

Vermilion · Chocolate · Passion Red

HEX
#DB4620
RGB
rgb(219, 70, 32)
HSL
hsl(12, 75%, 49%)
HSB
hsb(12, 85%, 86%)
CMYK
cmyk(0%, 68%, 85%, 14%)
Oklch
oklch(60.2% 0.192 34.8)

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

#D47259

Crimson · Coral · Passion Red

HEX
#D47259
RGB
rgb(212, 114, 89)
HSL
hsl(12, 59%, 59%)
HSB
hsb(12, 58%, 83%)
CMYK
cmyk(0%, 46%, 58%, 17%)
Oklch
oklch(65.8% 0.129 35.3)

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

#CFBA83

Ginger · Tan · Sunflower

HEX
#CFBA83
RGB
rgb(207, 186, 131)
HSL
hsl(43, 44%, 66%)
HSB
hsb(43, 37%, 81%)
CMYK
cmyk(0%, 10%, 37%, 19%)
Oklch
oklch(79.4% 0.076 89.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#A8A184

Ginger · DarkGray · Sunflower

HEX
#A8A184
RGB
rgb(168, 161, 132)
HSL
hsl(48, 17%, 59%)
HSB
hsb(48, 21%, 66%)
CMYK
cmyk(0%, 4%, 21%, 34%)
Oklch
oklch(70.7% 0.041 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#777469

Ink Gray · DimGray · Warm Gray

HEX
#777469
RGB
rgb(119, 116, 105)
HSL
hsl(47, 6%, 44%)
HSB
hsb(47, 12%, 47%)
CMYK
cmyk(0%, 3%, 12%, 53%)
Oklch
oklch(55.8% 0.017 94.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB4620
1FB5DB

Analogous

DB1F57
DB4620
DBA21F

Triadic

DB4620
1FDB45
451FDB

Split-Comp.

DB4620
1FDBA2
1F57DB

Tetradic

DB4620
57DB1F
1FB5DB
A21FDB

Contrast Matrix WCAG 2.1 Contrast

DB4620
D47259
CFBA83
A8A184
777469
—
1.3
Fail
2.2
Fail
1.6
Fail
1.1
Fail
1.3
Fail
—
1.7
Fail
1.3
Fail
1.4
Fail
2.2
Fail
1.7
Fail
—
1.4
Fail
2.5
Fail
1.6
Fail
1.3
Fail
1.4
Fail
—
1.8
Fail
1.1
Fail
1.4
Fail
2.5
Fail
1.8
Fail
—
White BG
4.3AA Large
3.3AA Large
1.9Fail
2.6Fail
4.7AA
Black BG
4.9AA
6.4AA
11.0AAA
8.1AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9929
AAA95F
C6C690
A5A58B
76766C

Deuteranopia

A3AE2B
AFB761
C7C994
A5A68D
76766C

Tritanopia

D43032
CF6465
CE9B9D
A89192
776E6E

Achromatopsia

6E6E6E
8C8C8C
BABABA
A0A0A0
747474

Shades & Tints Shades & Tints

#DB4620

Dark
Light

#D47259

Dark
Light

#CFBA83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db4620;
  --color-2: #d47259;
  --color-3: #cfba83;
  --color-4: #a8a184;
  --color-5: #777469;
}

SCSS

$color-1: #db4620;
$color-2: #d47259;
$color-3: #cfba83;
$color-4: #a8a184;
$color-5: #777469;

TAILWIND

colors: {
  'brand-1': '#db4620',
  'brand-2': '#d47259',
  'brand-3': '#cfba83',
  'brand-4': '#a8a184',
  'brand-5': '#777469',
}

RGB Array

[219, 70, 32], [212, 114, 89], [207, 186, 131], [168, 161, 132], [119, 116, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #DB4620, #D47259, #CFBA83, #A8A184, #777469 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: #db4620; --color-2: #d47259; --color-3: #cfba83; --color-4: #a8a184; --color-5: #777469. 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 dark-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