#A3CCA5 + #B5D6A1 + #C0DBD2 + #DFEADA + #E5F9EB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A3CCA5

Celadon · DarkSeaGreen · Apple Green

HEX

#A3CCA5

RGB

rgb(163, 204, 165)

HSL

hsl(123, 29%, 72%)

HSB

hsb(123, 20%, 80%)

CMYK

cmyk(20%, 0%, 19%, 20%)

Oklch

oklch(80.5% 0.070 146.2)

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

#B5D6A1

Celadon · Silver · Apple Green

HEX

#B5D6A1

RGB

rgb(181, 214, 161)

HSL

hsl(97, 39%, 74%)

HSB

hsb(97, 25%, 84%)

CMYK

cmyk(15%, 0%, 25%, 16%)

Oklch

oklch(83.8% 0.080 133.9)

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

#C0DBD2

Jade · LightGray · Glacier Blue

HEX

#C0DBD2

RGB

rgb(192, 219, 210)

HSL

hsl(160, 27%, 81%)

HSB

hsb(160, 12%, 86%)

CMYK

cmyk(12%, 0%, 4%, 14%)

Oklch

oklch(86.9% 0.031 173.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DFEADA

Celadon · Beige · Mint Green

HEX

#DFEADA

RGB

rgb(223, 234, 218)

HSL

hsl(101, 28%, 89%)

HSB

hsb(101, 7%, 92%)

CMYK

cmyk(5%, 0%, 7%, 8%)

Oklch

oklch(92.4% 0.024 135.7)

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

#E5F9EB

Emerald · Beige · Mint Green

HEX

#E5F9EB

RGB

rgb(229, 249, 235)

HSL

hsl(138, 63%, 94%)

HSB

hsb(138, 8%, 98%)

CMYK

cmyk(8%, 0%, 6%, 2%)

Oklch

oklch(96.4% 0.028 155.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3CCA5

CCA3CA

Analogous

B6CCA3

A3CCA5

A3CCBA

Triadic

A3CCA5

A5A3CC

CCA5A3

Split-Comp.

A3CCA5

BAA3CC

CCA3B6

Tetradic

A3CCA5

A3B6CC

CCA3CA

CCBAA3

Contrast Matrix WCAG 2.1 Contrast

A3CCA5	B5D6A1	C0DBD2	DFEADA	E5F9EB
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.8Fail

1.6Fail

1.5Fail

1.2Fail

1.1Fail

Black BG

11.7AAA

13.1AAA

14.3AAA

16.9AAA

19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5AE

C3C4AE

CCCCD4

E4E4DE

EEEEEE

Deuteranopia

B2AFB1

C1BFB1

CAC8D5

E3E2DF

EDEBEF

Tritanopia

A5B6B8

B7B8BA

C1D6D6

E0E1E2

E6F1F2

Achromatopsia

BBBBBB

C6C6C6

D2D2D2

E5E5E5

F1F1F1

Shades & Tints Shades & Tints

#A3CCA5

Dark

Light

#B5D6A1

Dark

Light

#C0DBD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3cca5;
  --color-2: #b5d6a1;
  --color-3: #c0dbd2;
  --color-4: #dfeada;
  --color-5: #e5f9eb;
}

SCSS

$color-1: #a3cca5;
$color-2: #b5d6a1;
$color-3: #c0dbd2;
$color-4: #dfeada;
$color-5: #e5f9eb;

TAILWIND

colors: {
  'brand-1': '#a3cca5',
  'brand-2': '#b5d6a1',
  'brand-3': '#c0dbd2',
  'brand-4': '#dfeada',
  'brand-5': '#e5f9eb',
}

RGB Array

[163, 204, 165], [181, 214, 161], [192, 219, 210], [223, 234, 218], [229, 249, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3CCA5, #B5D6A1, #C0DBD2, #DFEADA, #E5F9EB 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: #a3cca5; --color-2: #b5d6a1; --color-3: #c0dbd2; --color-4: #dfeada; --color-5: #e5f9eb. 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