← Back to Editor

#446E86 · #3E9CA4 · #A7BDA8 · #C1CAAF · #D3DDBB

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#446E86

Slate Blue · DimGray · Prussian Blue

HEX
#446E86
RGB
rgb(68, 110, 134)
HSL
hsl(202, 33%, 40%)
HSB
hsb(202, 49%, 53%)
CMYK
cmyk(49%, 18%, 0%, 47%)
Oklch
oklch(51.7% 0.060 234.7)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#3E9CA4

Slate Blue · SteelBlue · Mint Ice

HEX
#3E9CA4
RGB
rgb(62, 156, 164)
HSL
hsl(185, 45%, 44%)
HSB
hsb(185, 62%, 64%)
CMYK
cmyk(62%, 5%, 0%, 36%)
Oklch
oklch(64.1% 0.088 203.0)

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

#A7BDA8

Celadon · DarkGray · Apple Green

HEX
#A7BDA8
RGB
rgb(167, 189, 168)
HSL
hsl(123, 14%, 70%)
HSB
hsb(123, 12%, 74%)
CMYK
cmyk(12%, 0%, 11%, 26%)
Oklch
oklch(77.6% 0.038 146.4)

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

#C1CAAF

Willow Green · Silver · Apple Green

HEX
#C1CAAF
RGB
rgb(193, 202, 175)
HSL
hsl(80, 20%, 74%)
HSB
hsb(80, 13%, 79%)
CMYK
cmyk(4%, 0%, 13%, 21%)
Oklch
oklch(82.5% 0.038 122.2)

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

#D3DDBB

Willow Green · LightGray · Apple Green

HEX
#D3DDBB
RGB
rgb(211, 221, 187)
HSL
hsl(78, 33%, 80%)
HSB
hsb(78, 15%, 87%)
CMYK
cmyk(5%, 0%, 15%, 13%)
Oklch
oklch(88.1% 0.047 120.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

446E86
885D44

Analogous

44887F
446E86
444D88

Triadic

446E86
88446F
6F8844

Split-Comp.

446E86
88444D
887F44

Tetradic

446E86
7F4488
885D44
4D8844

Contrast Matrix WCAG 2.1 Contrast

446E86
3E9CA4
A7BDA8
C1CAAF
D3DDBB
—
1.7
Fail
2.7
Fail
3.2
AA Large
3.9
AA Large
1.7
Fail
—
1.6
Fail
1.9
Fail
2.3
Fail
2.7
Fail
1.6
Fail
—
1.2
Fail
1.4
Fail
3.2
AA Large
1.9
Fail
1.2
Fail
—
1.2
Fail
3.9
AA Large
2.3
Fail
1.4
Fail
1.2
Fail
—
White BG
5.5AA
3.2AA Large
2.0Fail
1.7Fail
1.4Fail
Black BG
3.8AA Large
6.5AA
10.5AAA
12.3AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565780
6768A2
B1B1AD
C5C5B6
D7D7C3

Deuteranopia

54517F
615AA2
AFAEAE
C4C4B7
D7D6C5

Tritanopia

467C7B
43A1A0
A8B1B2
C1BBBC
D4CACB

Achromatopsia

646464
818181
B4B4B4
C4C4C4
D6D6D6

Shades & Tints Shades & Tints

#446E86

Dark
Light

#3E9CA4

Dark
Light

#A7BDA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #446e86;
  --color-2: #3e9ca4;
  --color-3: #a7bda8;
  --color-4: #c1caaf;
  --color-5: #d3ddbb;
}

SCSS

$color-1: #446e86;
$color-2: #3e9ca4;
$color-3: #a7bda8;
$color-4: #c1caaf;
$color-5: #d3ddbb;

TAILWIND

colors: {
  'brand-1': '#446e86',
  'brand-2': '#3e9ca4',
  'brand-3': '#a7bda8',
  'brand-4': '#c1caaf',
  'brand-5': '#d3ddbb',
}

RGB Array

[68, 110, 134], [62, 156, 164], [167, 189, 168], [193, 202, 175], [211, 221, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #446E86, #3E9CA4, #A7BDA8, #C1CAAF, #D3DDBB is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #446e86; --color-2: #3e9ca4; --color-3: #a7bda8; --color-4: #c1caaf; --color-5: #d3ddbb. 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. 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 cool-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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