#5CA19E + #9FD1C5 + #D9E5B3 + #FBF0C2 + #CF968D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5CA19E

Mineral Blue · CadetBlue · Mint Ice

HEX

#5CA19E

RGB

rgb(92, 161, 158)

HSL

hsl(177, 27%, 50%)

HSB

hsb(177, 43%, 63%)

CMYK

cmyk(43%, 0%, 2%, 37%)

Oklch

oklch(66.3% 0.070 192.0)

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

#9FD1C5

Jade · LightSteelBlue · Lake Green

HEX

#9FD1C5

RGB

rgb(159, 209, 197)

HSL

hsl(166, 35%, 72%)

HSB

hsb(166, 24%, 82%)

CMYK

cmyk(24%, 0%, 6%, 18%)

Oklch

oklch(82.2% 0.055 178.5)

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

#D9E5B3

Willow Green · Wheat · Apple Green

HEX

#D9E5B3

RGB

rgb(217, 229, 179)

HSL

hsl(74, 49%, 80%)

HSB

hsb(74, 22%, 90%)

CMYK

cmyk(5%, 0%, 22%, 10%)

Oklch

oklch(90.0% 0.067 118.7)

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

#FBF0C2

Goose Yellow · Bisque · Lemon Cream

HEX

#FBF0C2

RGB

rgb(251, 240, 194)

HSL

hsl(48, 88%, 87%)

HSB

hsb(48, 23%, 98%)

CMYK

cmyk(0%, 4%, 23%, 2%)

Oklch

oklch(95.2% 0.061 96.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#CF968D

Peach Pink · Tan · Coral Red

HEX

#CF968D

RGB

rgb(207, 150, 141)

HSL

hsl(8, 41%, 68%)

HSB

hsb(8, 32%, 81%)

CMYK

cmyk(0%, 28%, 32%, 19%)

Oklch

oklch(72.6% 0.071 29.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5CA19E

A25D61

Analogous

5DA27C

5CA19E

5D83A2

Triadic

5CA19E

9E5DA2

A29E5D

Split-Comp.

5CA19E

A25D83

A27C5D

Tetradic

5CA19E

7C5DA2

A25D61

83A25D

Contrast Matrix WCAG 2.1 Contrast

5CA19E	9FD1C5	D9E5B3	FBF0C2	CF968D
—	1.8 Fail	2.2 Fail	2.6 Fail	1.2 Fail
1.8 Fail	—	1.3 Fail	1.5 Fail	1.5 Fail
2.2 Fail	1.3 Fail	—	1.2 Fail	1.9 Fail
2.6 Fail	1.5 Fail	1.2 Fail	—	2.2 Fail
1.2 Fail	1.5 Fail	1.9 Fail	2.2 Fail	—

White BG

3.0Fail

1.7Fail

1.3Fail

1.1Fail

2.5Fail

Black BG

7.0AAA

12.4AAA

15.8AAA

18.3AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A9F

B5B5C8

DEDEBF

F6F6CD

B6B68F

Deuteranopia

76719F

B2AEC9

DEDDC2

F7F8D0

BABE90

Tritanopia

5F9F9F

A1CACB

DAC9CB

FAD6D8

CC9191

Achromatopsia

8C8C8C

C1C1C1

DCDCDC

EEEEEE

A6A6A6

Shades & Tints Shades & Tints

#5CA19E

Dark

Light

#9FD1C5

Dark

Light

#D9E5B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5ca19e;
  --color-2: #9fd1c5;
  --color-3: #d9e5b3;
  --color-4: #fbf0c2;
  --color-5: #cf968d;
}

SCSS

$color-1: #5ca19e;
$color-2: #9fd1c5;
$color-3: #d9e5b3;
$color-4: #fbf0c2;
$color-5: #cf968d;

TAILWIND

colors: {
  'brand-1': '#5ca19e',
  'brand-2': '#9fd1c5',
  'brand-3': '#d9e5b3',
  'brand-4': '#fbf0c2',
  'brand-5': '#cf968d',
}

RGB Array

[92, 161, 158], [159, 209, 197], [217, 229, 179], [251, 240, 194], [207, 150, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5CA19E, #9FD1C5, #D9E5B3, #FBF0C2, #CF968D 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: #5ca19e; --color-2: #9fd1c5; --color-3: #d9e5b3; --color-4: #fbf0c2; --color-5: #cf968d. 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