#A2E3C7 + #B5DFBE + #C7DAB5 + #DAD5AC + #ECD1A2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A2E3C7

Jade · LightBlue · Apple Green

HEX

#A2E3C7

RGB

rgb(162, 227, 199)

HSL

hsl(154, 54%, 76%)

HSB

hsb(154, 29%, 89%)

CMYK

cmyk(29%, 0%, 12%, 11%)

Oklch

oklch(86.4% 0.077 166.1)

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

#B5DFBE

Celadon · Silver · Apple Green

HEX

#B5DFBE

RGB

rgb(181, 223, 190)

HSL

hsl(133, 40%, 79%)

HSB

hsb(133, 19%, 87%)

CMYK

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

Oklch

oklch(86.5% 0.063 151.3)

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

#C7DAB5

Celadon · Silver · Apple Green

HEX

#C7DAB5

RGB

rgb(199, 218, 181)

HSL

hsl(91, 33%, 78%)

HSB

hsb(91, 17%, 85%)

CMYK

cmyk(9%, 0%, 17%, 15%)

Oklch

oklch(86.4% 0.054 129.7)

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

#DAD5AC

Fresh Green · Wheat · Lemon Cream

HEX

#DAD5AC

RGB

rgb(218, 213, 172)

HSL

hsl(53, 38%, 76%)

HSB

hsb(53, 21%, 85%)

CMYK

cmyk(0%, 2%, 21%, 15%)

Oklch

oklch(86.7% 0.055 101.7)

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

#ECD1A2

Goose Yellow · Wheat · Peach Orange

HEX

#ECD1A2

RGB

rgb(236, 209, 162)

HSL

hsl(38, 66%, 78%)

HSB

hsb(38, 31%, 93%)

CMYK

cmyk(0%, 11%, 31%, 7%)

Oklch

oklch(87.2% 0.068 81.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2E3C7

E3A1BD

Analogous

A1E3A5

A2E3C7

A1DEE3

Triadic

A2E3C7

C6A1E3

E3C6A1

Split-Comp.

A2E3C7

E3A1DE

E3A5A1

Tetradic

A2E3C7

A5A1E3

E3A1BD

DEE3A1

Contrast Matrix WCAG 2.1 Contrast

A2E3C7	B5DFBE	C7DAB5	DAD5AC	ECD1A2
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.5Fail

Black BG

14.3AAA

14.1AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBFCE

C7C8C6

CFCFBE

D8D8B6

E0E0AD

Deuteranopia

BAB6CF

C5C2C8

CECDC0

D8D9B8

E2E4B0

Tritanopia

A5D3D4

B7CCCE

C8C5C7

DABEBF

EBB6B8

Achromatopsia

CCCCCC

CFCFCF

D0D0D0

D2D2D2

D4D4D4

Shades & Tints Shades & Tints

#A2E3C7

Dark

Light

#B5DFBE

Dark

Light

#C7DAB5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2e3c7;
  --color-2: #b5dfbe;
  --color-3: #c7dab5;
  --color-4: #dad5ac;
  --color-5: #ecd1a2;
}

SCSS

$color-1: #a2e3c7;
$color-2: #b5dfbe;
$color-3: #c7dab5;
$color-4: #dad5ac;
$color-5: #ecd1a2;

TAILWIND

colors: {
  'brand-1': '#a2e3c7',
  'brand-2': '#b5dfbe',
  'brand-3': '#c7dab5',
  'brand-4': '#dad5ac',
  'brand-5': '#ecd1a2',
}

RGB Array

[162, 227, 199], [181, 223, 190], [199, 218, 181], [218, 213, 172], [236, 209, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A2E3C7, #B5DFBE, #C7DAB5, #DAD5AC, #ECD1A2 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: #a2e3c7; --color-2: #b5dfbe; --color-3: #c7dab5; --color-4: #dad5ac; --color-5: #ecd1a2. 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