← Back to Editor

#CBE6DD · #09807A · #FC0A2E · #16B2B1 · #B5D8F0

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

#CBE6DD

Jade · LightGray · Glacier Blue

HEX
#CBE6DD
RGB
rgb(203, 230, 221)
HSL
hsl(160, 35%, 85%)
HSB
hsb(160, 12%, 90%)
CMYK
cmyk(12%, 0%, 4%, 10%)
Oklch
oklch(90.3% 0.031 173.5)

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

#09807A

Mineral Blue · Teal · Mint Ice

HEX
#09807A
RGB
rgb(9, 128, 122)
HSL
hsl(177, 87%, 27%)
HSB
hsb(177, 93%, 50%)
CMYK
cmyk(93%, 0%, 5%, 50%)
Oklch
oklch(54.2% 0.092 189.0)

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

#FC0A2E

Vermilion · Crimson · Passion Red

HEX
#FC0A2E
RGB
rgb(252, 10, 46)
HSL
hsl(351, 98%, 51%)
HSB
hsb(351, 96%, 99%)
CMYK
cmyk(0%, 96%, 82%, 1%)
Oklch
oklch(62.6% 0.251 24.7)

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

#16B2B1

Lake Blue · LightSeaGreen · Mint Ice

HEX
#16B2B1
RGB
rgb(22, 178, 177)
HSL
hsl(180, 78%, 39%)
HSB
hsb(180, 88%, 70%)
CMYK
cmyk(88%, 0%, 1%, 30%)
Oklch
oklch(69.2% 0.115 194.1)

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

#B5D8F0

Sky Blue · LightBlue · Sky Blue

HEX
#B5D8F0
RGB
rgb(181, 216, 240)
HSL
hsl(204, 66%, 83%)
HSB
hsb(204, 25%, 94%)
CMYK
cmyk(25%, 10%, 0%, 6%)
Oklch
oklch(86.5% 0.050 238.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBE6DD
E6CBD4

Analogous

CBE6D0
CBE6DD
CBE2E6

Triadic

CBE6DD
DDCBE6
E6DDCB

Split-Comp.

CBE6DD
E6CBE2
E6D0CB

Tetradic

CBE6DD
D0CBE6
E6CBD4
E2E6CB

Contrast Matrix WCAG 2.1 Contrast

CBE6DD
09807A
FC0A2E
16B2B1
B5D8F0
—
3.6
AA Large
3.0
AA Large
2.0
Fail
1.1
Fail
3.6
AA Large
—
1.2
Fail
1.8
Fail
3.2
AA Large
3.0
AA Large
1.2
Fail
—
1.5
Fail
2.7
Fail
2.0
Fail
1.8
Fail
1.5
Fail
—
1.7
Fail
1.1
Fail
3.2
AA Large
2.7
Fail
1.7
Fail
—
White BG
1.3Fail
4.8AA
4.0AA Large
2.6Fail
1.5Fail
Black BG
15.9AAA
4.4AA Large
5.2AA
8.0AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7DF
3D3E7B
939125
5A5BB1
C4C4EA

Deuteranopia

D5D3E0
362D7C
A1B323
5145B1
C2C0E9

Tritanopia

CCE1E1
0F7D7D
F01E1D
1EB1B1
B7E6E5

Achromatopsia

DDDDDD
5C5C5C
565656
838383
D0D0D0

Shades & Tints Shades & Tints

#CBE6DD

Dark
Light

#09807A

Dark
Light

#FC0A2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbe6dd;
  --color-2: #09807a;
  --color-3: #fc0a2e;
  --color-4: #16b2b1;
  --color-5: #b5d8f0;
}

SCSS

$color-1: #cbe6dd;
$color-2: #09807a;
$color-3: #fc0a2e;
$color-4: #16b2b1;
$color-5: #b5d8f0;

TAILWIND

colors: {
  'brand-1': '#cbe6dd',
  'brand-2': '#09807a',
  'brand-3': '#fc0a2e',
  'brand-4': '#16b2b1',
  'brand-5': '#b5d8f0',
}

RGB Array

[203, 230, 221], [9, 128, 122], [252, 10, 46], [22, 178, 177], [181, 216, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBE6DD, #09807A, #FC0A2E, #16B2B1, #B5D8F0 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: #cbe6dd; --color-2: #09807a; --color-3: #fc0a2e; --color-4: #16b2b1; --color-5: #b5d8f0. 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