← Back to Editor

#331D23 · #DE264B · #F57F5B · #F8BE4A · #4E8079

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

#331D23

Dark Violet · DarkSlateGray · Raspberry

HEX
#331D23
RGB
rgb(51, 29, 35)
HSL
hsl(344, 28%, 16%)
HSB
hsb(344, 43%, 20%)
CMYK
cmyk(0%, 43%, 31%, 80%)
Oklch
oklch(26.2% 0.036 2.1)

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

#DE264B

Vermilion · Crimson · Passion Red

HEX
#DE264B
RGB
rgb(222, 38, 75)
HSL
hsl(348, 74%, 51%)
HSB
hsb(348, 83%, 87%)
CMYK
cmyk(0%, 83%, 66%, 13%)
Oklch
oklch(58.6% 0.214 17.2)

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

#F57F5B

Peach Pink · Coral · Coral Red

HEX
#F57F5B
RGB
rgb(245, 127, 91)
HSL
hsl(14, 89%, 66%)
HSB
hsb(14, 63%, 96%)
CMYK
cmyk(0%, 48%, 63%, 4%)
Oklch
oklch(72.3% 0.153 37.7)

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

#F8BE4A

Ginger · SandyBrown · Sunflower

HEX
#F8BE4A
RGB
rgb(248, 190, 74)
HSL
hsl(40, 93%, 63%)
HSB
hsb(40, 70%, 97%)
CMYK
cmyk(0%, 23%, 70%, 3%)
Oklch
oklch(83.4% 0.145 81.4)

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

#4E8079

Mineral Blue · DimGray · Mint Ice

HEX
#4E8079
RGB
rgb(78, 128, 121)
HSL
hsl(172, 24%, 40%)
HSB
hsb(172, 39%, 50%)
CMYK
cmyk(39%, 0%, 5%, 50%)
Oklch
oklch(56.2% 0.055 184.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

331D23
1D342E

Analogous

341D2F
331D23
34231D

Triadic

331D23
23341D
1D2334

Split-Comp.

331D23
1D3423
1D2F34

Tetradic

331D23
2F341D
1D342E
231D34

Contrast Matrix WCAG 2.1 Contrast

331D23
DE264B
F57F5B
F8BE4A
4E8079
—
3.3
AA Large
6.0
AA
9.3
AAA
3.5
AA Large
3.3
AA Large
—
1.8
Fail
2.8
Fail
1.0
Fail
6.0
AA
1.8
Fail
—
1.5
Fail
1.7
Fail
9.3
AAA
2.8
Fail
1.5
Fail
—
2.7
Fail
3.5
AA Large
1.0
Fail
1.7
Fail
2.7
Fail
—
White BG
15.7AAA
4.7AA
2.6Fail
1.7Fail
4.5AA Large
Black BG
1.3Fail
4.5AA Large
8.1AAA
12.5AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292922
8E8D42
C2C164
DFDE66
64647B

Deuteranopia

2B2C21
99A740
C9D266
E2E76D
615D7B

Tritanopia

322020
D53B39
EF6B6C
F57C81
517C7C

Achromatopsia

242424
616161
9E9E9E
C2C2C2
707070

Shades & Tints Shades & Tints

#331D23

Dark
Light

#DE264B

Dark
Light

#F57F5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #331d23;
  --color-2: #de264b;
  --color-3: #f57f5b;
  --color-4: #f8be4a;
  --color-5: #4e8079;
}

SCSS

$color-1: #331d23;
$color-2: #de264b;
$color-3: #f57f5b;
$color-4: #f8be4a;
$color-5: #4e8079;

TAILWIND

colors: {
  'brand-1': '#331d23',
  'brand-2': '#de264b',
  'brand-3': '#f57f5b',
  'brand-4': '#f8be4a',
  'brand-5': '#4e8079',
}

RGB Array

[51, 29, 35], [222, 38, 75], [245, 127, 91], [248, 190, 74], [78, 128, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #331D23, #DE264B, #F57F5B, #F8BE4A, #4E8079 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: #331d23; --color-2: #de264b; --color-3: #f57f5b; --color-4: #f8be4a; --color-5: #4e8079. 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