← Back to Editor

#DCC289 · #050706 · #550D1B · #D30E2C · #F11F44

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

#DCC289

Ginger · BurlyWood · Sunflower

HEX
#DCC289
RGB
rgb(220, 194, 137)
HSL
hsl(41, 54%, 70%)
HSB
hsb(41, 38%, 86%)
CMYK
cmyk(0%, 12%, 38%, 14%)
Oklch
oklch(82.3% 0.080 86.1)

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

#050706

Mineral Blue · Black · Dark Green

HEX
#050706
RGB
rgb(5, 7, 6)
HSL
hsl(150, 17%, 2%)
HSB
hsb(150, 29%, 3%)
CMYK
cmyk(29%, 0%, 14%, 97%)
Oklch
oklch(12.5% 0.005 165.2)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#550D1B

Vermilion · Maroon · Deep Berry

HEX
#550D1B
RGB
rgb(85, 13, 27)
HSL
hsl(348, 73%, 19%)
HSB
hsb(348, 85%, 33%)
CMYK
cmyk(0%, 85%, 68%, 67%)
Oklch
oklch(29.7% 0.103 15.8)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#D30E2C

Vermilion · Crimson · Passion Red

HEX
#D30E2C
RGB
rgb(211, 14, 44)
HSL
hsl(351, 88%, 44%)
HSB
hsb(351, 93%, 83%)
CMYK
cmyk(0%, 93%, 79%, 17%)
Oklch
oklch(55.0% 0.217 23.4)

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

#F11F44

Vermilion · Crimson · Passion Red

HEX
#F11F44
RGB
rgb(241, 31, 68)
HSL
hsl(349, 88%, 53%)
HSB
hsb(349, 87%, 95%)
CMYK
cmyk(0%, 87%, 72%, 5%)
Oklch
oklch(61.5% 0.234 20.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCC289
89A3DC

Analogous

DC9889
DCC289
CDDC89

Triadic

DCC289
89DCC2
C289DC

Split-Comp.

DCC289
89CDDC
9889DC

Tetradic

DCC289
89DC98
89A3DC
DC89CD

Contrast Matrix WCAG 2.1 Contrast

DCC289
050706
550D1B
D30E2C
F11F44
—
11.7
AAA
8.3
AAA
3.1
AA Large
2.4
Fail
11.7
AAA
—
1.4
Fail
3.7
AA Large
4.8
AA
8.3
AAA
1.4
Fail
—
2.7
Fail
3.4
AA Large
3.1
AA Large
3.7
AA Large
2.7
Fail
—
1.3
Fail
2.4
Fail
4.8
AA
3.4
AA Large
1.3
Fail
—
White BG
1.7Fail
20.2AAA
14.4AAA
5.4AA
4.2AA Large
Black BG
12.1AAA
1.0Fail
1.5Fail
3.9AA Large
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D197
060606
363518
7E7C25
96943B

Deuteranopia

D2D49A
060606
3A3F17
899823
A2B239

Tritanopia

DBA2A4
050606
511514
C91F1E
E73432

Achromatopsia

C3C3C3
060606
242424
4C4C4C
626262

Shades & Tints Shades & Tints

#DCC289

Dark
Light

#050706

Dark
Light

#550D1B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcc289;
  --color-2: #050706;
  --color-3: #550d1b;
  --color-4: #d30e2c;
  --color-5: #f11f44;
}

SCSS

$color-1: #dcc289;
$color-2: #050706;
$color-3: #550d1b;
$color-4: #d30e2c;
$color-5: #f11f44;

TAILWIND

colors: {
  'brand-1': '#dcc289',
  'brand-2': '#050706',
  'brand-3': '#550d1b',
  'brand-4': '#d30e2c',
  'brand-5': '#f11f44',
}

RGB Array

[220, 194, 137], [5, 7, 6], [85, 13, 27], [211, 14, 44], [241, 31, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCC289, #050706, #550D1B, #D30E2C, #F11F44 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: #dcc289; --color-2: #050706; --color-3: #550d1b; --color-4: #d30e2c; --color-5: #f11f44. 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 general-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