← Back to Editor

#ED931B · #F5A721 · #E75919 · #DE3B00 · #333B2C

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 App

Color Details Color Details

#ED931B

Ginger · GoldenRod · Warm Sun

HEX
#ED931B
RGB
rgb(237, 147, 27)
HSL
hsl(34, 85%, 52%)
HSB
hsb(34, 89%, 93%)
CMYK
cmyk(0%, 38%, 89%, 7%)
Oklch
oklch(74.0% 0.159 65.8)

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

#F5A721

Ginger · GoldenRod · Warm Sun

HEX
#F5A721
RGB
rgb(245, 167, 33)
HSL
hsl(38, 91%, 55%)
HSB
hsb(38, 87%, 96%)
CMYK
cmyk(0%, 32%, 87%, 4%)
Oklch
oklch(78.5% 0.159 73.7)

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

#E75919

Tangerine · Chocolate · Amber Brown

HEX
#E75919
RGB
rgb(231, 89, 25)
HSL
hsl(19, 81%, 50%)
HSB
hsb(19, 89%, 91%)
CMYK
cmyk(0%, 61%, 89%, 9%)
Oklch
oklch(64.3% 0.189 40.5)

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

#DE3B00

Tangerine · OrangeRed · Amber Brown

HEX
#DE3B00
RGB
rgb(222, 59, 0)
HSL
hsl(16, 100%, 44%)
HSB
hsb(16, 100%, 87%)
CMYK
cmyk(0%, 73%, 100%, 13%)
Oklch
oklch(59.5% 0.206 35.4)

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

#333B2C

Celadon · DarkSlateGray · Dark Green

HEX
#333B2C
RGB
rgb(51, 59, 44)
HSL
hsl(92, 15%, 20%)
HSB
hsb(92, 25%, 23%)
CMYK
cmyk(14%, 0%, 25%, 77%)
Oklch
oklch(34.0% 0.028 130.6)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED931B
1D77ED

Analogous

ED2A1D
ED931B
DFED1D

Triadic

ED931B
1DED92
921DED

Split-Comp.

ED931B
1DDFED
2A1DED

Tetradic

ED931B
1DED2A
1D77ED
ED1DDF

Contrast Matrix WCAG 2.1 Contrast

ED931B
F5A721
E75919
DE3B00
333B2C
—
1.2
Fail
1.5
Fail
1.9
Fail
4.9
AA
1.2
Fail
—
1.8
Fail
2.2
Fail
5.8
AA
1.5
Fail
1.8
Fail
—
1.2
Fail
3.2
AA Large
1.9
Fail
2.2
Fail
1.2
Fail
—
2.6
Fail
4.9
AA
5.8
AA
3.2
AA Large
2.6
Fail
—
White BG
2.4Fail
2.0Fail
3.6AA Large
4.4AA Large
11.6AAA
Black BG
8.8AAA
10.4AAA
5.8AA
4.7AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C538
D3D341
AAA828
97960E
363730

Deuteranopia

CBD23F
D8DE49
B2BC2C
A1AD12
363531

Tritanopia

E84F54
F15B61
E03537
D61A1C
333233

Achromatopsia

A0A0A0
AFAFAF
7C7C7C
656565
373737

Shades & Tints Shades & Tints

#ED931B

Dark
Light

#F5A721

Dark
Light

#E75919

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed931b;
  --color-2: #f5a721;
  --color-3: #e75919;
  --color-4: #de3b00;
  --color-5: #333b2c;
}

SCSS

$color-1: #ed931b;
$color-2: #f5a721;
$color-3: #e75919;
$color-4: #de3b00;
$color-5: #333b2c;

TAILWIND

colors: {
  'brand-1': '#ed931b',
  'brand-2': '#f5a721',
  'brand-3': '#e75919',
  'brand-4': '#de3b00',
  'brand-5': '#333b2c',
}

RGB Array

[237, 147, 27], [245, 167, 33], [231, 89, 25], [222, 59, 0], [51, 59, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED931B, #F5A721, #E75919, #DE3B00, #333B2C is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #ed931b; --color-2: #f5a721; --color-3: #e75919; --color-4: #de3b00; --color-5: #333b2c. 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. 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