#C5EAC9 + #9FD7BE + #F8CC9D + #C0CA8E + #57906D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5EAC9

Celadon · LightGray · Mint Green

HEX

#C5EAC9

RGB

rgb(197, 234, 201)

HSL

hsl(126, 47%, 85%)

HSB

hsb(126, 16%, 92%)

CMYK

cmyk(16%, 0%, 14%, 8%)

Oklch

oklch(90.2% 0.059 148.1)

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

#9FD7BE

Jade · Silver · Apple Green

HEX

#9FD7BE

RGB

rgb(159, 215, 190)

HSL

hsl(153, 41%, 73%)

HSB

hsb(153, 26%, 84%)

CMYK

cmyk(26%, 0%, 12%, 16%)

Oklch

oklch(83.4% 0.068 165.5)

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

#F8CC9D

Goose Yellow · Wheat · Peach Orange

HEX

#F8CC9D

RGB

rgb(248, 204, 157)

HSL

hsl(31, 87%, 79%)

HSB

hsb(31, 37%, 97%)

CMYK

cmyk(0%, 18%, 37%, 3%)

Oklch

oklch(87.2% 0.079 68.3)

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

#C0CA8E

Willow Green · Tan · Apple Green

HEX

#C0CA8E

RGB

rgb(192, 202, 142)

HSL

hsl(70, 36%, 67%)

HSB

hsb(70, 30%, 79%)

CMYK

cmyk(5%, 0%, 30%, 21%)

Oklch

oklch(81.7% 0.080 115.9)

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

#57906D

Celadon · DimGray · Olive Green

HEX

#57906D

RGB

rgb(87, 144, 109)

HSL

hsl(143, 25%, 45%)

HSB

hsb(143, 40%, 56%)

CMYK

cmyk(40%, 0%, 24%, 44%)

Oklch

oklch(60.4% 0.081 156.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5EAC9

EBC7E7

Analogous

D5EBC7

C5EAC9

C7EBDC

Triadic

C5EAC9

CAC7EB

EBCAC7

Split-Comp.

C5EAC9

DCC7EB

EBC7D5

Tetradic

C5EAC9

C7D5EB

EBC7E7

EBDCC7

Contrast Matrix WCAG 2.1 Contrast

C5EAC9	9FD7BE	F8CC9D	C0CA8E	57906D
—	1.2 Fail	1.1 Fail	1.3 Fail	2.8 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	2.3 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	2.5 Fail
1.3 Fail	1.1 Fail	1.2 Fail	—	2.2 Fail
2.8 Fail	2.3 Fail	2.5 Fail	2.2 Fail	—

White BG

1.3Fail

1.6Fail

1.5Fail

1.7Fail

3.7AA Large

Black BG

16.0AAA

12.9AAA

14.1AAA

12.1AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5D1

B7B8C4

E5E5A8

C4C49D

707075

Deuteranopia

D3D0D3

B4B0C6

E8EBAB

C4C3A0

6C6878

Tritanopia

C7D7D9

A2C9CA

F6B1B3

C0A8AB

5A7C7E

Achromatopsia

DBDBDB

C3C3C3

D4D4D4

C0C0C0

7B7B7B

Shades & Tints Shades & Tints

#C5EAC9

Dark

Light

#9FD7BE

Dark

Light

#F8CC9D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5eac9;
  --color-2: #9fd7be;
  --color-3: #f8cc9d;
  --color-4: #c0ca8e;
  --color-5: #57906d;
}

SCSS

$color-1: #c5eac9;
$color-2: #9fd7be;
$color-3: #f8cc9d;
$color-4: #c0ca8e;
$color-5: #57906d;

TAILWIND

colors: {
  'brand-1': '#c5eac9',
  'brand-2': '#9fd7be',
  'brand-3': '#f8cc9d',
  'brand-4': '#c0ca8e',
  'brand-5': '#57906d',
}

RGB Array

[197, 234, 201], [159, 215, 190], [248, 204, 157], [192, 202, 142], [87, 144, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5EAC9, #9FD7BE, #F8CC9D, #C0CA8E, #57906D 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: #c5eac9; --color-2: #9fd7be; --color-3: #f8cc9d; --color-4: #c0ca8e; --color-5: #57906d. 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