← Back to Editor

#00B6BD · #53B9BD · #88BBBD · #93B6B8 · #B1BCBD

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 Library

Color Details Color Details

#00B6BD

Lake Blue · DarkTurquoise · Mint Ice

HEX
#00B6BD
RGB
rgb(0, 182, 189)
HSL
hsl(182, 100%, 37%)
HSB
hsb(182, 100%, 74%)
CMYK
cmyk(100%, 4%, 0%, 26%)
Oklch
oklch(70.5% 0.120 199.7)

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

#53B9BD

Slate Blue · MediumTurquoise · Lake Green

HEX
#53B9BD
RGB
rgb(83, 185, 189)
HSL
hsl(182, 45%, 53%)
HSB
hsb(182, 56%, 74%)
CMYK
cmyk(56%, 2%, 0%, 26%)
Oklch
oklch(72.7% 0.094 198.8)

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

#88BBBD

Sky Blue · DarkGray · Lake Green

HEX
#88BBBD
RGB
rgb(136, 187, 189)
HSL
hsl(182, 29%, 64%)
HSB
hsb(182, 28%, 74%)
CMYK
cmyk(28%, 1%, 0%, 26%)
Oklch
oklch(75.7% 0.054 199.1)

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

#93B6B8

Sky Blue · DarkGray · Lake Green

HEX
#93B6B8
RGB
rgb(147, 182, 184)
HSL
hsl(183, 21%, 65%)
HSB
hsb(183, 20%, 72%)
CMYK
cmyk(20%, 1%, 0%, 28%)
Oklch
oklch(75.1% 0.038 200.7)

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

#B1BCBD

Sky Blue · Silver · Pearl Gray

HEX
#B1BCBD
RGB
rgb(177, 188, 189)
HSL
hsl(185, 8%, 72%)
HSB
hsb(185, 6%, 74%)
CMYK
cmyk(6%, 1%, 0%, 26%)
Oklch
oklch(78.7% 0.012 203.4)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

00B6BD
BD0600

Analogous

00BD65
00B6BD
0058BD

Triadic

00B6BD
BD00B6
B6BD00

Split-Comp.

00B6BD
BD0058
BD6500

Tetradic

00B6BD
6500BD
BD0600
58BD00

Contrast Matrix WCAG 2.1 Contrast

00B6BD
53B9BD
88BBBD
93B6B8
B1BCBD
—
1.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
2.5Fail
2.3Fail
2.1Fail
2.2Fail
1.9Fail
Black BG
8.4AAA
9.0AAA
9.9AAA
9.6AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F50BB
7F80BC
9E9FBD
A2A2B8
B6B6BD

Deuteranopia

4437BB
7972BC
9B97BC
A09EB7
B5B4BD

Tritanopia

09BABA
58BBBB
8BBCBC
95B7B7
B2BDBD

Achromatopsia

808080
9B9B9B
ACACAC
ACACAC
B9B9B9

Shades & Tints Shades & Tints

#00B6BD

Dark
Light

#53B9BD

Dark
Light

#88BBBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #00b6bd;
  --color-2: #53b9bd;
  --color-3: #88bbbd;
  --color-4: #93b6b8;
  --color-5: #b1bcbd;
}

SCSS

$color-1: #00b6bd;
$color-2: #53b9bd;
$color-3: #88bbbd;
$color-4: #93b6b8;
$color-5: #b1bcbd;

TAILWIND

colors: {
  'brand-1': '#00b6bd',
  'brand-2': '#53b9bd',
  'brand-3': '#88bbbd',
  'brand-4': '#93b6b8',
  'brand-5': '#b1bcbd',
}

RGB Array

[0, 182, 189], [83, 185, 189], [136, 187, 189], [147, 182, 184], [177, 188, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #00B6BD, #53B9BD, #88BBBD, #93B6B8, #B1BCBD 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: #00b6bd; --color-2: #53b9bd; --color-3: #88bbbd; --color-4: #93b6b8; --color-5: #b1bcbd. 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