← Back to Editor

#B3EDDF · #BDE9B6 · #A4C191 · #67706D · #27303F

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

#B3EDDF

Jade · LightBlue · Glacier Blue

HEX
#B3EDDF
RGB
rgb(179, 237, 223)
HSL
hsl(166, 62%, 82%)
HSB
hsb(166, 24%, 93%)
CMYK
cmyk(24%, 0%, 6%, 7%)
Oklch
oklch(90.3% 0.062 178.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#BDE9B6

Emerald · Silver · Mint Green

HEX
#BDE9B6
RGB
rgb(189, 233, 182)
HSL
hsl(112, 54%, 81%)
HSB
hsb(112, 22%, 91%)
CMYK
cmyk(19%, 0%, 22%, 9%)
Oklch
oklch(89.0% 0.083 141.2)

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

#A4C191

Celadon · DarkSeaGreen · Apple Green

HEX
#A4C191
RGB
rgb(164, 193, 145)
HSL
hsl(96, 28%, 66%)
HSB
hsb(96, 25%, 76%)
CMYK
cmyk(15%, 0%, 25%, 24%)
Oklch
oklch(77.7% 0.073 133.3)

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

#67706D

Ink Gray · DimGray · Warm Gray

HEX
#67706D
RGB
rgb(103, 112, 109)
HSL
hsl(160, 4%, 42%)
HSB
hsb(160, 8%, 44%)
CMYK
cmyk(8%, 0%, 3%, 56%)
Oklch
oklch(53.7% 0.012 173.9)

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

#27303F

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#27303F
RGB
rgb(39, 48, 63)
HSL
hsl(218, 24%, 20%)
HSB
hsb(218, 38%, 25%)
CMYK
cmyk(38%, 24%, 0%, 75%)
Oklch
oklch(30.7% 0.030 260.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3EDDF
EEB5C2

Analogous

B5EEC4
B3EDDF
B5DEEE

Triadic

B3EDDF
E0B5EE
EEE0B5

Split-Comp.

B3EDDF
EEB5DE
EEC4B5

Tetradic

B3EDDF
C4B5EE
EEB5C2
DEEEB5

Contrast Matrix WCAG 2.1 Contrast

B3EDDF
BDE9B6
A4C191
67706D
27303F
—
1.0
Fail
1.5
Fail
3.9
AA Large
10.2
AAA
1.0
Fail
—
1.5
Fail
3.8
AA Large
9.8
AAA
1.5
Fail
1.5
Fail
—
2.6
Fail
6.7
AA
3.9
AA Large
3.8
AA Large
2.6
Fail
—
2.6
Fail
10.2
AAA
9.8
AAA
6.7
AA
2.6
Fail
—
White BG
1.3Fail
1.4Fail
2.0Fail
5.1AA
13.3AAA
Black BG
16.1AAA
15.5AAA
10.6AAA
4.1AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDE2
D0D0C2
B1B19D
6B6B6E
2B2B3B

Deuteranopia

C9C4E3
CECAC5
AFAD9F
6A6A6E
2A2A3A

Tritanopia

B6E5E6
BFCCCE
A5A6A8
676E6E
273938

Achromatopsia

DADADA
D6D6D6
B3B3B3
6D6D6D
2F2F2F

Shades & Tints Shades & Tints

#B3EDDF

Dark
Light

#BDE9B6

Dark
Light

#A4C191

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3eddf;
  --color-2: #bde9b6;
  --color-3: #a4c191;
  --color-4: #67706d;
  --color-5: #27303f;
}

SCSS

$color-1: #b3eddf;
$color-2: #bde9b6;
$color-3: #a4c191;
$color-4: #67706d;
$color-5: #27303f;

TAILWIND

colors: {
  'brand-1': '#b3eddf',
  'brand-2': '#bde9b6',
  'brand-3': '#a4c191',
  'brand-4': '#67706d',
  'brand-5': '#27303f',
}

RGB Array

[179, 237, 223], [189, 233, 182], [164, 193, 145], [103, 112, 109], [39, 48, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3EDDF, #BDE9B6, #A4C191, #67706D, #27303F is ideal for: 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: #b3eddf; --color-2: #bde9b6; --color-3: #a4c191; --color-4: #67706d; --color-5: #27303f. 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 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