#9CD6A2 + #C4CA9B + #E1A491 + #E47585 + #E83A76 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CD6A2

Celadon · LightGreen · Apple Green

HEX

#9CD6A2

RGB

rgb(156, 214, 162)

HSL

hsl(126, 41%, 73%)

HSB

hsb(126, 27%, 84%)

CMYK

cmyk(27%, 0%, 24%, 16%)

Oklch

oklch(82.3% 0.094 147.3)

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

#C4CA9B

Fresh Green · Tan · Sunflower

HEX

#C4CA9B

RGB

rgb(196, 202, 155)

HSL

hsl(68, 31%, 70%)

HSB

hsb(68, 23%, 79%)

CMYK

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

Oklch

oklch(82.2% 0.063 113.7)

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

#E1A491

Peach Pink · Tan · Coral Red

HEX

#E1A491

RGB

rgb(225, 164, 145)

HSL

hsl(14, 57%, 73%)

HSB

hsb(14, 36%, 88%)

CMYK

cmyk(0%, 27%, 36%, 12%)

Oklch

oklch(77.2% 0.078 38.0)

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

#E47585

Peach Pink · LightCoral · Coral Red

HEX

#E47585

RGB

rgb(228, 117, 133)

HSL

hsl(351, 67%, 68%)

HSB

hsb(351, 49%, 89%)

CMYK

cmyk(0%, 49%, 42%, 11%)

Oklch

oklch(69.3% 0.138 12.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E83A76

Dark Violet · MediumVioletRed · Rose Pink

HEX

#E83A76

RGB

rgb(232, 58, 118)

HSL

hsl(339, 79%, 57%)

HSB

hsb(339, 75%, 91%)

CMYK

cmyk(0%, 75%, 49%, 9%)

Oklch

oklch(62.7% 0.212 5.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CD6A2

D69ED1

Analogous

B5D69E

9CD6A2

9ED6C0

Triadic

9CD6A2

A49ED6

D6A49E

Split-Comp.

9CD6A2

C09ED6

D69EB5

Tetradic

9CD6A2

9EB5D6

D69ED1

D6C09E

Contrast Matrix WCAG 2.1 Contrast

9CD6A2	C4CA9B	E1A491	E47585	E83A76
—	1.0 Fail	1.3 Fail	1.7 Fail	2.4 Fail
1.0 Fail	—	1.2 Fail	1.7 Fail	2.3 Fail
1.3 Fail	1.2 Fail	—	1.4 Fail	1.9 Fail
1.7 Fail	1.7 Fail	1.4 Fail	—	1.4 Fail
2.4 Fail	2.3 Fail	1.9 Fail	1.4 Fail	—

White BG

1.7Fail

2.1Fail

2.9Fail

4.0AA Large

Black BG

12.6AAA

12.3AAA

9.9AAA

7.2AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B6AF

C7C7A6

C7C696

B4B381

9D9B67

Deuteranopia

B2ADB2

C6C6A9

CACF97

BAC380

A7B464

Tritanopia

9FB9BB

C4AFB1

DE999A

DE7E7D

DF5C5A

Achromatopsia

BFBFBF

C3C3C3

B4B4B4

989898

757575

Shades & Tints Shades & Tints

#9CD6A2

Dark

Light

#C4CA9B

Dark

Light

#E1A491

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cd6a2;
  --color-2: #c4ca9b;
  --color-3: #e1a491;
  --color-4: #e47585;
  --color-5: #e83a76;
}

SCSS

$color-1: #9cd6a2;
$color-2: #c4ca9b;
$color-3: #e1a491;
$color-4: #e47585;
$color-5: #e83a76;

TAILWIND

colors: {
  'brand-1': '#9cd6a2',
  'brand-2': '#c4ca9b',
  'brand-3': '#e1a491',
  'brand-4': '#e47585',
  'brand-5': '#e83a76',
}

RGB Array

[156, 214, 162], [196, 202, 155], [225, 164, 145], [228, 117, 133], [232, 58, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CD6A2, #C4CA9B, #E1A491, #E47585, #E83A76 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: #9cd6a2; --color-2: #c4ca9b; --color-3: #e1a491; --color-4: #e47585; --color-5: #e83a76. 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