← Back to Editor

#665D5D · #8A8887 · #B4D1C5 · #D8EAEB · #A1D1AF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#665D5D

Ink Gray · DimGray · Charcoal

HEX
#665D5D
RGB
rgb(102, 93, 93)
HSL
hsl(0, 5%, 38%)
HSB
hsb(0, 9%, 40%)
CMYK
cmyk(0%, 9%, 9%, 60%)
Oklch
oklch(48.7% 0.012 17.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#8A8887

Ash · Gray · Warm Gray

HEX
#8A8887
RGB
rgb(138, 136, 135)
HSL
hsl(20, 1%, 54%)
HSB
hsb(20, 2%, 54%)
CMYK
cmyk(0%, 1%, 2%, 46%)
Oklch
oklch(62.8% 0.003 48.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B4D1C5

Jade · Silver · Apple Green

HEX
#B4D1C5
RGB
rgb(180, 209, 197)
HSL
hsl(155, 24%, 76%)
HSB
hsb(155, 14%, 82%)
CMYK
cmyk(14%, 0%, 6%, 18%)
Oklch
oklch(83.6% 0.035 168.6)

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

#D8EAEB

Sky Blue · Lavender · Glacier Blue

HEX
#D8EAEB
RGB
rgb(216, 234, 235)
HSL
hsl(183, 32%, 88%)
HSB
hsb(183, 8%, 92%)
CMYK
cmyk(8%, 0%, 0%, 8%)
Oklch
oklch(92.4% 0.019 200.9)

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

#A1D1AF

Celadon · Silver · Apple Green

HEX
#A1D1AF
RGB
rgb(161, 209, 175)
HSL
hsl(138, 34%, 73%)
HSB
hsb(138, 23%, 82%)
CMYK
cmyk(23%, 0%, 16%, 18%)
Oklch
oklch(81.7% 0.069 153.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

665D5D
5C6666

Analogous

665C61
665D5D
66615C

Triadic

665D5D
5C665C
5C5C66

Split-Comp.

665D5D
5C6661
5C6166

Tetradic

665D5D
61665C
5C6666
615C66

Contrast Matrix WCAG 2.1 Contrast

665D5D
8A8887
B4D1C5
D8EAEB
A1D1AF
—
1.8
Fail
3.9
AA Large
5.1
AA
3.7
AA Large
1.8
Fail
—
2.2
Fail
2.8
Fail
2.1
Fail
3.9
AA Large
2.2
Fail
—
1.3
Fail
1.0
Fail
5.1
AA
2.8
Fail
1.3
Fail
—
1.4
Fail
3.7
AA Large
2.1
Fail
1.0
Fail
1.4
Fail
—
White BG
6.4AA
3.5AA Large
1.6Fail
1.2Fail
1.7Fail
Black BG
3.3AA Large
6.0AA
12.9AAA
16.9AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

62625D
898987
C1C1C8
E0E0EB
B6B6B7

Deuteranopia

63635D
898987
BFBDC9
DFDDEB
B3AFB9

Tritanopia

665D5D
8A8787
B5CACB
D9EBEB
A3BEBF

Achromatopsia

606060
888888
C7C7C7
E5E5E5
BFBFBF

Shades & Tints Shades & Tints

#665D5D

Dark
Light

#8A8887

Dark
Light

#B4D1C5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #665d5d;
  --color-2: #8a8887;
  --color-3: #b4d1c5;
  --color-4: #d8eaeb;
  --color-5: #a1d1af;
}

SCSS

$color-1: #665d5d;
$color-2: #8a8887;
$color-3: #b4d1c5;
$color-4: #d8eaeb;
$color-5: #a1d1af;

TAILWIND

colors: {
  'brand-1': '#665d5d',
  'brand-2': '#8a8887',
  'brand-3': '#b4d1c5',
  'brand-4': '#d8eaeb',
  'brand-5': '#a1d1af',
}

RGB Array

[102, 93, 93], [138, 136, 135], [180, 209, 197], [216, 234, 235], [161, 209, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #665D5D, #8A8887, #B4D1C5, #D8EAEB, #A1D1AF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #665d5d; --color-2: #8a8887; --color-3: #b4d1c5; --color-4: #d8eaeb; --color-5: #a1d1af. 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 beauty, lifestyle, arts 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