#ADD698 + #E0F58C + #C0D277 + #F38BAA + #BD789C · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ADD698

Celadon · LightGreen · Apple Green

HEX

#ADD698

RGB

rgb(173, 214, 152)

HSL

hsl(100, 43%, 72%)

HSB

hsb(100, 29%, 84%)

CMYK

cmyk(19%, 0%, 29%, 16%)

Oklch

oklch(83.1% 0.094 135.3)

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

#E0F58C

Willow Green · Khaki · Apple Green

HEX

#E0F58C

RGB

rgb(224, 245, 140)

HSL

hsl(72, 84%, 75%)

HSB

hsb(72, 43%, 96%)

CMYK

cmyk(9%, 0%, 43%, 4%)

Oklch

oklch(93.2% 0.132 118.3)

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

#C0D277

Willow Green · Tan · Apple Green

HEX

#C0D277

RGB

rgb(192, 210, 119)

HSL

hsl(72, 50%, 65%)

HSB

hsb(72, 43%, 82%)

CMYK

cmyk(9%, 0%, 43%, 18%)

Oklch

oklch(83.0% 0.118 118.2)

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

#F38BAA

Rouge · LightCoral · Rose Pink

HEX

#F38BAA

RGB

rgb(243, 139, 170)

HSL

hsl(342, 81%, 75%)

HSB

hsb(342, 43%, 95%)

CMYK

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

Oklch

oklch(75.6% 0.130 1.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BD789C

Mauve · DarkGray · Rose Pink

HEX

#BD789C

RGB

rgb(189, 120, 156)

HSL

hsl(329, 34%, 61%)

HSB

hsb(329, 37%, 74%)

CMYK

cmyk(0%, 37%, 17%, 26%)

Oklch

oklch(65.6% 0.098 347.5)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADD698

C299D6

Analogous

CCD699

ADD698

99D6A3

Triadic

ADD698

99ADD6

D699AD

Split-Comp.

ADD698

A399D6

D699CC

Tetradic

ADD698

99CCD6

C299D6

D6A399

Contrast Matrix WCAG 2.1 Contrast

ADD698	E0F58C	C0D277	F38BAA	BD789C
—	1.4 Fail	1.0 Fail	1.4 Fail	2.0 Fail
1.4 Fail	—	1.4 Fail	1.9 Fail	2.8 Fail
1.0 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
1.4 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
2.0 Fail	2.8 Fail	2.0 Fail	1.4 Fail	—

White BG

1.6Fail

1.2Fail

1.7Fail

2.3Fail

3.3AA Large

Black BG

12.8AAA

17.6AAA

12.7AAA

9.1AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFA7

E9E9A5

C8C88D

C6C5A2

9F9F93

Deuteranopia

BCB9AB

E8E6AC

C7C592

CCD4A1

A3A891

Tritanopia

AFB3B5

E1B9BE

C19EA2

EE9D9B

BA8C8B

Achromatopsia

C3C3C3

E3E3E3

C2C2C2

AEAEAE

919191

Shades & Tints Shades & Tints

#ADD698

Dark

Light

#E0F58C

Dark

Light

#C0D277

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #add698;
  --color-2: #e0f58c;
  --color-3: #c0d277;
  --color-4: #f38baa;
  --color-5: #bd789c;
}

SCSS

$color-1: #add698;
$color-2: #e0f58c;
$color-3: #c0d277;
$color-4: #f38baa;
$color-5: #bd789c;

TAILWIND

colors: {
  'brand-1': '#add698',
  'brand-2': '#e0f58c',
  'brand-3': '#c0d277',
  'brand-4': '#f38baa',
  'brand-5': '#bd789c',
}

RGB Array

[173, 214, 152], [224, 245, 140], [192, 210, 119], [243, 139, 170], [189, 120, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #ADD698, #E0F58C, #C0D277, #F38BAA, #BD789C 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: #add698; --color-2: #e0f58c; --color-3: #c0d277; --color-4: #f38baa; --color-5: #bd789c. 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 muted-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