← Back to Editor

#283135 · #E1063C · #F14E46 · #FC8C19 · #D8C731

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

#283135

Slate Blue · DarkSlateGray · Peacock Green

HEX
#283135
RGB
rgb(40, 49, 53)
HSL
hsl(198, 14%, 18%)
HSB
hsb(198, 25%, 21%)
CMYK
cmyk(25%, 8%, 0%, 79%)
Oklch
oklch(30.6% 0.014 226.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#E1063C

Vermilion · Crimson · Passion Red

HEX
#E1063C
RGB
rgb(225, 6, 60)
HSL
hsl(345, 95%, 45%)
HSB
hsb(345, 97%, 88%)
CMYK
cmyk(0%, 97%, 73%, 12%)
Oklch
oklch(57.7% 0.230 19.8)

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

#F14E46

Peach Pink · Tomato · Coral Red

HEX
#F14E46
RGB
rgb(241, 78, 70)
HSL
hsl(3, 86%, 61%)
HSB
hsb(3, 71%, 95%)
CMYK
cmyk(0%, 68%, 71%, 5%)
Oklch
oklch(65.0% 0.201 27.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FC8C19

Ginger · Orange · Warm Sun

HEX
#FC8C19
RGB
rgb(252, 140, 25)
HSL
hsl(30, 97%, 54%)
HSB
hsb(30, 90%, 99%)
CMYK
cmyk(0%, 44%, 90%, 1%)
Oklch
oklch(74.7% 0.173 57.7)

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

#D8C731

Autumn Sage · GoldenRod · Sunflower

HEX
#D8C731
RGB
rgb(216, 199, 49)
HSL
hsl(54, 68%, 52%)
HSB
hsb(54, 77%, 85%)
CMYK
cmyk(0%, 8%, 77%, 15%)
Oklch
oklch(81.9% 0.159 102.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

283135
342B27

Analogous

273432
283135
272A34

Triadic

283135
342730
303427

Split-Comp.

283135
34272A
343227

Tetradic

283135
322734
342B27
2A3427

Contrast Matrix WCAG 2.1 Contrast

283135
E1063C
F14E46
FC8C19
D8C731
—
2.7
Fail
3.7
AA Large
5.6
AA
7.7
AAA
2.7
Fail
—
1.4
Fail
2.1
Fail
2.8
Fail
3.7
AA Large
1.4
Fail
—
1.5
Fail
2.1
Fail
5.6
AA
2.1
Fail
1.5
Fail
—
1.4
Fail
7.7
AAA
2.8
Fail
2.1
Fail
1.4
Fail
—
White BG
13.3AAA
4.9AA
3.5AA Large
2.4Fail
1.7Fail
Black BG
1.6Fail
4.3AA Large
5.9AA
8.9AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C34
82802F
AAA948
CCCA35
D1D055

Deuteranopia

2B2B34
8F9F2C
B4C048
D2DA3C
D2D35E

Tritanopia

283333
D62522
E9494A
F64B50
D77278

Achromatopsia

2F2F2F
4E4E4E
7E7E7E
A0A0A0
BBBBBB

Shades & Tints Shades & Tints

#283135

Dark
Light

#E1063C

Dark
Light

#F14E46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #283135;
  --color-2: #e1063c;
  --color-3: #f14e46;
  --color-4: #fc8c19;
  --color-5: #d8c731;
}

SCSS

$color-1: #283135;
$color-2: #e1063c;
$color-3: #f14e46;
$color-4: #fc8c19;
$color-5: #d8c731;

TAILWIND

colors: {
  'brand-1': '#283135',
  'brand-2': '#e1063c',
  'brand-3': '#f14e46',
  'brand-4': '#fc8c19',
  'brand-5': '#d8c731',
}

RGB Array

[40, 49, 53], [225, 6, 60], [241, 78, 70], [252, 140, 25], [216, 199, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #283135, #E1063C, #F14E46, #FC8C19, #D8C731 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: #283135; --color-2: #e1063c; --color-3: #f14e46; --color-4: #fc8c19; --color-5: #d8c731. 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