← Back to Editor

#300A32 · #DB2500 · #FF821C · #E8AE27 · #FAF13E

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

#300A32

Royal Purple · MidnightBlue · Dark Purple

HEX
#300A32
RGB
rgb(48, 10, 50)
HSL
hsl(297, 67%, 12%)
HSB
hsb(297, 80%, 20%)
CMYK
cmyk(4%, 80%, 0%, 80%)
Oklch
oklch(23.2% 0.084 325.8)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#DB2500

Vermilion · OrangeRed · Passion Red

HEX
#DB2500
RGB
rgb(219, 37, 0)
HSL
hsl(10, 100%, 43%)
HSB
hsb(10, 100%, 86%)
CMYK
cmyk(0%, 83%, 100%, 14%)
Oklch
oklch(57.3% 0.218 31.9)

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

#FF821C

Tangerine · Orange · Warm Sun

HEX
#FF821C
RGB
rgb(255, 130, 28)
HSL
hsl(27, 100%, 55%)
HSB
hsb(27, 89%, 100%)
CMYK
cmyk(0%, 49%, 89%, 0%)
Oklch
oklch(73.6% 0.181 52.1)

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

#E8AE27

Ginger · GoldenRod · Sunflower

HEX
#E8AE27
RGB
rgb(232, 174, 39)
HSL
hsl(42, 81%, 53%)
HSB
hsb(42, 83%, 91%)
CMYK
cmyk(0%, 25%, 83%, 9%)
Oklch
oklch(78.4% 0.152 82.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FAF13E

Fresh Green · Yellow · Sunflower

HEX
#FAF13E
RGB
rgb(250, 241, 62)
HSL
hsl(57, 95%, 61%)
HSB
hsb(57, 75%, 98%)
CMYK
cmyk(0%, 4%, 75%, 2%)
Oklch
oklch(93.7% 0.184 106.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

300A32
0C330A

Analogous

1D0A33
300A32
330A21

Triadic

300A32
33310A
0A3331

Split-Comp.

300A32
21330A
0A331D

Tetradic

300A32
331D0A
0C330A
0A2133

Contrast Matrix WCAG 2.1 Contrast

300A32
DB2500
FF821C
E8AE27
FAF13E
—
3.5
AA Large
7.0
AA
8.7
AAA
14.6
AAA
3.5
AA Large
—
2.0
Fail
2.5
Fail
4.1
AA Large
7.0
AA
2.0
Fail
—
1.2
Fail
2.1
Fail
8.7
AAA
2.5
Fail
1.2
Fail
—
1.7
Fail
14.6
AAA
4.1
AA Large
2.1
Fail
1.7
Fail
—
White BG
17.3AAA
4.9AA
2.5Fail
2.0Fail
1.2Fail
Black BG
1.2Fail
4.3AA Large
8.5AAA
10.5AAA
17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

201F28
8C8B09
C9C835
CFCE48
F6F669

Deuteranopia

222526
97A40B
D0DA3B
D2D750
F7F774

Tritanopia

2E211F
D21012
F9484C
E56167
FA8C93

Achromatopsia

1A1A1A
575757
9C9C9C
B0B0B0
DFDFDF

Shades & Tints Shades & Tints

#300A32

Dark
Light

#DB2500

Dark
Light

#FF821C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #300a32;
  --color-2: #db2500;
  --color-3: #ff821c;
  --color-4: #e8ae27;
  --color-5: #faf13e;
}

SCSS

$color-1: #300a32;
$color-2: #db2500;
$color-3: #ff821c;
$color-4: #e8ae27;
$color-5: #faf13e;

TAILWIND

colors: {
  'brand-1': '#300a32',
  'brand-2': '#db2500',
  'brand-3': '#ff821c',
  'brand-4': '#e8ae27',
  'brand-5': '#faf13e',
}

RGB Array

[48, 10, 50], [219, 37, 0], [255, 130, 28], [232, 174, 39], [250, 241, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #300A32, #DB2500, #FF821C, #E8AE27, #FAF13E 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: #300a32; --color-2: #db2500; --color-3: #ff821c; --color-4: #e8ae27; --color-5: #faf13e. 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