← Back to Editor

#99A5FF · #DE8E1F · #FF7878 · #D10808 · #631978

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

#99A5FF

Azure · LightSkyBlue · Cobalt Blue

HEX
#99A5FF
RGB
rgb(153, 165, 255)
HSL
hsl(233, 100%, 80%)
HSB
hsb(233, 40%, 100%)
CMYK
cmyk(40%, 35%, 0%, 0%)
Oklch
oklch(74.9% 0.130 277.0)

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

#DE8E1F

Ochre · GoldenRod · Amber Brown

HEX
#DE8E1F
RGB
rgb(222, 142, 31)
HSL
hsl(35, 75%, 50%)
HSB
hsb(35, 86%, 87%)
CMYK
cmyk(0%, 36%, 86%, 13%)
Oklch
oklch(71.3% 0.148 67.9)

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

#FF7878

Peach Pink · Salmon · Coral Red

HEX
#FF7878
RGB
rgb(255, 120, 120)
HSL
hsl(0, 100%, 74%)
HSB
hsb(0, 53%, 100%)
CMYK
cmyk(0%, 53%, 53%, 0%)
Oklch
oklch(73.1% 0.165 22.0)

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

#D10808

Vermilion · Red · Passion Red

HEX
#D10808
RGB
rgb(209, 8, 8)
HSL
hsl(0, 93%, 43%)
HSB
hsb(0, 96%, 82%)
CMYK
cmyk(0%, 96%, 96%, 18%)
Oklch
oklch(54.3% 0.220 28.9)

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

#631978

Royal Purple · Purple · Eggplant

HEX
#631978
RGB
rgb(99, 25, 120)
HSL
hsl(287, 66%, 28%)
HSB
hsb(287, 79%, 47%)
CMYK
cmyk(18%, 79%, 0%, 53%)
Oklch
oklch(38.2% 0.158 317.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99A5FF
FFF399

Analogous

99D8FF
99A5FF
C099FF

Triadic

99A5FF
FF99A5
A5FF99

Split-Comp.

99A5FF
FFC099
D8FF99

Tetradic

99A5FF
FF99D8
FFF399
99FFC0

Contrast Matrix WCAG 2.1 Contrast

99A5FF
DE8E1F
FF7878
D10808
631978
—
1.1
Fail
1.1
Fail
2.4
Fail
4.7
AA
1.1
Fail
—
1.0
Fail
2.1
Fail
4.1
AA Large
1.1
Fail
1.0
Fail
—
2.2
Fail
4.2
AA Large
2.4
Fail
2.1
Fail
2.2
Fail
—
1.9
Fail
4.7
AA
4.1
AA Large
4.2
AA Large
1.9
Fail
—
White BG
2.3Fail
2.6Fail
2.6Fail
5.6AA
10.8AAA
Black BG
9.2AAA
8.0AAA
8.2AAA
3.7AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9EE9
BBBB3A
C5C378
7A7808
434261

Deuteranopia

9E9DE4
C0C640
CCD778
869508
474D5C

Tritanopia

9AD8D4
DA4F54
F87878
C70808
5F4F4B

Achromatopsia

ACACAC
999999
A0A0A0
444444
3A3A3A

Shades & Tints Shades & Tints

#99A5FF

Dark
Light

#DE8E1F

Dark
Light

#FF7878

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99a5ff;
  --color-2: #de8e1f;
  --color-3: #ff7878;
  --color-4: #d10808;
  --color-5: #631978;
}

SCSS

$color-1: #99a5ff;
$color-2: #de8e1f;
$color-3: #ff7878;
$color-4: #d10808;
$color-5: #631978;

TAILWIND

colors: {
  'brand-1': '#99a5ff',
  'brand-2': '#de8e1f',
  'brand-3': '#ff7878',
  'brand-4': '#d10808',
  'brand-5': '#631978',
}

RGB Array

[153, 165, 255], [222, 142, 31], [255, 120, 120], [209, 8, 8], [99, 25, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99A5FF, #DE8E1F, #FF7878, #D10808, #631978 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: #99a5ff; --color-2: #de8e1f; --color-3: #ff7878; --color-4: #d10808; --color-5: #631978. 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