#4ABA98 + #90CD92 + #D0DE8C + #C7D49F + #B7C2AE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#4ABA98

Mineral Blue · CadetBlue · Lake Green

HEX

#4ABA98

RGB

rgb(74, 186, 152)

HSL

hsl(162, 45%, 51%)

HSB

hsb(162, 60%, 73%)

CMYK

cmyk(60%, 0%, 18%, 27%)

Oklch

oklch(71.5% 0.114 169.9)

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

#90CD92

Celadon · DarkSeaGreen · Apple Green

HEX

#90CD92

RGB

rgb(144, 205, 146)

HSL

hsl(122, 38%, 68%)

HSB

hsb(122, 30%, 80%)

CMYK

cmyk(30%, 0%, 29%, 20%)

Oklch

oklch(79.1% 0.104 145.3)

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

#D0DE8C

Willow Green · Khaki · Apple Green

HEX

#D0DE8C

RGB

rgb(208, 222, 140)

HSL

hsl(70, 55%, 71%)

HSB

hsb(70, 37%, 87%)

CMYK

cmyk(6%, 0%, 37%, 13%)

Oklch

oklch(87.1% 0.106 116.6)

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

#C7D49F

Willow Green · Tan · Apple Green

HEX

#C7D49F

RGB

rgb(199, 212, 159)

HSL

hsl(75, 38%, 73%)

HSB

hsb(75, 25%, 83%)

CMYK

cmyk(6%, 0%, 25%, 17%)

Oklch

oklch(84.7% 0.072 119.2)

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

#B7C2AE

Celadon · Silver · Apple Green

HEX

#B7C2AE

RGB

rgb(183, 194, 174)

HSL

hsl(93, 14%, 72%)

HSB

hsb(93, 10%, 76%)

CMYK

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

Oklch

oklch(80.0% 0.030 130.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4ABA98

BA4A6C

Analogous

4ABA60

4ABA98

4AA4BA

Triadic

4ABA98

994ABA

BA994A

Split-Comp.

4ABA98

BA4AA4

BA604A

Tetradic

4ABA98

604ABA

BA4A6C

A4BA4A

Contrast Matrix WCAG 2.1 Contrast

4ABA98	90CD92	D0DE8C	C7D49F	B7C2AE
—	1.3 Fail	1.7 Fail	1.5 Fail	1.3 Fail
1.3 Fail	—	1.3 Fail	1.2 Fail	1.0 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.3 Fail	1.0 Fail	1.3 Fail	1.2 Fail	—

White BG

2.4Fail

1.9Fail

1.4Fail

1.6Fail

1.9Fail

Black BG

8.8AAA

11.3AAA

14.5AAA

13.3AAA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7CA0

AAABA0

D6D6A0

CDCDAC

BCBCB3

Deuteranopia

746CA2

A7A2A4

D5D4A5

CCCBAF

BBBAB4

Tritanopia

50A7A8

93ACAE

D1B0B3

C8B6B8

B8B7B8

Achromatopsia

959595

B4B4B4

D0D0D0

CACACA

BCBCBC

Shades & Tints Shades & Tints

#4ABA98

Dark

Light

#90CD92

Dark

Light

#D0DE8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4aba98;
  --color-2: #90cd92;
  --color-3: #d0de8c;
  --color-4: #c7d49f;
  --color-5: #b7c2ae;
}

SCSS

$color-1: #4aba98;
$color-2: #90cd92;
$color-3: #d0de8c;
$color-4: #c7d49f;
$color-5: #b7c2ae;

TAILWIND

colors: {
  'brand-1': '#4aba98',
  'brand-2': '#90cd92',
  'brand-3': '#d0de8c',
  'brand-4': '#c7d49f',
  'brand-5': '#b7c2ae',
}

RGB Array

[74, 186, 152], [144, 205, 146], [208, 222, 140], [199, 212, 159], [183, 194, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4ABA98, #90CD92, #D0DE8C, #C7D49F, #B7C2AE 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: #4aba98; --color-2: #90cd92; --color-3: #d0de8c; --color-4: #c7d49f; --color-5: #b7c2ae. 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