← Back to Editor

#B1D9CD · #538890 · #255F6A · #83A37A · #B17643

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

#538890

Slate Blue · CadetBlue · Mint Ice

HEX
#538890
RGB
rgb(83, 136, 144)
HSL
hsl(188, 27%, 45%)
HSB
hsb(188, 42%, 56%)
CMYK
cmyk(42%, 6%, 0%, 44%)
Oklch
oklch(59.3% 0.058 207.9)

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

#255F6A

Slate Blue · DarkSlateGray · Mint Ice

HEX
#255F6A
RGB
rgb(37, 95, 106)
HSL
hsl(190, 48%, 28%)
HSB
hsb(190, 65%, 42%)
CMYK
cmyk(65%, 10%, 0%, 58%)
Oklch
oklch(45.2% 0.062 212.1)

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

#83A37A

Celadon · DarkSeaGreen · Olive Green

HEX
#83A37A
RGB
rgb(131, 163, 122)
HSL
hsl(107, 18%, 56%)
HSB
hsb(107, 25%, 64%)
CMYK
cmyk(20%, 0%, 25%, 36%)
Oklch
oklch(68.0% 0.069 138.9)

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

#B17643

Tangerine · Sienna · Amber Brown

HEX
#B17643
RGB
rgb(177, 118, 67)
HSL
hsl(28, 45%, 48%)
HSB
hsb(28, 62%, 69%)
CMYK
cmyk(0%, 33%, 62%, 31%)
Oklch
oklch(61.7% 0.100 60.1)

Traditional「Tangerine」· Paint「Amber Brown」· 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
538890
255F6A
83A37A
B17643
—
2.6
Fail
4.7
AA
1.8
Fail
2.5
Fail
2.6
Fail
—
1.8
Fail
1.4
Fail
1.0
Fail
4.7
AA
1.8
Fail
—
2.6
Fail
1.9
Fail
1.8
Fail
1.4
Fail
2.6
Fail
—
1.4
Fail
2.5
Fail
1.0
Fail
1.9
Fail
1.4
Fail
—
White BG
1.5Fail
4.0AA Large
7.2AAA
2.8Fail
3.8AA Large
Black BG
13.7AAA
5.3AA
2.9Fail
7.5AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3D0
6A6A8E
3E3F67
919184
97974F

Deuteranopia

C0BDD1
67638E
3B3667
8F8D86
9B9F52

Tritanopia

B3D2D3
568D8C
286565
858C8D
AE595B

Achromatopsia

CCCCCC
797979
4F4F4F
959595
828282

Shades & Tints Shades & Tints

#B1D9CD

Dark
Light

#538890

Dark
Light

#255F6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1d9cd;
  --color-2: #538890;
  --color-3: #255f6a;
  --color-4: #83a37a;
  --color-5: #b17643;
}

SCSS

$color-1: #b1d9cd;
$color-2: #538890;
$color-3: #255f6a;
$color-4: #83a37a;
$color-5: #b17643;

TAILWIND

colors: {
  'brand-1': '#b1d9cd',
  'brand-2': '#538890',
  'brand-3': '#255f6a',
  'brand-4': '#83a37a',
  'brand-5': '#b17643',
}

RGB Array

[177, 217, 205], [83, 136, 144], [37, 95, 106], [131, 163, 122], [177, 118, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1D9CD, #538890, #255F6A, #83A37A, #B17643 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: #538890; --color-3: #255f6a; --color-4: #83a37a; --color-5: #b17643. 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