← Back to Editor

#6B6563 · #80E0DF · #A7CBDA · #BFBFD5 · #CCB4C4

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

#6B6563

Ink Gray · DimGray · Charcoal

HEX
#6B6563
RGB
rgb(107, 101, 99)
HSL
hsl(15, 4%, 40%)
HSB
hsb(15, 7%, 42%)
CMYK
cmyk(0%, 6%, 7%, 58%)
Oklch
oklch(51.2% 0.008 39.4)

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

#80E0DF

Jade · SkyBlue · Lake Green

HEX
#80E0DF
RGB
rgb(128, 224, 223)
HSL
hsl(179, 61%, 69%)
HSB
hsb(179, 43%, 88%)
CMYK
cmyk(43%, 0%, 0%, 12%)
Oklch
oklch(84.8% 0.091 194.7)

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

#A7CBDA

Sky Blue · LightSteelBlue · Lake Green

HEX
#A7CBDA
RGB
rgb(167, 203, 218)
HSL
hsl(198, 41%, 75%)
HSB
hsb(198, 23%, 85%)
CMYK
cmyk(23%, 7%, 0%, 15%)
Oklch
oklch(82.1% 0.044 225.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BFBFD5

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#BFBFD5
RGB
rgb(191, 191, 213)
HSL
hsl(240, 21%, 79%)
HSB
hsb(240, 10%, 84%)
CMYK
cmyk(10%, 10%, 0%, 16%)
Oklch
oklch(81.2% 0.031 285.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#CCB4C4

Mauve · Silver · Rose Pink

HEX
#CCB4C4
RGB
rgb(204, 180, 196)
HSL
hsl(320, 19%, 75%)
HSB
hsb(320, 12%, 80%)
CMYK
cmyk(0%, 12%, 4%, 20%)
Oklch
oklch(79.5% 0.035 338.1)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6B6563
62686A

Analogous

6A6264
6B6563
6A6862

Triadic

6B6563
626A64
64626A

Split-Comp.

6B6563
626A68
62646A

Tetradic

6B6563
646A62
62686A
68626A

Contrast Matrix WCAG 2.1 Contrast

6B6563
80E0DF
A7CBDA
BFBFD5
CCB4C4
—
3.7
AA Large
3.3
AA Large
3.2
AA Large
3.0
Fail
3.7
AA Large
—
1.1
Fail
1.2
Fail
1.3
Fail
3.3
AA Large
1.1
Fail
—
1.0
Fail
1.1
Fail
3.2
AA Large
1.2
Fail
1.0
Fail
—
1.1
Fail
3.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
White BG
5.7AA
1.5Fail
1.7Fail
1.8Fail
1.9Fail
Black BG
3.7AA Large
13.6AAA
12.2AAA
11.6AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

686863
AAAADF
B7B7D6
BFBFD0
C2C1C0

Deuteranopia

696964
A49DDF
B5B2D6
BFBFCE
C3C5BF

Tritanopia

6B6464
85DFDF
A9D4D3
BFCBCB
CBBDBC

Achromatopsia

676767
C3C3C3
C2C2C2
C2C2C2
BDBDBD

Shades & Tints Shades & Tints

#6B6563

Dark
Light

#80E0DF

Dark
Light

#A7CBDA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6b6563;
  --color-2: #80e0df;
  --color-3: #a7cbda;
  --color-4: #bfbfd5;
  --color-5: #ccb4c4;
}

SCSS

$color-1: #6b6563;
$color-2: #80e0df;
$color-3: #a7cbda;
$color-4: #bfbfd5;
$color-5: #ccb4c4;

TAILWIND

colors: {
  'brand-1': '#6b6563',
  'brand-2': '#80e0df',
  'brand-3': '#a7cbda',
  'brand-4': '#bfbfd5',
  'brand-5': '#ccb4c4',
}

RGB Array

[107, 101, 99], [128, 224, 223], [167, 203, 218], [191, 191, 213], [204, 180, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #6B6563, #80E0DF, #A7CBDA, #BFBFD5, #CCB4C4 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: #6b6563; --color-2: #80e0df; --color-3: #a7cbda; --color-4: #bfbfd5; --color-5: #ccb4c4. 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