← Back to Editor

#688281 · #77B8B4 · #C0DAB5 · #C5EBD2 · #E8F7CC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#688281

Mineral Blue · SlateGray · Mint Ice

HEX
#688281
RGB
rgb(104, 130, 129)
HSL
hsl(178, 11%, 46%)
HSB
hsb(178, 20%, 51%)
CMYK
cmyk(20%, 0%, 1%, 49%)
Oklch
oklch(58.6% 0.030 193.5)

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

#77B8B4

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#77B8B4
RGB
rgb(119, 184, 180)
HSL
hsl(176, 31%, 59%)
HSB
hsb(176, 35%, 72%)
CMYK
cmyk(35%, 0%, 2%, 28%)
Oklch
oklch(73.8% 0.067 190.9)

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

#C0DAB5

Celadon · Silver · Apple Green

HEX
#C0DAB5
RGB
rgb(192, 218, 181)
HSL
hsl(102, 33%, 78%)
HSB
hsb(102, 17%, 85%)
CMYK
cmyk(12%, 0%, 17%, 15%)
Oklch
oklch(85.9% 0.057 136.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C5EBD2

Celadon · LightGray · Mint Green

HEX
#C5EBD2
RGB
rgb(197, 235, 210)
HSL
hsl(141, 49%, 85%)
HSB
hsb(141, 16%, 92%)
CMYK
cmyk(16%, 0%, 11%, 8%)
Oklch
oklch(90.6% 0.052 156.4)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#E8F7CC

Willow Green · Beige · Mint Green

HEX
#E8F7CC
RGB
rgb(232, 247, 204)
HSL
hsl(81, 73%, 88%)
HSB
hsb(81, 17%, 97%)
CMYK
cmyk(6%, 0%, 17%, 3%)
Oklch
oklch(95.4% 0.058 123.1)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

688281
826869

Analogous

688274
688281
687682

Triadic

688281
816882
828168

Split-Comp.

688281
826876
827468

Tetradic

688281
746882
826869
768268

Contrast Matrix WCAG 2.1 Contrast

688281
77B8B4
C0DAB5
C5EBD2
E8F7CC
—
1.8
Fail
2.7
Fail
3.2
AA Large
3.6
AA Large
1.8
Fail
—
1.5
Fail
1.7
Fail
2.0
Fail
2.7
Fail
1.5
Fail
—
1.2
Fail
1.3
Fail
3.2
AA Large
1.7
Fail
1.2
Fail
—
1.1
Fail
3.6
AA Large
2.0
Fail
1.3
Fail
1.1
Fail
—
White BG
4.1AA Large
2.3Fail
1.5Fail
1.3Fail
1.1Fail
Black BG
5.1AA
9.3AAA
13.9AAA
16.2AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737381
9394B5
CBCBBE
D5D6D8
EEEFD6

Deuteranopia

727081
8F8BB5
CAC8C0
D3D0DA
EEECD9

Tritanopia

698181
7AB6B6
C1C5C7
C7DDDE
E9DFE0

Achromatopsia

7A7A7A
A4A4A4
CECECE
DDDDDD
EEEEEE

Shades & Tints Shades & Tints

#688281

Dark
Light

#77B8B4

Dark
Light

#C0DAB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #688281;
  --color-2: #77b8b4;
  --color-3: #c0dab5;
  --color-4: #c5ebd2;
  --color-5: #e8f7cc;
}

SCSS

$color-1: #688281;
$color-2: #77b8b4;
$color-3: #c0dab5;
$color-4: #c5ebd2;
$color-5: #e8f7cc;

TAILWIND

colors: {
  'brand-1': '#688281',
  'brand-2': '#77b8b4',
  'brand-3': '#c0dab5',
  'brand-4': '#c5ebd2',
  'brand-5': '#e8f7cc',
}

RGB Array

[104, 130, 129], [119, 184, 180], [192, 218, 181], [197, 235, 210], [232, 247, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #688281, #77B8B4, #C0DAB5, #C5EBD2, #E8F7CC is ideal for: health products, baby brands, fresh-style blogs, 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: #688281; --color-2: #77b8b4; --color-3: #c0dab5; --color-4: #c5ebd2; --color-5: #e8f7cc. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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