← Back to Editor

#CC4F00 · #DDC16D · #F0E4BE · #F0546A · #82576B

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

#CC4F00

Tangerine · Chocolate · Amber Brown

HEX
#CC4F00
RGB
rgb(204, 79, 0)
HSL
hsl(23, 100%, 40%)
HSB
hsb(23, 100%, 80%)
CMYK
cmyk(0%, 61%, 100%, 20%)
Oklch
oklch(58.7% 0.173 43.1)

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

#DDC16D

Ginger · BurlyWood · Sunflower

HEX
#DDC16D
RGB
rgb(221, 193, 109)
HSL
hsl(45, 62%, 65%)
HSB
hsb(45, 51%, 87%)
CMYK
cmyk(0%, 13%, 51%, 13%)
Oklch
oklch(81.7% 0.109 91.4)

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

#F0E4BE

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E4BE
RGB
rgb(240, 228, 190)
HSL
hsl(46, 62%, 84%)
HSB
hsb(46, 21%, 94%)
CMYK
cmyk(0%, 5%, 21%, 6%)
Oklch
oklch(91.9% 0.051 92.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F0546A

Peach Pink · Tomato · Coral Red

HEX
#F0546A
RGB
rgb(240, 84, 106)
HSL
hsl(352, 84%, 64%)
HSB
hsb(352, 65%, 94%)
CMYK
cmyk(0%, 65%, 56%, 6%)
Oklch
oklch(66.1% 0.191 15.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#82576B

Dark Violet · DimGray · Camellia

HEX
#82576B
RGB
rgb(130, 87, 107)
HSL
hsl(332, 20%, 43%)
HSB
hsb(332, 33%, 51%)
CMYK
cmyk(0%, 33%, 18%, 49%)
Oklch
oklch(51.0% 0.063 350.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC4F00
007ECC

Analogous

CC0018
CC4F00
CCB400

Triadic

CC4F00
00CC4E
4E00CC

Split-Comp.

CC4F00
00CCB4
0018CC

Tetradic

CC4F00
18CC00
007ECC
B400CC

Contrast Matrix WCAG 2.1 Contrast

CC4F00
DDC16D
F0E4BE
F0546A
82576B
—
2.5
Fail
3.5
AA Large
1.3
Fail
1.3
Fail
2.5
Fail
—
1.4
Fail
1.9
Fail
3.4
AA Large
3.5
AA Large
1.4
Fail
—
2.7
Fail
4.7
AA
1.3
Fail
1.9
Fail
2.7
Fail
—
1.8
Fail
1.3
Fail
3.4
AA Large
4.7
AA
1.8
Fail
—
White BG
4.5AA Large
1.8Fail
1.3Fail
3.4AA Large
6.0AA
Black BG
4.7AA
11.9AAA
16.5AAA
6.2AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

969513
D1D181
EBEBC7
ACAB65
6F6F66

Deuteranopia

9DA618
D3D586
ECECC9
B6C163
727565

Tritanopia

C62226
DC9195
EFCED0
E86060
806262

Achromatopsia

6B6B6B
C0C0C0
E3E3E3
858585
666666

Shades & Tints Shades & Tints

#CC4F00

Dark
Light

#DDC16D

Dark
Light

#F0E4BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc4f00;
  --color-2: #ddc16d;
  --color-3: #f0e4be;
  --color-4: #f0546a;
  --color-5: #82576b;
}

SCSS

$color-1: #cc4f00;
$color-2: #ddc16d;
$color-3: #f0e4be;
$color-4: #f0546a;
$color-5: #82576b;

TAILWIND

colors: {
  'brand-1': '#cc4f00',
  'brand-2': '#ddc16d',
  'brand-3': '#f0e4be',
  'brand-4': '#f0546a',
  'brand-5': '#82576b',
}

RGB Array

[204, 79, 0], [221, 193, 109], [240, 228, 190], [240, 84, 106], [130, 87, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #CC4F00, #DDC16D, #F0E4BE, #F0546A, #82576B is ideal for: social media posters, mobile apps, e-commerce promos, 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: #cc4f00; --color-2: #ddc16d; --color-3: #f0e4be; --color-4: #f0546a; --color-5: #82576b. 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 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