← Back to Editor

#BCE0B2 · #97B8A5 · #7D9FA1 · #7C898F · #313149

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

#BCE0B2

Celadon · Silver · Apple Green

HEX
#BCE0B2
RGB
rgb(188, 224, 178)
HSL
hsl(107, 43%, 79%)
HSB
hsb(107, 21%, 88%)
CMYK
cmyk(16%, 0%, 21%, 12%)
Oklch
oklch(86.9% 0.073 138.9)

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

#97B8A5

Celadon · DarkSeaGreen · Apple Green

HEX
#97B8A5
RGB
rgb(151, 184, 165)
HSL
hsl(145, 19%, 66%)
HSB
hsb(145, 18%, 72%)
CMYK
cmyk(18%, 0%, 10%, 28%)
Oklch
oklch(75.3% 0.045 159.9)

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

#7D9FA1

Slate Blue · LightSlateGray · Lake Green

HEX
#7D9FA1
RGB
rgb(125, 159, 161)
HSL
hsl(183, 16%, 56%)
HSB
hsb(183, 22%, 63%)
CMYK
cmyk(22%, 1%, 0%, 37%)
Oklch
oklch(67.8% 0.038 200.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7C898F

Slate Blue · LightSlateGray · Warm Gray

HEX
#7C898F
RGB
rgb(124, 137, 143)
HSL
hsl(199, 8%, 52%)
HSB
hsb(199, 13%, 56%)
CMYK
cmyk(13%, 4%, 0%, 44%)
Oklch
oklch(62.1% 0.018 227.1)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#313149

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#313149
RGB
rgb(49, 49, 73)
HSL
hsl(240, 20%, 24%)
HSB
hsb(240, 33%, 29%)
CMYK
cmyk(33%, 33%, 0%, 71%)
Oklch
oklch(32.4% 0.042 283.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCE0B2
D6B2E0

Analogous

D3E0B2
BCE0B2
B2E0BF

Triadic

BCE0B2
B2BCE0
E0B2BC

Split-Comp.

BCE0B2
BFB2E0
E0B2D3

Tetradic

BCE0B2
B2D3E0
D6B2E0
E0BFB2

Contrast Matrix WCAG 2.1 Contrast

BCE0B2
97B8A5
7D9FA1
7C898F
313149
—
1.5
Fail
2.0
Fail
2.5
Fail
8.7
AAA
1.5
Fail
—
1.3
Fail
1.7
Fail
5.8
AA
2.0
Fail
1.3
Fail
—
1.3
Fail
4.4
AA Large
2.5
Fail
1.7
Fail
1.3
Fail
—
3.5
AA Large
8.7
AAA
5.8
AA
4.4
AA Large
3.5
AA Large
—
White BG
1.5Fail
2.2Fail
2.9Fail
3.6AA Large
12.6AAA
Black BG
14.4AAA
9.7AAA
7.3AAA
5.8AA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCBD
A5A6AA
8C8CA1
82828E
313143

Deuteranopia

CAC7C0
A3A1AB
8A87A0
81808D
313142

Tritanopia

BEC6C8
99ADAE
7FA0A0
7D8C8C
313F3E

Achromatopsia

D0D0D0
ACACAC
959595
868686
343434

Shades & Tints Shades & Tints

#BCE0B2

Dark
Light

#97B8A5

Dark
Light

#7D9FA1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bce0b2;
  --color-2: #97b8a5;
  --color-3: #7d9fa1;
  --color-4: #7c898f;
  --color-5: #313149;
}

SCSS

$color-1: #bce0b2;
$color-2: #97b8a5;
$color-3: #7d9fa1;
$color-4: #7c898f;
$color-5: #313149;

TAILWIND

colors: {
  'brand-1': '#bce0b2',
  'brand-2': '#97b8a5',
  'brand-3': '#7d9fa1',
  'brand-4': '#7c898f',
  'brand-5': '#313149',
}

RGB Array

[188, 224, 178], [151, 184, 165], [125, 159, 161], [124, 137, 143], [49, 49, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #BCE0B2, #97B8A5, #7D9FA1, #7C898F, #313149 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: #bce0b2; --color-2: #97b8a5; --color-3: #7d9fa1; --color-4: #7c898f; --color-5: #313149. 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