← Back to Editor

#00011E · #7C8EA6 · #F2DF80 · #F4BE82 · #C16B52

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

#00011E

Indigo · Black · Deep Sea Blue

HEX
#00011E
RGB
rgb(0, 1, 30)
HSL
hsl(238, 100%, 6%)
HSB
hsb(238, 100%, 12%)
CMYK
cmyk(100%, 97%, 0%, 88%)
Oklch
oklch(11.2% 0.070 264.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#7C8EA6

Azure · LightSlateGray · Navy Blue

HEX
#7C8EA6
RGB
rgb(124, 142, 166)
HSL
hsl(214, 19%, 57%)
HSB
hsb(214, 25%, 65%)
CMYK
cmyk(25%, 14%, 0%, 35%)
Oklch
oklch(64.1% 0.042 255.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#F2DF80

Fresh Green · Khaki · Sunflower

HEX
#F2DF80
RGB
rgb(242, 223, 128)
HSL
hsl(50, 81%, 73%)
HSB
hsb(50, 47%, 95%)
CMYK
cmyk(0%, 8%, 47%, 5%)
Oklch
oklch(89.9% 0.118 98.3)

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

#F4BE82

Goose Yellow · BurlyWood · Warm Sun

HEX
#F4BE82
RGB
rgb(244, 190, 130)
HSL
hsl(32, 84%, 73%)
HSB
hsb(32, 47%, 96%)
CMYK
cmyk(0%, 22%, 47%, 4%)
Oklch
oklch(83.7% 0.099 68.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C16B52

Crimson · Chocolate · Passion Red

HEX
#C16B52
RGB
rgb(193, 107, 82)
HSL
hsl(14, 47%, 54%)
HSB
hsb(14, 58%, 76%)
CMYK
cmyk(0%, 45%, 58%, 24%)
Oklch
oklch(62.0% 0.116 37.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

00011E
1F1E00

Analogous

00101F
00011E
0E001F

Triadic

00011E
1F0001
011F00

Split-Comp.

00011E
1F0E00
101F00

Tetradic

00011E
1F0010
1F1E00
001F0E

Contrast Matrix WCAG 2.1 Contrast

00011E
7C8EA6
F2DF80
F4BE82
C16B52
—
6.1
AA
15.3
AAA
12.3
AAA
5.4
AA
6.1
AA
—
2.5
Fail
2.0
Fail
1.1
Fail
15.3
AAA
2.5
Fail
—
1.2
Fail
2.8
Fail
12.3
AAA
2.0
Fail
1.2
Fail
—
2.3
Fail
5.4
AA
1.1
Fail
2.8
Fail
2.3
Fail
—
White BG
20.5AAA
3.3AA Large
1.3Fail
1.7Fail
3.8AA Large
Black BG
1.0Fail
6.3AA
15.6AAA
12.5AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

000017
8484A0
EAEA97
DDDC91
9C9B58

Deuteranopia

000015
83819F
EBEC9D
E0E494
A1A75A

Tritanopia

001110
7D9C9B
F1A9AD
F19C9F
BD5D5E

Achromatopsia

040404
8B8B8B
DADADA
C7C7C7
828282

Shades & Tints Shades & Tints

#00011E

Dark
Light

#7C8EA6

Dark
Light

#F2DF80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #00011e;
  --color-2: #7c8ea6;
  --color-3: #f2df80;
  --color-4: #f4be82;
  --color-5: #c16b52;
}

SCSS

$color-1: #00011e;
$color-2: #7c8ea6;
$color-3: #f2df80;
$color-4: #f4be82;
$color-5: #c16b52;

TAILWIND

colors: {
  'brand-1': '#00011e',
  'brand-2': '#7c8ea6',
  'brand-3': '#f2df80',
  'brand-4': '#f4be82',
  'brand-5': '#c16b52',
}

RGB Array

[0, 1, 30], [124, 142, 166], [242, 223, 128], [244, 190, 130], [193, 107, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #00011E, #7C8EA6, #F2DF80, #F4BE82, #C16B52 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: #00011e; --color-2: #7c8ea6; --color-3: #f2df80; --color-4: #f4be82; --color-5: #c16b52. 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