← Back to Editor

#99D8EA · #04BAC5 · #F2742A · #061840 · #221117

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

#99D8EA

Sky Blue · LightBlue · Glacier Blue

HEX
#99D8EA
RGB
rgb(153, 216, 234)
HSL
hsl(193, 66%, 76%)
HSB
hsb(193, 35%, 92%)
CMYK
cmyk(35%, 8%, 0%, 8%)
Oklch
oklch(84.6% 0.068 217.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#04BAC5

Lake Blue · DarkTurquoise · Mint Ice

HEX
#04BAC5
RGB
rgb(4, 186, 197)
HSL
hsl(183, 96%, 39%)
HSB
hsb(183, 98%, 77%)
CMYK
cmyk(98%, 6%, 0%, 23%)
Oklch
oklch(71.9% 0.122 202.4)

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

#F2742A

Tangerine · Chocolate · Warm Sun

HEX
#F2742A
RGB
rgb(242, 116, 42)
HSL
hsl(22, 88%, 56%)
HSB
hsb(22, 83%, 95%)
CMYK
cmyk(0%, 52%, 83%, 5%)
Oklch
oklch(69.7% 0.175 46.7)

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

#061840

Indigo · MidnightBlue · Deep Sea Blue

HEX
#061840
RGB
rgb(6, 24, 64)
HSL
hsl(221, 83%, 14%)
HSB
hsb(221, 91%, 25%)
CMYK
cmyk(91%, 63%, 0%, 75%)
Oklch
oklch(22.4% 0.080 262.9)

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

#221117

Dark Violet · Black · Raspberry

HEX
#221117
RGB
rgb(34, 17, 23)
HSL
hsl(339, 33%, 10%)
HSB
hsb(339, 50%, 13%)
CMYK
cmyk(0%, 50%, 32%, 87%)
Oklch
oklch(20.4% 0.030 357.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99D8EA
EAAB99

Analogous

99EAD3
99D8EA
99B0EA

Triadic

99D8EA
EA99D9
D9EA99

Split-Comp.

99D8EA
EA99B0
EAD399

Tetradic

99D8EA
D399EA
EAAB99
B0EA99

Contrast Matrix WCAG 2.1 Contrast

99D8EA
04BAC5
F2742A
061840
221117
—
1.5
Fail
1.8
Fail
11.0
AAA
11.5
AAA
1.5
Fail
—
1.2
Fail
7.3
AAA
7.6
AAA
1.8
Fail
1.2
Fail
—
6.0
AA
6.3
AA
11.0
AAA
7.3
AAA
6.0
AA
—
1.0
Fail
11.5
AAA
7.6
AAA
6.3
AA
1.0
Fail
—
White BG
1.6Fail
2.4Fail
2.9Fail
17.3AAA
18.1AAA
Black BG
13.4AAA
8.8AAA
7.3AAA
1.2Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B5E6
5354C2
BBBA3C
0E0E36
1B1A16

Deuteranopia

B1ACE5
483BC2
C3CC40
0D0B34
1C1D15

Tritanopia

9CE2E1
0DC0C0
EC4A4D
072F2D
211414

Achromatopsia

C7C7C7
858585
919191
171717
171717

Shades & Tints Shades & Tints

#99D8EA

Dark
Light

#04BAC5

Dark
Light

#F2742A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99d8ea;
  --color-2: #04bac5;
  --color-3: #f2742a;
  --color-4: #061840;
  --color-5: #221117;
}

SCSS

$color-1: #99d8ea;
$color-2: #04bac5;
$color-3: #f2742a;
$color-4: #061840;
$color-5: #221117;

TAILWIND

colors: {
  'brand-1': '#99d8ea',
  'brand-2': '#04bac5',
  'brand-3': '#f2742a',
  'brand-4': '#061840',
  'brand-5': '#221117',
}

RGB Array

[153, 216, 234], [4, 186, 197], [242, 116, 42], [6, 24, 64], [34, 17, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99D8EA, #04BAC5, #F2742A, #061840, #221117 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #99d8ea; --color-2: #04bac5; --color-3: #f2742a; --color-4: #061840; --color-5: #221117. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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