← Back to Editor

#F0C777 · #DA6E3D · #B91E2E · #341620 · #0D0D19

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F0C777

Ginger · BurlyWood · Sunflower

HEX
#F0C777
RGB
rgb(240, 199, 119)
HSL
hsl(40, 80%, 70%)
HSB
hsb(40, 50%, 94%)
CMYK
cmyk(0%, 17%, 50%, 6%)
Oklch
oklch(84.9% 0.109 83.0)

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

#DA6E3D

Tangerine · Chocolate · Warm Sun

HEX
#DA6E3D
RGB
rgb(218, 110, 61)
HSL
hsl(19, 68%, 55%)
HSB
hsb(19, 72%, 85%)
CMYK
cmyk(0%, 50%, 72%, 15%)
Oklch
oklch(65.6% 0.149 43.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B91E2E

Vermilion · FireBrick · Passion Red

HEX
#B91E2E
RGB
rgb(185, 30, 46)
HSL
hsl(354, 72%, 42%)
HSB
hsb(354, 84%, 73%)
CMYK
cmyk(0%, 84%, 75%, 27%)
Oklch
oklch(50.9% 0.188 22.8)

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

#341620

Dark Violet · Black · Raspberry

HEX
#341620
RGB
rgb(52, 22, 32)
HSL
hsl(340, 41%, 15%)
HSB
hsb(340, 58%, 20%)
CMYK
cmyk(0%, 58%, 38%, 80%)
Oklch
oklch(24.8% 0.050 0.2)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#0D0D19

Deep Indigo · Black · Deep Sea Blue

HEX
#0D0D19
RGB
rgb(13, 13, 25)
HSL
hsl(240, 32%, 7%)
HSB
hsb(240, 48%, 10%)
CMYK
cmyk(48%, 48%, 0%, 90%)
Oklch
oklch(16.6% 0.025 283.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0C777
759EF0

Analogous

F08A75
F0C777
DBF075

Triadic

F0C777
75F0C7
C775F0

Split-Comp.

F0C777
75DBF0
8A75F0

Tetradic

F0C777
75F08A
759EF0
F075DB

Contrast Matrix WCAG 2.1 Contrast

F0C777
DA6E3D
B91E2E
341620
0D0D19
—
2.1
Fail
4.0
AA Large
10.3
AAA
12.1
AAA
2.1
Fail
—
1.9
Fail
4.9
AA
5.8
AA
4.0
AA Large
1.9
Fail
—
2.6
Fail
3.0
AA Large
10.3
AAA
4.9
AA
2.6
Fail
—
1.2
Fail
12.1
AAA
5.8
AA
3.0
AA Large
1.2
Fail
—
White BG
1.6Fail
3.3AA Large
6.4AA
16.4AAA
19.3AAA
Black BG
13.1AAA
6.3AA
3.3AA Large
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDE8A
ABAA49
76742A
27271E
0D0D16

Deuteranopia

E1E48F
B2BA4C
7F8B29
292B1D
0D0D15

Tritanopia

EE9A9D
D55254
B12726
331C1B
0D1413

Achromatopsia

CACACA
898989
4E4E4E
202020
0E0E0E

Shades & Tints Shades & Tints

#F0C777

Dark
Light

#DA6E3D

Dark
Light

#B91E2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0c777;
  --color-2: #da6e3d;
  --color-3: #b91e2e;
  --color-4: #341620;
  --color-5: #0d0d19;
}

SCSS

$color-1: #f0c777;
$color-2: #da6e3d;
$color-3: #b91e2e;
$color-4: #341620;
$color-5: #0d0d19;

TAILWIND

colors: {
  'brand-1': '#f0c777',
  'brand-2': '#da6e3d',
  'brand-3': '#b91e2e',
  'brand-4': '#341620',
  'brand-5': '#0d0d19',
}

RGB Array

[240, 199, 119], [218, 110, 61], [185, 30, 46], [52, 22, 32], [13, 13, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #F0C777, #DA6E3D, #B91E2E, #341620, #0D0D19 is ideal for: tech websites, dark mode UIs, game UIs, 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: #f0c777; --color-2: #da6e3d; --color-3: #b91e2e; --color-4: #341620; --color-5: #0d0d19. 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. 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