← Back to Editor

#F2B741 · #DE5C1B · #8C1C32 · #4A103C · #2A0F38

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F2B741

Ginger · SandyBrown · Sunflower

HEX
#F2B741
RGB
rgb(242, 183, 65)
HSL
hsl(40, 87%, 60%)
HSB
hsb(40, 73%, 95%)
CMYK
cmyk(0%, 24%, 73%, 5%)
Oklch
oklch(81.4% 0.146 80.9)

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

#DE5C1B

Tangerine · Chocolate · Amber Brown

HEX
#DE5C1B
RGB
rgb(222, 92, 27)
HSL
hsl(20, 78%, 49%)
HSB
hsb(20, 88%, 87%)
CMYK
cmyk(0%, 59%, 88%, 13%)
Oklch
oklch(63.3% 0.177 42.5)

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

#8C1C32

Vermilion · Brown · Wine Red

HEX
#8C1C32
RGB
rgb(140, 28, 50)
HSL
hsl(348, 67%, 33%)
HSB
hsb(348, 80%, 55%)
CMYK
cmyk(0%, 80%, 64%, 45%)
Oklch
oklch(42.3% 0.146 15.7)

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

#4A103C

Rose Purple · DarkSlateGray · Dark Purple

HEX
#4A103C
RGB
rgb(74, 16, 60)
HSL
hsl(314, 64%, 18%)
HSB
hsb(314, 78%, 29%)
CMYK
cmyk(0%, 78%, 19%, 71%)
Oklch
oklch(29.2% 0.102 339.2)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#2A0F38

Royal Purple · MidnightBlue · Dark Purple

HEX
#2A0F38
RGB
rgb(42, 15, 56)
HSL
hsl(280, 58%, 14%)
HSB
hsb(280, 73%, 22%)
CMYK
cmyk(25%, 73%, 0%, 78%)
Oklch
oklch(23.3% 0.080 312.2)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2B741
407BF2

Analogous

F25E40
F2B741
D4F240

Triadic

F2B741
40F2B7
B740F2

Split-Comp.

F2B741
40D4F2
5E40F2

Tetradic

F2B741
40F25E
407BF2
F240D4

Contrast Matrix WCAG 2.1 Contrast

F2B741
DE5C1B
8C1C32
4A103C
2A0F38
—
2.1
Fail
5.0
AA
8.1
AAA
9.5
AAA
2.1
Fail
—
2.4
Fail
4.0
AA Large
4.6
AA
5.0
AA
2.4
Fail
—
1.6
Fail
1.9
Fail
8.1
AAA
4.0
AA Large
1.6
Fail
—
1.2
Fail
9.5
AAA
4.6
AA
1.9
Fail
1.2
Fail
—
White BG
1.8Fail
3.7AA Large
9.0AAA
14.7AAA
17.2AAA
Black BG
11.6AAA
5.7AA
2.3Fail
1.4Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D85E
A6A52B
5C5A2D
313031
1E1E2E

Deuteranopia

DCE064
ADB72F
626A2B
34392F
20222C

Tritanopia

EF7479
D7373A
862828
472927
292625

Achromatopsia

BBBBBB
7B7B7B
404040
262626
1C1C1C

Shades & Tints Shades & Tints

#F2B741

Dark
Light

#DE5C1B

Dark
Light

#8C1C32

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2b741;
  --color-2: #de5c1b;
  --color-3: #8c1c32;
  --color-4: #4a103c;
  --color-5: #2a0f38;
}

SCSS

$color-1: #f2b741;
$color-2: #de5c1b;
$color-3: #8c1c32;
$color-4: #4a103c;
$color-5: #2a0f38;

TAILWIND

colors: {
  'brand-1': '#f2b741',
  'brand-2': '#de5c1b',
  'brand-3': '#8c1c32',
  'brand-4': '#4a103c',
  'brand-5': '#2a0f38',
}

RGB Array

[242, 183, 65], [222, 92, 27], [140, 28, 50], [74, 16, 60], [42, 15, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #F2B741, #DE5C1B, #8C1C32, #4A103C, #2A0F38 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2b741; --color-2: #de5c1b; --color-3: #8c1c32; --color-4: #4a103c; --color-5: #2a0f38. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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