← Back to Editor

#246B87 · #4E7787 · #C5D1FC · #E65B43 · #E53415

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

#246B87

Lake Blue · Teal · Mint Ice

HEX
#246B87
RGB
rgb(36, 107, 135)
HSL
hsl(197, 58%, 34%)
HSB
hsb(197, 73%, 53%)
CMYK
cmyk(73%, 21%, 0%, 47%)
Oklch
oklch(49.7% 0.082 228.3)

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

#4E7787

Slate Blue · SlateGray · Mint Ice

HEX
#4E7787
RGB
rgb(78, 119, 135)
HSL
hsl(197, 27%, 42%)
HSB
hsb(197, 42%, 53%)
CMYK
cmyk(42%, 12%, 0%, 47%)
Oklch
oklch(54.5% 0.052 224.5)

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

#C5D1FC

Azure · LightBlue · Sky Blue

HEX
#C5D1FC
RGB
rgb(197, 209, 252)
HSL
hsl(227, 90%, 88%)
HSB
hsb(227, 22%, 99%)
CMYK
cmyk(22%, 17%, 0%, 1%)
Oklch
oklch(86.6% 0.061 272.8)

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

#E65B43

Vermilion · Tomato · Passion Red

HEX
#E65B43
RGB
rgb(230, 91, 67)
HSL
hsl(9, 77%, 58%)
HSB
hsb(9, 71%, 90%)
CMYK
cmyk(0%, 60%, 71%, 10%)
Oklch
oklch(64.8% 0.178 32.0)

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

#E53415

Vermilion · OrangeRed · Passion Red

HEX
#E53415
RGB
rgb(229, 52, 21)
HSL
hsl(9, 83%, 49%)
HSB
hsb(9, 91%, 90%)
CMYK
cmyk(0%, 77%, 91%, 10%)
Oklch
oklch(60.2% 0.216 32.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

246B87
894124

Analogous

248973
246B87
243A89

Triadic

246B87
89246C
6C8924

Split-Comp.

246B87
89243A
897324

Tetradic

246B87
732489
894124
3A8924

Contrast Matrix WCAG 2.1 Contrast

246B87
4E7787
C5D1FC
E65B43
E53415
—
1.2
Fail
3.9
AA Large
1.7
Fail
1.4
Fail
1.2
Fail
—
3.2
AA Large
1.4
Fail
1.1
Fail
3.9
AA Large
3.2
AA Large
—
2.3
Fail
2.9
Fail
1.7
Fail
1.4
Fail
2.3
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
2.9
Fail
1.2
Fail
—
White BG
6.0AA
4.9AA
1.5Fail
3.5AA Large
4.3AA Large
Black BG
3.5AA Large
4.3AA Large
13.9AAA
5.9AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434380
606083
CACAF2
AAA949
98971D

Deuteranopia

3F397F
5D5A82
CAC9EF
B2BC4A
A3B01E

Tritanopia

287B7A
50807F
C6E9E8
DF4D4E
DC2224

Achromatopsia

595959
6D6D6D
D2D2D2
828282
656565

Shades & Tints Shades & Tints

#246B87

Dark
Light

#4E7787

Dark
Light

#C5D1FC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #246b87;
  --color-2: #4e7787;
  --color-3: #c5d1fc;
  --color-4: #e65b43;
  --color-5: #e53415;
}

SCSS

$color-1: #246b87;
$color-2: #4e7787;
$color-3: #c5d1fc;
$color-4: #e65b43;
$color-5: #e53415;

TAILWIND

colors: {
  'brand-1': '#246b87',
  'brand-2': '#4e7787',
  'brand-3': '#c5d1fc',
  'brand-4': '#e65b43',
  'brand-5': '#e53415',
}

RGB Array

[36, 107, 135], [78, 119, 135], [197, 209, 252], [230, 91, 67], [229, 52, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #246B87, #4E7787, #C5D1FC, #E65B43, #E53415 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: #246b87; --color-2: #4e7787; --color-3: #c5d1fc; --color-4: #e65b43; --color-5: #e53415. 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