#A2F2DF + #B5E6D8 + #CAD8CF + #DDCBC6 + #D1CFC0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A2F2DF

Jade · LightBlue · Glacier Blue

HEX

#A2F2DF

RGB

rgb(162, 242, 223)

HSL

hsl(166, 75%, 79%)

HSB

hsb(166, 33%, 95%)

CMYK

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

Oklch

oklch(90.4% 0.083 177.7)

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

#B5E6D8

Jade · LightBlue · Glacier Blue

HEX

#B5E6D8

RGB

rgb(181, 230, 216)

HSL

hsl(163, 49%, 81%)

HSB

hsb(163, 21%, 90%)

CMYK

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

Oklch

oklch(88.7% 0.054 175.7)

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

#CAD8CF

Celadon · LightGray · Mint Green

HEX

#CAD8CF

RGB

rgb(202, 216, 207)

HSL

hsl(141, 15%, 82%)

HSB

hsb(141, 6%, 85%)

CMYK

cmyk(6%, 0%, 4%, 15%)

Oklch

oklch(86.9% 0.019 157.8)

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

#DDCBC6

Peach Pink · LightGray · Cherry Blossom

HEX

#DDCBC6

RGB

rgb(221, 203, 198)

HSL

hsl(13, 25%, 82%)

HSB

hsb(13, 10%, 87%)

CMYK

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

Oklch

oklch(85.6% 0.021 36.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D1CFC0

Fresh Green · LightGray · Lemon Cream

HEX

#D1CFC0

RGB

rgb(209, 207, 192)

HSL

hsl(53, 16%, 79%)

HSB

hsb(53, 8%, 82%)

CMYK

cmyk(0%, 1%, 8%, 18%)

Oklch

oklch(85.2% 0.020 100.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2F2DF

F2A1B4

Analogous

A1F2B7

A2F2DF

A1DCF2

Triadic

A2F2DF

DFA1F2

F2DFA1

Split-Comp.

A2F2DF

F2A1DC

F2B7A1

Tetradic

A2F2DF

B7A1F2

F2A1B4

DCF2A1

Contrast Matrix WCAG 2.1 Contrast

A2F2DF	B5E6D8	CAD8CF	DDCBC6	D1CFC0
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.6Fail

Black BG

16.3AAA

15.3AAA

14.2AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5E4

CACBDB

D0D0D1

D5D5C7

D0D0C4

Deuteranopia

C0BAE5

C7C4DC

CFCED2

D6D8C8

D0D0C4

Tritanopia

A6E7E8

B7DEDF

CBD3D3

DCC8C8

D1C6C7

Achromatopsia

D8D8D8

D6D6D6

D3D3D3

D0D0D0

CECECE

Shades & Tints Shades & Tints

#A2F2DF

Dark

Light

#B5E6D8

Dark

Light

#CAD8CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2f2df;
  --color-2: #b5e6d8;
  --color-3: #cad8cf;
  --color-4: #ddcbc6;
  --color-5: #d1cfc0;
}

SCSS

$color-1: #a2f2df;
$color-2: #b5e6d8;
$color-3: #cad8cf;
$color-4: #ddcbc6;
$color-5: #d1cfc0;

TAILWIND

colors: {
  'brand-1': '#a2f2df',
  'brand-2': '#b5e6d8',
  'brand-3': '#cad8cf',
  'brand-4': '#ddcbc6',
  'brand-5': '#d1cfc0',
}

RGB Array

[162, 242, 223], [181, 230, 216], [202, 216, 207], [221, 203, 198], [209, 207, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A2F2DF, #B5E6D8, #CAD8CF, #DDCBC6, #D1CFC0 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: #a2f2df; --color-2: #b5e6d8; --color-3: #cad8cf; --color-4: #ddcbc6; --color-5: #d1cfc0. 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