#61AB9E + #82B7A7 + #A8BCA3 + #C4BF9F + #EDBB96 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#61AB9E

Mineral Blue · CadetBlue · Lake Green

HEX

#61AB9E

RGB

rgb(97, 171, 158)

HSL

hsl(169, 31%, 53%)

HSB

hsb(169, 43%, 67%)

CMYK

cmyk(43%, 0%, 8%, 33%)

Oklch

oklch(68.9% 0.077 181.3)

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

#82B7A7

Jade · DarkSeaGreen · Lake Green

HEX

#82B7A7

RGB

rgb(130, 183, 167)

HSL

hsl(162, 27%, 61%)

HSB

hsb(162, 29%, 72%)

CMYK

cmyk(29%, 0%, 9%, 28%)

Oklch

oklch(73.8% 0.060 173.9)

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

#A8BCA3

Celadon · DarkGray · Apple Green

HEX

#A8BCA3

RGB

rgb(168, 188, 163)

HSL

hsl(108, 16%, 69%)

HSB

hsb(108, 13%, 74%)

CMYK

cmyk(11%, 0%, 13%, 26%)

Oklch

oklch(77.3% 0.041 139.4)

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

#C4BF9F

Fresh Green · Tan · Sunflower

HEX

#C4BF9F

RGB

rgb(196, 191, 159)

HSL

hsl(52, 24%, 70%)

HSB

hsb(52, 19%, 77%)

CMYK

cmyk(0%, 3%, 19%, 23%)

Oklch

oklch(80.0% 0.044 100.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EDBB96

Apricot · BurlyWood · Peach Orange

HEX

#EDBB96

RGB

rgb(237, 187, 150)

HSL

hsl(26, 71%, 76%)

HSB

hsb(26, 37%, 93%)

CMYK

cmyk(0%, 21%, 37%, 7%)

Oklch

oklch(82.8% 0.076 58.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61AB9E

AC6270

Analogous

62AC7A

61AB9E

6295AC

Triadic

61AB9E

9F62AC

AC9F62

Split-Comp.

61AB9E

AC6295

AC7A62

Tetradic

61AB9E

7A62AC

AC6270

95AC62

Contrast Matrix WCAG 2.1 Contrast

61AB9E	82B7A7	A8BCA3	C4BF9F	EDBB96
—	1.2 Fail	1.3 Fail	1.4 Fail	1.6 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.6 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

2.3Fail

2.0Fail

1.9Fail

1.7Fail

Black BG

7.8AAA

9.3AAA

10.4AAA

11.3AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8182A1

9999AB

B1B1A9

C2C2A7

D7D79F

Deuteranopia

7D77A2

9692AC

B0AEAB

C2C3A9

DADEA1

Tritanopia

65A4A4

85AEAF

A9AEAF

C4ADAE

EAA6A8

Achromatopsia

939393

A5A5A5

B3B3B3

BDBDBD

C6C6C6

Shades & Tints Shades & Tints

#61AB9E

Dark

Light

#82B7A7

Dark

Light

#A8BCA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61ab9e;
  --color-2: #82b7a7;
  --color-3: #a8bca3;
  --color-4: #c4bf9f;
  --color-5: #edbb96;
}

SCSS

$color-1: #61ab9e;
$color-2: #82b7a7;
$color-3: #a8bca3;
$color-4: #c4bf9f;
$color-5: #edbb96;

TAILWIND

colors: {
  'brand-1': '#61ab9e',
  'brand-2': '#82b7a7',
  'brand-3': '#a8bca3',
  'brand-4': '#c4bf9f',
  'brand-5': '#edbb96',
}

RGB Array

[97, 171, 158], [130, 183, 167], [168, 188, 163], [196, 191, 159], [237, 187, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61AB9E, #82B7A7, #A8BCA3, #C4BF9F, #EDBB96 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: #61ab9e; --color-2: #82b7a7; --color-3: #a8bca3; --color-4: #c4bf9f; --color-5: #edbb96. 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