← Back to Editor

#B1F7D6 · #91CFDB · #97A5C9 · #8C869E · #746C73

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B1F7D6

Jade · LightBlue · Mint Green

HEX
#B1F7D6
RGB
rgb(177, 247, 214)
HSL
hsl(152, 81%, 83%)
HSB
hsb(152, 28%, 97%)
CMYK
cmyk(28%, 0%, 13%, 3%)
Oklch
oklch(92.1% 0.083 163.9)

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

#91CFDB

Sky Blue · SkyBlue · Lake Green

HEX
#91CFDB
RGB
rgb(145, 207, 219)
HSL
hsl(190, 51%, 71%)
HSB
hsb(190, 34%, 86%)
CMYK
cmyk(34%, 5%, 0%, 14%)
Oklch
oklch(81.7% 0.065 210.9)

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

#97A5C9

Azure · DarkGray · Cobalt Blue

HEX
#97A5C9
RGB
rgb(151, 165, 201)
HSL
hsl(223, 32%, 69%)
HSB
hsb(223, 25%, 79%)
CMYK
cmyk(25%, 18%, 0%, 21%)
Oklch
oklch(72.3% 0.055 268.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8C869E

Deep Indigo · LightSlateGray · Navy Blue

HEX
#8C869E
RGB
rgb(140, 134, 158)
HSL
hsl(255, 11%, 57%)
HSB
hsb(255, 15%, 62%)
CMYK
cmyk(11%, 15%, 0%, 38%)
Oklch
oklch(63.3% 0.036 296.8)

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

#746C73

Ink Gray · DimGray · Warm Gray

HEX
#746C73
RGB
rgb(116, 108, 115)
HSL
hsl(308, 4%, 44%)
HSB
hsb(308, 7%, 45%)
CMYK
cmyk(0%, 7%, 1%, 55%)
Oklch
oklch(54.1% 0.015 329.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1F7D6
F7B1D1

Analogous

B1F7B3
B1F7D6
B1F4F7

Triadic

B1F7D6
D6B1F7
F7D6B1

Split-Comp.

B1F7D6
F7B1F4
F7B3B1

Tetradic

B1F7D6
B3B1F7
F7B1D1
F4F7B1

Contrast Matrix WCAG 2.1 Contrast

B1F7D6
91CFDB
97A5C9
8C869E
746C73
—
1.4
Fail
2.0
Fail
2.8
Fail
4.1
AA Large
1.4
Fail
—
1.4
Fail
2.0
Fail
2.9
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
2.1
Fail
2.8
Fail
2.0
Fail
1.4
Fail
—
1.5
Fail
4.1
AA Large
2.9
Fail
2.1
Fail
1.5
Fail
—
White BG
1.2Fail
1.7Fail
2.5Fail
3.5AA Large
5.1AA
Black BG
17.1AAA
12.2AAA
8.5AAA
6.0AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFD0DE
ACACD8
9D9DC0
898998
717071

Deuteranopia

CBC6E0
A8A4D7
9C9BBE
8A8A97
717271

Tritanopia

B5E4E6
94D6D5
98B9B8
8C9493
747070

Achromatopsia

DEDEDE
BEBEBE
A5A5A5
8B8B8B
6F6F6F

Shades & Tints Shades & Tints

#B1F7D6

Dark
Light

#91CFDB

Dark
Light

#97A5C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1f7d6;
  --color-2: #91cfdb;
  --color-3: #97a5c9;
  --color-4: #8c869e;
  --color-5: #746c73;
}

SCSS

$color-1: #b1f7d6;
$color-2: #91cfdb;
$color-3: #97a5c9;
$color-4: #8c869e;
$color-5: #746c73;

TAILWIND

colors: {
  'brand-1': '#b1f7d6',
  'brand-2': '#91cfdb',
  'brand-3': '#97a5c9',
  'brand-4': '#8c869e',
  'brand-5': '#746c73',
}

RGB Array

[177, 247, 214], [145, 207, 219], [151, 165, 201], [140, 134, 158], [116, 108, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1F7D6, #91CFDB, #97A5C9, #8C869E, #746C73 is ideal for: corporate websites, product showcases, portfolios. 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: #b1f7d6; --color-2: #91cfdb; --color-3: #97a5c9; --color-4: #8c869e; --color-5: #746c73. 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. 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