#61C3AF + #80C6B1 + #A0CAB4 + #BFCDB6 + #DED0B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#61C3AF

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#61C3AF

RGB

rgb(97, 195, 175)

HSL

hsl(168, 45%, 57%)

HSB

hsb(168, 50%, 76%)

CMYK

cmyk(50%, 0%, 10%, 24%)

Oklch

oklch(75.2% 0.098 178.4)

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

#80C6B1

Jade · MediumAquaMarine · Lake Green

HEX

#80C6B1

RGB

rgb(128, 198, 177)

HSL

hsl(162, 38%, 64%)

HSB

hsb(162, 35%, 78%)

CMYK

cmyk(35%, 0%, 11%, 22%)

Oklch

oklch(77.4% 0.077 173.3)

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

#A0CAB4

Celadon · Silver · Apple Green

HEX

#A0CAB4

RGB

rgb(160, 202, 180)

HSL

hsl(149, 28%, 71%)

HSB

hsb(149, 21%, 79%)

CMYK

cmyk(21%, 0%, 11%, 21%)

Oklch

oklch(80.3% 0.054 162.1)

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

#BFCDB6

Celadon · Silver · Apple Green

HEX

#BFCDB6

RGB

rgb(191, 205, 182)

HSL

hsl(97, 19%, 76%)

HSB

hsb(97, 11%, 80%)

CMYK

cmyk(7%, 0%, 11%, 20%)

Oklch

oklch(83.1% 0.035 133.0)

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

#DED0B8

Goose Yellow · Wheat · Peach Orange

HEX

#DED0B8

RGB

rgb(222, 208, 184)

HSL

hsl(38, 37%, 80%)

HSB

hsb(38, 17%, 87%)

CMYK

cmyk(0%, 6%, 17%, 13%)

Oklch

oklch(86.3% 0.036 81.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61C3AF

C36074

Analogous

60C37E

61C3AF

60A5C3

Triadic

61C3AF

AF60C3

C3AF60

Split-Comp.

61C3AF

C360A5

C37E60

Tetradic

61C3AF

7E60C3

C36074

A5C360

Contrast Matrix WCAG 2.1 Contrast

61C3AF	80C6B1	A0CAB4	BFCDB6	DED0B8
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.1Fail

2.0Fail

1.8Fail

1.7Fail

1.5Fail

Black BG

9.9AAA

10.6AAA

11.6AAA

12.6AAA

13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8CB4

9E9FB6

B2B3B9

C5C5BC

D8D8BE

Deuteranopia

867EB5

9A95B7

B0ADBB

C4C3BD

D9DABF

Tritanopia

66B8B9

84BABB

A2BEBE

C0C0C1

DDC2C3

Achromatopsia

A3A3A3

AFAFAF

BBBBBB

C6C6C6

D1D1D1

Shades & Tints Shades & Tints

#61C3AF

Dark

Light

#80C6B1

Dark

Light

#A0CAB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61c3af;
  --color-2: #80c6b1;
  --color-3: #a0cab4;
  --color-4: #bfcdb6;
  --color-5: #ded0b8;
}

SCSS

$color-1: #61c3af;
$color-2: #80c6b1;
$color-3: #a0cab4;
$color-4: #bfcdb6;
$color-5: #ded0b8;

TAILWIND

colors: {
  'brand-1': '#61c3af',
  'brand-2': '#80c6b1',
  'brand-3': '#a0cab4',
  'brand-4': '#bfcdb6',
  'brand-5': '#ded0b8',
}

RGB Array

[97, 195, 175], [128, 198, 177], [160, 202, 180], [191, 205, 182], [222, 208, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61C3AF, #80C6B1, #A0CAB4, #BFCDB6, #DED0B8 is ideal for: health products, baby brands, fresh-style blogs. 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: #61c3af; --color-2: #80c6b1; --color-3: #a0cab4; --color-4: #bfcdb6; --color-5: #ded0b8. 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. 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