← Back to Editor

#22282E · #FF003C · #FF4D00 · #D9C300 · #D3DFEB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#22282E

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#22282E
RGB
rgb(34, 40, 46)
HSL
hsl(210, 15%, 16%)
HSB
hsb(210, 26%, 18%)
CMYK
cmyk(26%, 13%, 0%, 82%)
Oklch
oklch(27.3% 0.014 248.3)

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

#FF003C

Vermilion · Crimson · Passion Red

HEX
#FF003C
RGB
rgb(255, 0, 60)
HSL
hsl(346, 100%, 50%)
HSB
hsb(346, 100%, 100%)
CMYK
cmyk(0%, 100%, 76%, 0%)
Oklch
oklch(63.2% 0.254 21.8)

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

#FF4D00

Tangerine · OrangeRed · Amber Brown

HEX
#FF4D00
RGB
rgb(255, 77, 0)
HSL
hsl(18, 100%, 50%)
HSB
hsb(18, 100%, 100%)
CMYK
cmyk(0%, 70%, 100%, 0%)
Oklch
oklch(66.8% 0.224 37.0)

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

#D9C300

Autumn Sage · Gold · Honey Gold

HEX
#D9C300
RGB
rgb(217, 195, 0)
HSL
hsl(54, 100%, 43%)
HSB
hsb(54, 100%, 85%)
CMYK
cmyk(0%, 10%, 100%, 15%)
Oklch
oklch(81.1% 0.169 101.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D3DFEB

Azure · Lavender · Sky Blue

HEX
#D3DFEB
RGB
rgb(211, 223, 235)
HSL
hsl(210, 37%, 87%)
HSB
hsb(210, 10%, 92%)
CMYK
cmyk(10%, 5%, 0%, 8%)
Oklch
oklch(89.8% 0.021 248.1)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22282E
2F2923

Analogous

232F2F
22282E
23232F

Triadic

22282E
2F2329
292F23

Split-Comp.

22282E
2F2323
2F2F23

Tetradic

22282E
2F232F
2F2923
232F23

Contrast Matrix WCAG 2.1 Contrast

22282E
FF003C
FF4D00
D9C300
D3DFEB
—
3.8
AA Large
4.5
AA Large
8.3
AAA
11.0
AAA
3.8
AA Large
—
1.2
Fail
2.2
Fail
2.9
Fail
4.5
AA Large
1.2
Fail
—
1.9
Fail
2.5
Fail
8.3
AAA
2.2
Fail
1.9
Fail
—
1.3
Fail
11.0
AAA
2.9
Fail
2.5
Fail
1.3
Fail
—
White BG
14.9AAA
3.9AA Large
3.3AA Large
1.8Fail
1.4Fail
Black BG
1.4Fail
5.3AA
6.3AA
11.8AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

25252D
918E2D
B2B013
CFCF2F
D8D8E8

Deuteranopia

24242C
9FB32A
BCCA17
D1D23B
D8D7E7

Tritanopia

222B2B
F22220
F62125
D8545D
D4E6E5

Achromatopsia

272727
535353
797979
B3B3B3
DDDDDD

Shades & Tints Shades & Tints

#22282E

Dark
Light

#FF003C

Dark
Light

#FF4D00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22282e;
  --color-2: #ff003c;
  --color-3: #ff4d00;
  --color-4: #d9c300;
  --color-5: #d3dfeb;
}

SCSS

$color-1: #22282e;
$color-2: #ff003c;
$color-3: #ff4d00;
$color-4: #d9c300;
$color-5: #d3dfeb;

TAILWIND

colors: {
  'brand-1': '#22282e',
  'brand-2': '#ff003c',
  'brand-3': '#ff4d00',
  'brand-4': '#d9c300',
  'brand-5': '#d3dfeb',
}

RGB Array

[34, 40, 46], [255, 0, 60], [255, 77, 0], [217, 195, 0], [211, 223, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22282E, #FF003C, #FF4D00, #D9C300, #D3DFEB 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: #22282e; --color-2: #ff003c; --color-3: #ff4d00; --color-4: #d9c300; --color-5: #d3dfeb. 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 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