← Back to Editor

#B4C6B1 · #9EAD9B · #102030 · #223355 · #667799

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B4C6B1

Celadon · Silver · Apple Green

HEX
#B4C6B1
RGB
rgb(180, 198, 177)
HSL
hsl(111, 16%, 74%)
HSB
hsb(111, 11%, 78%)
CMYK
cmyk(9%, 0%, 11%, 22%)
Oklch
oklch(80.7% 0.035 141.2)

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

#9EAD9B

Celadon · DarkGray · Apple Green

HEX
#9EAD9B
RGB
rgb(158, 173, 155)
HSL
hsl(110, 10%, 64%)
HSB
hsb(110, 10%, 68%)
CMYK
cmyk(9%, 0%, 10%, 32%)
Oklch
oklch(73.1% 0.031 140.5)

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

#102030

Indigo · Black · Deep Sea Blue

HEX
#102030
RGB
rgb(16, 32, 48)
HSL
hsl(210, 50%, 13%)
HSB
hsb(210, 67%, 19%)
CMYK
cmyk(67%, 33%, 0%, 81%)
Oklch
oklch(23.8% 0.038 249.7)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#223355

Indigo · DarkSlateGray · Prussian Blue

HEX
#223355
RGB
rgb(34, 51, 85)
HSL
hsl(220, 43%, 23%)
HSB
hsb(220, 60%, 33%)
CMYK
cmyk(60%, 40%, 0%, 67%)
Oklch
oklch(32.4% 0.065 263.1)

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

#667799

Indigo · SlateGray · Navy Blue

HEX
#667799
RGB
rgb(102, 119, 153)
HSL
hsl(220, 20%, 50%)
HSB
hsb(220, 33%, 60%)
CMYK
cmyk(33%, 22%, 0%, 40%)
Oklch
oklch(56.9% 0.057 264.0)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4C6B1
C4B2C7

Analogous

C0C7B2
B4C6B1
B2C7BA

Triadic

B4C6B1
B2B5C7
C7B2B5

Split-Comp.

B4C6B1
BAB2C7
C7B2C0

Tetradic

B4C6B1
B2C0C7
C4B2C7
C7BAB2

Contrast Matrix WCAG 2.1 Contrast

B4C6B1
9EAD9B
102030
223355
667799
—
1.3
Fail
9.2
AAA
7.0
AA
2.5
Fail
1.3
Fail
—
7.0
AAA
5.3
AA
1.9
Fail
9.2
AAA
7.0
AAA
—
1.3
Fail
3.7
AA Large
7.0
AA
5.3
AA
1.3
Fail
—
2.8
Fail
2.5
Fail
1.9
Fail
3.7
AA Large
2.8
Fail
—
White BG
1.8Fail
2.4Fail
16.5AAA
12.6AAA
4.5AA
Black BG
11.7AAA
8.9AAA
1.3Fail
1.7Fail
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCB6
A4A59F
17172C
292A4D
6D6E91

Deuteranopia

BBB9B7
A4A3A0
16152B
28274B
6C6B8F

Tritanopia

B5BABB
9FA3A4
112928
234645
678A89

Achromatopsia

BEBEBE
A6A6A6
1D1D1D
323232
767676

Shades & Tints Shades & Tints

#B4C6B1

Dark
Light

#9EAD9B

Dark
Light

#102030

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4c6b1;
  --color-2: #9ead9b;
  --color-3: #102030;
  --color-4: #223355;
  --color-5: #667799;
}

SCSS

$color-1: #b4c6b1;
$color-2: #9ead9b;
$color-3: #102030;
$color-4: #223355;
$color-5: #667799;

TAILWIND

colors: {
  'brand-1': '#b4c6b1',
  'brand-2': '#9ead9b',
  'brand-3': '#102030',
  'brand-4': '#223355',
  'brand-5': '#667799',
}

RGB Array

[180, 198, 177], [158, 173, 155], [16, 32, 48], [34, 51, 85], [102, 119, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #B4C6B1, #9EAD9B, #102030, #223355, #667799 is ideal for: brand design, premium product pages, magazine layouts, 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: #b4c6b1; --color-2: #9ead9b; --color-3: #102030; --color-4: #223355; --color-5: #667799. 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. 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 space-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