← Back to Editor

#DF8D67 · #663538 · #F9CA82 · #4C3D5A · #D39995

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 LibraryData Visualization

Color Details Color Details

#DF8D67

Apricot · DarkSalmon · Warm Sun

HEX
#DF8D67
RGB
rgb(223, 141, 103)
HSL
hsl(19, 65%, 64%)
HSB
hsb(19, 54%, 87%)
CMYK
cmyk(0%, 37%, 54%, 13%)
Oklch
oklch(72.0% 0.113 45.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#663538

Crimson · DarkOliveGreen · Wine Red

HEX
#663538
RGB
rgb(102, 53, 56)
HSL
hsl(356, 32%, 30%)
HSB
hsb(356, 48%, 40%)
CMYK
cmyk(0%, 48%, 45%, 60%)
Oklch
oklch(39.2% 0.070 16.9)

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

#F9CA82

Goose Yellow · Khaki · Warm Sun

HEX
#F9CA82
RGB
rgb(249, 202, 130)
HSL
hsl(36, 91%, 74%)
HSB
hsb(36, 48%, 98%)
CMYK
cmyk(0%, 19%, 48%, 2%)
Oklch
oklch(86.5% 0.104 77.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#4C3D5A

Dark Plum · DarkSlateGray · Eggplant

HEX
#4C3D5A
RGB
rgb(76, 61, 90)
HSL
hsl(271, 19%, 30%)
HSB
hsb(271, 32%, 35%)
CMYK
cmyk(16%, 32%, 0%, 65%)
Oklch
oklch(38.8% 0.052 307.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#D39995

Peach Pink · Tan · Coral Red

HEX
#D39995
RGB
rgb(211, 153, 149)
HSL
hsl(4, 41%, 71%)
HSB
hsb(4, 29%, 83%)
CMYK
cmyk(0%, 27%, 29%, 17%)
Oklch
oklch(73.7% 0.070 23.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF8D67
68B9DF

Analogous

DF687D
DF8D67
DFC968

Triadic

DF8D67
68DF8D
8D68DF

Split-Comp.

DF8D67
68DFC9
687DDF

Tetradic

DF8D67
7DDF68
68B9DF
C968DF

Contrast Matrix WCAG 2.1 Contrast

DF8D67
663538
F9CA82
4C3D5A
D39995
—
3.8
AA Large
1.7
Fail
3.8
AA Large
1.1
Fail
3.8
AA Large
—
6.5
AA
1.0
Fail
4.1
AA Large
1.7
Fail
6.5
AA
—
6.5
AA
1.6
Fail
3.8
AA Large
1.0
Fail
6.5
AA
—
4.1
AA Large
1.1
Fail
4.1
AA Large
1.6
Fail
4.1
AA Large
—
White BG
2.6Fail
9.9AAA
1.5Fail
9.9AAA
2.4Fail
Black BG
8.1AAA
2.1Fail
13.8AAA
2.1Fail
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBB70
515037
E5E493
464553
BAB996

Deuteranopia

C0C672
545737
E7EB98
464851
BDC296

Tritanopia

DB7779
643737
F7A1A4
4B4D4C
D09797

Achromatopsia

A1A1A1
444444
D0D0D0
454545
AAAAAA

Shades & Tints Shades & Tints

#DF8D67

Dark
Light

#663538

Dark
Light

#F9CA82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df8d67;
  --color-2: #663538;
  --color-3: #f9ca82;
  --color-4: #4c3d5a;
  --color-5: #d39995;
}

SCSS

$color-1: #df8d67;
$color-2: #663538;
$color-3: #f9ca82;
$color-4: #4c3d5a;
$color-5: #d39995;

TAILWIND

colors: {
  'brand-1': '#df8d67',
  'brand-2': '#663538',
  'brand-3': '#f9ca82',
  'brand-4': '#4c3d5a',
  'brand-5': '#d39995',
}

RGB Array

[223, 141, 103], [102, 53, 56], [249, 202, 130], [76, 61, 90], [211, 153, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #DF8D67, #663538, #F9CA82, #4C3D5A, #D39995 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #df8d67; --color-2: #663538; --color-3: #f9ca82; --color-4: #4c3d5a; --color-5: #d39995. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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