← Back to Editor

#B1D9CD · #04D4DB · #60A8A1 · #66382F · #2D382A

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 LibraryData Visualization

Color Details Color Details

#B1D9CD

Jade · LightBlue · Glacier Blue

HEX
#B1D9CD
RGB
rgb(177, 217, 205)
HSL
hsl(162, 34%, 77%)
HSB
hsb(162, 18%, 85%)
CMYK
cmyk(18%, 0%, 6%, 15%)
Oklch
oklch(85.3% 0.045 175.0)

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

#04D4DB

Lake Blue · DarkTurquoise · Mint Ice

HEX
#04D4DB
RGB
rgb(4, 212, 219)
HSL
hsl(182, 96%, 44%)
HSB
hsb(182, 98%, 86%)
CMYK
cmyk(98%, 3%, 0%, 14%)
Oklch
oklch(79.0% 0.134 199.0)

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

#60A8A1

Mineral Blue · CadetBlue · Lake Green

HEX
#60A8A1
RGB
rgb(96, 168, 161)
HSL
hsl(174, 29%, 52%)
HSB
hsb(174, 43%, 66%)
CMYK
cmyk(43%, 0%, 4%, 34%)
Oklch
oklch(68.2% 0.073 187.6)

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

#66382F

Crimson · DarkOliveGreen · Wine Red

HEX
#66382F
RGB
rgb(102, 56, 47)
HSL
hsl(10, 37%, 29%)
HSB
hsb(10, 54%, 40%)
CMYK
cmyk(0%, 45%, 54%, 60%)
Oklch
oklch(39.6% 0.068 32.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#2D382A

Celadon · DarkSlateGray · Dark Green

HEX
#2D382A
RGB
rgb(45, 56, 42)
HSL
hsl(107, 14%, 19%)
HSB
hsb(107, 25%, 22%)
CMYK
cmyk(20%, 0%, 25%, 78%)
Oklch
oklch(32.6% 0.028 139.0)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1D9CD
D8B0BC

Analogous

B0D8B8
B1D9CD
B0D0D8

Triadic

B1D9CD
CCB0D8
D8CCB0

Split-Comp.

B1D9CD
D8B0D0
D8B8B0

Tetradic

B1D9CD
B8B0D8
D8B0BC
D0D8B0

Contrast Matrix WCAG 2.1 Contrast

B1D9CD
04D4DB
60A8A1
66382F
2D382A
—
1.2
Fail
1.8
Fail
6.3
AA
8.0
AAA
1.2
Fail
—
1.5
Fail
5.3
AA
6.7
AA
1.8
Fail
1.5
Fail
—
3.5
AA Large
4.5
AA Large
6.3
AA
5.3
AA
3.5
AA Large
—
1.3
Fail
8.0
AAA
6.7
AA
4.5
AA Large
1.3
Fail
—
White BG
1.5Fail
1.8Fail
2.8Fail
9.7AAA
12.3AAA
Black BG
13.7AAA
11.4AAA
7.6AAA
2.2Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3D0
5E60D9
7F80A3
525231
32322D

Deuteranopia

C0BDD1
5242D9
7B76A3
555832
31302E

Tritanopia

B3D2D3
0ED8D8
64A4A4
643333
2E3031

Achromatopsia

CCCCCC
979797
929292
454545
333333

Shades & Tints Shades & Tints

#B1D9CD

Dark
Light

#04D4DB

Dark
Light

#60A8A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1d9cd;
  --color-2: #04d4db;
  --color-3: #60a8a1;
  --color-4: #66382f;
  --color-5: #2d382a;
}

SCSS

$color-1: #b1d9cd;
$color-2: #04d4db;
$color-3: #60a8a1;
$color-4: #66382f;
$color-5: #2d382a;

TAILWIND

colors: {
  'brand-1': '#b1d9cd',
  'brand-2': '#04d4db',
  'brand-3': '#60a8a1',
  'brand-4': '#66382f',
  'brand-5': '#2d382a',
}

RGB Array

[177, 217, 205], [4, 212, 219], [96, 168, 161], [102, 56, 47], [45, 56, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1D9CD, #04D4DB, #60A8A1, #66382F, #2D382A 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: #b1d9cd; --color-2: #04d4db; --color-3: #60a8a1; --color-4: #66382f; --color-5: #2d382a. 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