← Back to Editor

#D7E0CF · #A2D5CD · #8FBAAF · #909C8B · #7A6D79

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D7E0CF

Celadon · LightGray · Mint Green

HEX
#D7E0CF
RGB
rgb(215, 224, 207)
HSL
hsl(92, 22%, 85%)
HSB
hsb(92, 8%, 88%)
CMYK
cmyk(4%, 0%, 8%, 12%)
Oklch
oklch(89.5% 0.025 129.9)

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

#A2D5CD

Jade · LightBlue · Lake Green

HEX
#A2D5CD
RGB
rgb(162, 213, 205)
HSL
hsl(171, 38%, 74%)
HSB
hsb(171, 24%, 84%)
CMYK
cmyk(24%, 0%, 4%, 16%)
Oklch
oklch(83.5% 0.054 184.4)

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

#8FBAAF

Jade · DarkGray · Lake Green

HEX
#8FBAAF
RGB
rgb(143, 186, 175)
HSL
hsl(165, 24%, 65%)
HSB
hsb(165, 23%, 73%)
CMYK
cmyk(23%, 0%, 6%, 27%)
Oklch
oklch(75.5% 0.049 177.5)

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

#909C8B

Celadon · DarkSeaGreen · Silver Sand

HEX
#909C8B
RGB
rgb(144, 156, 139)
HSL
hsl(102, 8%, 58%)
HSB
hsb(102, 11%, 61%)
CMYK
cmyk(8%, 0%, 11%, 39%)
Oklch
oklch(67.8% 0.028 136.4)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#7A6D79

Ink Gray · Gray · Warm Gray

HEX
#7A6D79
RGB
rgb(122, 109, 121)
HSL
hsl(305, 6%, 45%)
HSB
hsb(305, 11%, 48%)
CMYK
cmyk(0%, 11%, 1%, 52%)
Oklch
oklch(55.1% 0.024 328.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7E0CF
D9D0E1

Analogous

E1E1D0
D7E0CF
D0E1D1

Triadic

D7E0CF
D0D8E1
E1D0D8

Split-Comp.

D7E0CF
D1D0E1
E1D0E1

Tetradic

D7E0CF
D0E1E1
D9D0E1
E1D1D0

Contrast Matrix WCAG 2.1 Contrast

D7E0CF
A2D5CD
8FBAAF
909C8B
7A6D79
—
1.2
Fail
1.6
Fail
2.1
Fail
3.6
AA Large
1.2
Fail
—
1.3
Fail
1.8
Fail
3.0
AA Large
1.6
Fail
1.3
Fail
—
1.3
Fail
2.3
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.7
Fail
3.6
AA Large
3.0
AA Large
2.3
Fail
1.7
Fail
—
White BG
1.4Fail
1.6Fail
2.1Fail
2.9Fail
4.9AA
Black BG
15.5AAA
12.9AAA
9.8AAA
7.3AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBD3
B8B9CF
A2A2B2
95958F
747476

Deuteranopia

DADAD4
B5B1CF
9F9CB2
959490
757675

Tritanopia

D7D6D7
A5D0D1
91B4B4
919293
797473

Achromatopsia

DBDBDB
C5C5C5
ACACAC
969696
727272

Shades & Tints Shades & Tints

#D7E0CF

Dark
Light

#A2D5CD

Dark
Light

#8FBAAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7e0cf;
  --color-2: #a2d5cd;
  --color-3: #8fbaaf;
  --color-4: #909c8b;
  --color-5: #7a6d79;
}

SCSS

$color-1: #d7e0cf;
$color-2: #a2d5cd;
$color-3: #8fbaaf;
$color-4: #909c8b;
$color-5: #7a6d79;

TAILWIND

colors: {
  'brand-1': '#d7e0cf',
  'brand-2': '#a2d5cd',
  'brand-3': '#8fbaaf',
  'brand-4': '#909c8b',
  'brand-5': '#7a6d79',
}

RGB Array

[215, 224, 207], [162, 213, 205], [143, 186, 175], [144, 156, 139], [122, 109, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #D7E0CF, #A2D5CD, #8FBAAF, #909C8B, #7A6D79 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #d7e0cf; --color-2: #a2d5cd; --color-3: #8fbaaf; --color-4: #909c8b; --color-5: #7a6d79. 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. 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 space-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