← Back to Editor

#B2C2B0 · #5CAB9F · #06948D · #14525E · #220F2E

A 5-color palette 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

#B2C2B0

Celadon · Silver · Apple Green

HEX
#B2C2B0
RGB
rgb(178, 194, 176)
HSL
hsl(113, 13%, 73%)
HSB
hsb(113, 9%, 76%)
CMYK
cmyk(8%, 0%, 9%, 24%)
Oklch
oklch(79.7% 0.031 142.1)

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

#5CAB9F

Mineral Blue · CadetBlue · Lake Green

HEX
#5CAB9F
RGB
rgb(92, 171, 159)
HSL
hsl(171, 32%, 52%)
HSB
hsb(171, 46%, 67%)
CMYK
cmyk(46%, 0%, 7%, 33%)
Oklch
oklch(68.7% 0.080 182.9)

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

#06948D

Mineral Blue · Teal · Mint Ice

HEX
#06948D
RGB
rgb(6, 148, 141)
HSL
hsl(177, 92%, 30%)
HSB
hsb(177, 96%, 58%)
CMYK
cmyk(96%, 0%, 5%, 42%)
Oklch
oklch(60.1% 0.103 188.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#14525E

Lake Blue · DarkSlateGray · Peacock Green

HEX
#14525E
RGB
rgb(20, 82, 94)
HSL
hsl(190, 65%, 22%)
HSB
hsb(190, 79%, 37%)
CMYK
cmyk(79%, 13%, 0%, 63%)
Oklch
oklch(40.6% 0.063 213.6)

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

#220F2E

Royal Purple · Black · Dark Purple

HEX
#220F2E
RGB
rgb(34, 15, 46)
HSL
hsl(277, 51%, 12%)
HSB
hsb(277, 67%, 18%)
CMYK
cmyk(26%, 67%, 0%, 82%)
Oklch
oklch(21.4% 0.062 310.5)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2C2B0
C1B1C3

Analogous

BCC3B1
B2C2B0
B1C3B8

Triadic

B2C2B0
B1B3C3
C3B1B3

Split-Comp.

B2C2B0
B8B1C3
C3B1BC

Tetradic

B2C2B0
B1BCC3
C1B1C3
C3B8B1

Contrast Matrix WCAG 2.1 Contrast

B2C2B0
5CAB9F
06948D
14525E
220F2E
—
1.4
Fail
2.0
Fail
4.7
AA
9.6
AAA
1.4
Fail
—
1.4
Fail
3.2
AA Large
6.6
AA
2.0
Fail
1.4
Fail
—
2.3
Fail
4.8
AA
4.7
AA
3.2
AA Large
2.3
Fail
—
2.0
Fail
9.6
AAA
6.6
AA
4.8
AA
2.0
Fail
—
White BG
1.9Fail
2.7Fail
3.7AA Large
8.8AAA
17.9AAA
Black BG
11.2AAA
7.8AAA
5.6AA
2.4Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9B4
7E7FA2
43458F
2F2F5B
1A1A26

Deuteranopia

B8B7B5
7A74A3
3B318F
2B275A
1B1C25

Tritanopia

B3B8B9
60A4A5
0D9090
175958
21211F

Achromatopsia

BBBBBB
929292
696969
414141
181818

Shades & Tints Shades & Tints

#B2C2B0

Dark
Light

#5CAB9F

Dark
Light

#06948D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2c2b0;
  --color-2: #5cab9f;
  --color-3: #06948d;
  --color-4: #14525e;
  --color-5: #220f2e;
}

SCSS

$color-1: #b2c2b0;
$color-2: #5cab9f;
$color-3: #06948d;
$color-4: #14525e;
$color-5: #220f2e;

TAILWIND

colors: {
  'brand-1': '#b2c2b0',
  'brand-2': '#5cab9f',
  'brand-3': '#06948d',
  'brand-4': '#14525e',
  'brand-5': '#220f2e',
}

RGB Array

[178, 194, 176], [92, 171, 159], [6, 148, 141], [20, 82, 94], [34, 15, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2C2B0, #5CAB9F, #06948D, #14525E, #220F2E is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b2c2b0; --color-2: #5cab9f; --color-3: #06948d; --color-4: #14525e; --color-5: #220f2e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 tech, SaaS, healthcare, eco industries. 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