← Back to Editor

#453F48 · #8ABFEB · #A2CCC6 · #C8E6C1 · #E1E9C4

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#453F48

Dark Cyan · DarkSlateGray · Charcoal

HEX
#453F48
RGB
rgb(69, 63, 72)
HSL
hsl(280, 7%, 26%)
HSB
hsb(280, 12%, 28%)
CMYK
cmyk(4%, 12%, 0%, 72%)
Oklch
oklch(37.7% 0.017 314.6)

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

#8ABFEB

Sky Blue · SkyBlue · Cobalt Blue

HEX
#8ABFEB
RGB
rgb(138, 191, 235)
HSL
hsl(207, 71%, 73%)
HSB
hsb(207, 41%, 92%)
CMYK
cmyk(41%, 19%, 0%, 8%)
Oklch
oklch(78.4% 0.084 244.2)

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

#A2CCC6

Jade · LightSteelBlue · Lake Green

HEX
#A2CCC6
RGB
rgb(162, 204, 198)
HSL
hsl(171, 29%, 72%)
HSB
hsb(171, 21%, 80%)
CMYK
cmyk(21%, 0%, 3%, 20%)
Oklch
oklch(81.3% 0.045 185.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C8E6C1

Celadon · LightGray · Mint Green

HEX
#C8E6C1
RGB
rgb(200, 230, 193)
HSL
hsl(109, 43%, 83%)
HSB
hsb(109, 16%, 90%)
CMYK
cmyk(13%, 0%, 16%, 10%)
Oklch
oklch(89.3% 0.059 139.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#E1E9C4

Willow Green · Wheat · Mint Green

HEX
#E1E9C4
RGB
rgb(225, 233, 196)
HSL
hsl(73, 46%, 84%)
HSB
hsb(73, 16%, 91%)
CMYK
cmyk(3%, 0%, 16%, 9%)
Oklch
oklch(91.8% 0.050 117.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

453F48
41473E

Analogous

3F3E47
453F48
473E45

Triadic

453F48
47443E
3E4744

Split-Comp.

453F48
45473E
3E473F

Tetradic

453F48
473F3E
41473E
3E4547

Contrast Matrix WCAG 2.1 Contrast

453F48
8ABFEB
A2CCC6
C8E6C1
E1E9C4
—
5.2
AA
5.8
AA
7.6
AAA
8.1
AAA
5.2
AA
—
1.1
Fail
1.4
Fail
1.6
Fail
5.8
AA
1.1
Fail
—
1.3
Fail
1.4
Fail
7.6
AAA
1.4
Fail
1.3
Fail
—
1.1
Fail
8.1
AAA
1.6
Fail
1.4
Fail
1.1
Fail
—
White BG
10.2AAA
2.0Fail
1.8Fail
1.4Fail
1.3Fail
Black BG
2.1Fail
10.7AAA
12.0AAA
15.5AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

424246
A1A1E0
B4B5C7
D5D5CA
E4E5CD

Deuteranopia

434345
9E9ADE
B2AFC8
D3D1CC
E4E3CF

Tritanopia

454444
8DD8D6
A4C9C9
CAD1D3
E1D4D6

Achromatopsia

424242
B4B4B4
BFBFBF
D9D9D9
E2E2E2

Shades & Tints Shades & Tints

#453F48

Dark
Light

#8ABFEB

Dark
Light

#A2CCC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #453f48;
  --color-2: #8abfeb;
  --color-3: #a2ccc6;
  --color-4: #c8e6c1;
  --color-5: #e1e9c4;
}

SCSS

$color-1: #453f48;
$color-2: #8abfeb;
$color-3: #a2ccc6;
$color-4: #c8e6c1;
$color-5: #e1e9c4;

TAILWIND

colors: {
  'brand-1': '#453f48',
  'brand-2': '#8abfeb',
  'brand-3': '#a2ccc6',
  'brand-4': '#c8e6c1',
  'brand-5': '#e1e9c4',
}

RGB Array

[69, 63, 72], [138, 191, 235], [162, 204, 198], [200, 230, 193], [225, 233, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #453F48, #8ABFEB, #A2CCC6, #C8E6C1, #E1E9C4 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #453f48; --color-2: #8abfeb; --color-3: #a2ccc6; --color-4: #c8e6c1; --color-5: #e1e9c4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 tech, SaaS, healthcare, eco industries. 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