← Back to Editor

#24B3F5 · #CDD7B6 · #FB1455 · #443D48 · #093E48

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

#24B3F5

Lake Blue · DodgerBlue · Lake Green

HEX
#24B3F5
RGB
rgb(36, 179, 245)
HSL
hsl(199, 91%, 55%)
HSB
hsb(199, 85%, 96%)
CMYK
cmyk(85%, 27%, 0%, 4%)
Oklch
oklch(72.6% 0.147 235.5)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#CDD7B6

Willow Green · Silver · Apple Green

HEX
#CDD7B6
RGB
rgb(205, 215, 182)
HSL
hsl(78, 29%, 78%)
HSB
hsb(78, 15%, 84%)
CMYK
cmyk(5%, 0%, 15%, 16%)
Oklch
oklch(86.3% 0.046 121.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#FB1455

Dark Violet · Crimson · Rose Pink

HEX
#FB1455
RGB
rgb(251, 20, 85)
HSL
hsl(343, 97%, 53%)
HSB
hsb(343, 92%, 98%)
CMYK
cmyk(0%, 92%, 66%, 2%)
Oklch
oklch(63.2% 0.247 15.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#443D48

Dark Plum · DarkSlateGray · Charcoal

HEX
#443D48
RGB
rgb(68, 61, 72)
HSL
hsl(278, 8%, 26%)
HSB
hsb(278, 15%, 28%)
CMYK
cmyk(6%, 15%, 0%, 72%)
Oklch
oklch(37.1% 0.021 313.4)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#093E48

Lake Blue · DarkSlateGray · Peacock Green

HEX
#093E48
RGB
rgb(9, 62, 72)
HSL
hsl(190, 78%, 16%)
HSB
hsb(190, 88%, 28%)
CMYK
cmyk(88%, 14%, 0%, 72%)
Oklch
oklch(33.6% 0.054 213.9)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24B3F5
F56624

Analogous

24F5CE
24B3F5
244AF5

Triadic

24B3F5
F524B3
B3F524

Split-Comp.

24B3F5
F5244A
F5CE24

Tetradic

24B3F5
CE24F5
F56624
4AF524

Contrast Matrix WCAG 2.1 Contrast

24B3F5
CDD7B6
FB1455
443D48
093E48
—
1.6
Fail
1.7
Fail
4.4
AA Large
4.9
AA
1.6
Fail
—
2.6
Fail
7.0
AA
7.8
AAA
1.7
Fail
2.6
Fail
—
2.7
Fail
3.0
Fail
4.4
AA Large
7.0
AA
2.7
Fail
—
1.1
Fail
4.9
AA
7.8
AAA
3.0
Fail
1.1
Fail
—
White BG
2.4Fail
1.5Fail
3.9AA Large
10.5AAA
11.7AAA
Black BG
8.8AAA
14.0AAA
5.3AA
2.0Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6263E5
D1D1BE
979545
414145
202046

Deuteranopia

5A4FE1
D1D0C0
A4B642
414245
1D1945

Tritanopia

2BD8D6
CEC4C6
EF3936
444343
0C4443

Achromatopsia

909090
D0D0D0
606060
404040
2F2F2F

Shades & Tints Shades & Tints

#24B3F5

Dark
Light

#CDD7B6

Dark
Light

#FB1455

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24b3f5;
  --color-2: #cdd7b6;
  --color-3: #fb1455;
  --color-4: #443d48;
  --color-5: #093e48;
}

SCSS

$color-1: #24b3f5;
$color-2: #cdd7b6;
$color-3: #fb1455;
$color-4: #443d48;
$color-5: #093e48;

TAILWIND

colors: {
  'brand-1': '#24b3f5',
  'brand-2': '#cdd7b6',
  'brand-3': '#fb1455',
  'brand-4': '#443d48',
  'brand-5': '#093e48',
}

RGB Array

[36, 179, 245], [205, 215, 182], [251, 20, 85], [68, 61, 72], [9, 62, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24B3F5, #CDD7B6, #FB1455, #443D48, #093E48 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: #24b3f5; --color-2: #cdd7b6; --color-3: #fb1455; --color-4: #443d48; --color-5: #093e48. 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