← Back to Editor

#C5D9D0 · #86A697 · #31767A · #165257 · #01292B

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

#C5D9D0

Jade · LightGray · Mint Green

HEX
#C5D9D0
RGB
rgb(197, 217, 208)
HSL
hsl(153, 21%, 81%)
HSB
hsb(153, 9%, 85%)
CMYK
cmyk(9%, 0%, 4%, 15%)
Oklch
oklch(86.8% 0.025 167.0)

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

#86A697

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#86A697
RGB
rgb(134, 166, 151)
HSL
hsl(152, 15%, 59%)
HSB
hsb(152, 19%, 65%)
CMYK
cmyk(19%, 0%, 9%, 35%)
Oklch
oklch(69.7% 0.042 165.1)

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

#31767A

Slate Blue · SeaGreen · Mint Ice

HEX
#31767A
RGB
rgb(49, 118, 122)
HSL
hsl(183, 43%, 34%)
HSB
hsb(183, 60%, 48%)
CMYK
cmyk(60%, 3%, 0%, 52%)
Oklch
oklch(52.4% 0.069 200.5)

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

#165257

Lake Blue · DarkSlateGray · Peacock Green

HEX
#165257
RGB
rgb(22, 82, 87)
HSL
hsl(185, 60%, 21%)
HSB
hsb(185, 75%, 34%)
CMYK
cmyk(75%, 6%, 0%, 66%)
Oklch
oklch(40.4% 0.060 203.1)

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

#01292B

Lake Blue · Black · Peacock Green

HEX
#01292B
RGB
rgb(1, 41, 43)
HSL
hsl(183, 95%, 9%)
HSB
hsb(183, 98%, 17%)
CMYK
cmyk(98%, 5%, 0%, 83%)
Oklch
oklch(25.6% 0.043 199.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5D9D0
D9C4CE

Analogous

C4D9C5
C5D9D0
C4D8D9

Triadic

C5D9D0
D0C4D9
D9D0C4

Split-Comp.

C5D9D0
D9C4D8
D9C5C4

Tetradic

C5D9D0
C5C4D9
D9C4CE
D8D9C4

Contrast Matrix WCAG 2.1 Contrast

C5D9D0
86A697
31767A
165257
01292B
—
1.8
Fail
3.5
AA Large
6.0
AA
10.5
AAA
1.8
Fail
—
2.0
Fail
3.3
AA Large
5.8
AA
3.5
AA Large
2.0
Fail
—
1.7
Fail
3.0
Fail
6.0
AA
3.3
AA Large
1.7
Fail
—
1.8
Fail
10.5
AAA
5.8
AA
3.0
Fail
1.8
Fail
—
White BG
1.5Fail
2.7Fail
5.2AA
8.8AAA
15.5AAA
Black BG
14.2AAA
7.9AAA
4.0AA Large
2.4Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECED2
94949B
4F4F79
303156
12132B

Deuteranopia

CDCBD3
92909C
4B4679
2D2856
100D2A

Tritanopia

C6D4D4
889D9E
347878
195555
032A2A

Achromatopsia

D2D2D2
9B9B9B
626262
414141
1D1D1D

Shades & Tints Shades & Tints

#C5D9D0

Dark
Light

#86A697

Dark
Light

#31767A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5d9d0;
  --color-2: #86a697;
  --color-3: #31767a;
  --color-4: #165257;
  --color-5: #01292b;
}

SCSS

$color-1: #c5d9d0;
$color-2: #86a697;
$color-3: #31767a;
$color-4: #165257;
$color-5: #01292b;

TAILWIND

colors: {
  'brand-1': '#c5d9d0',
  'brand-2': '#86a697',
  'brand-3': '#31767a',
  'brand-4': '#165257',
  'brand-5': '#01292b',
}

RGB Array

[197, 217, 208], [134, 166, 151], [49, 118, 122], [22, 82, 87], [1, 41, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5D9D0, #86A697, #31767A, #165257, #01292B 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: #c5d9d0; --color-2: #86a697; --color-3: #31767a; --color-4: #165257; --color-5: #01292b. 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