#ABDEB3 + #B9E1B4 + #C7E5B5 + #D5E8B6 + #E3EBB7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABDEB3

Celadon · Silver · Apple Green

HEX

#ABDEB3

RGB

rgb(171, 222, 179)

HSL

hsl(129, 44%, 77%)

HSB

hsb(129, 23%, 87%)

CMYK

cmyk(23%, 0%, 19%, 13%)

Oklch

oklch(85.4% 0.079 149.2)

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

#B9E1B4

Celadon · Silver · Apple Green

HEX

#B9E1B4

RGB

rgb(185, 225, 180)

HSL

hsl(113, 43%, 79%)

HSB

hsb(113, 20%, 88%)

CMYK

cmyk(18%, 0%, 20%, 12%)

Oklch

oklch(86.9% 0.074 142.0)

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

#C7E5B5

Celadon · LightGray · Apple Green

HEX

#C7E5B5

RGB

rgb(199, 229, 181)

HSL

hsl(98, 48%, 80%)

HSB

hsb(98, 21%, 90%)

CMYK

cmyk(13%, 0%, 21%, 10%)

Oklch

oklch(88.8% 0.072 133.9)

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

#D5E8B6

Willow Green · Wheat · Mint Green

HEX

#D5E8B6

RGB

rgb(213, 232, 182)

HSL

hsl(83, 52%, 81%)

HSB

hsb(83, 22%, 91%)

CMYK

cmyk(8%, 0%, 22%, 9%)

Oklch

oklch(90.4% 0.069 124.7)

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

#E3EBB7

Fresh Green · Wheat · Lemon Cream

HEX

#E3EBB7

RGB

rgb(227, 235, 183)

HSL

hsl(69, 57%, 82%)

HSB

hsb(69, 22%, 92%)

CMYK

cmyk(3%, 0%, 22%, 8%)

Oklch

oklch(92.1% 0.068 114.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABDEB3

DEABD6

Analogous

BDDEAB

ABDEB3

ABDECC

Triadic

ABDEB3

B2ABDE

DEB2AB

Split-Comp.

ABDEB3

CCABDE

DEABBD

Tetradic

ABDEB3

ABBDDE

DEABD6

DECCAB

Contrast Matrix WCAG 2.1 Contrast

ABDEB3	B9E1B4	C7E5B5	D5E8B6	E3EBB7
—	1.0 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.5Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

13.8AAA

14.5AAA

15.3AAA

16.0AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C2BD

CACBBF

D4D4C1

DDDDC2

E6E7C4

Deuteranopia

BEBAC0

C8C5C2

D2D0C3

DCDBC5

E6E5C7

Tritanopia

AEC6C7

BBC7C9

C8CACC

D6CCCE

E3CED0

Achromatopsia

CACACA

D0D0D0

D7D7D7

DDDDDD

E3E3E3

Shades & Tints Shades & Tints

#ABDEB3

Dark

Light

#B9E1B4

Dark

Light

#C7E5B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abdeb3;
  --color-2: #b9e1b4;
  --color-3: #c7e5b5;
  --color-4: #d5e8b6;
  --color-5: #e3ebb7;
}

SCSS

$color-1: #abdeb3;
$color-2: #b9e1b4;
$color-3: #c7e5b5;
$color-4: #d5e8b6;
$color-5: #e3ebb7;

TAILWIND

colors: {
  'brand-1': '#abdeb3',
  'brand-2': '#b9e1b4',
  'brand-3': '#c7e5b5',
  'brand-4': '#d5e8b6',
  'brand-5': '#e3ebb7',
}

RGB Array

[171, 222, 179], [185, 225, 180], [199, 229, 181], [213, 232, 182], [227, 235, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABDEB3, #B9E1B4, #C7E5B5, #D5E8B6, #E3EBB7 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: #abdeb3; --color-2: #b9e1b4; --color-3: #c7e5b5; --color-4: #d5e8b6; --color-5: #e3ebb7. 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