#A1ABA8 + #BBC3B9 + #DDE3CD + #C9E2DA + #EFFFFA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A1ABA8

Ash · DarkGray · Silver Sand

HEX

#A1ABA8

RGB

rgb(161, 171, 168)

HSL

hsl(162, 6%, 65%)

HSB

hsb(162, 6%, 67%)

CMYK

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

Oklch

oklch(73.2% 0.012 176.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BBC3B9

Celadon · Silver · Pearl Gray

HEX

#BBC3B9

RGB

rgb(187, 195, 185)

HSL

hsl(108, 8%, 75%)

HSB

hsb(108, 5%, 76%)

CMYK

cmyk(4%, 0%, 5%, 24%)

Oklch

oklch(80.8% 0.016 139.4)

Traditional「Celadon」· Paint「Pearl Gray」· Creative Silver Lining

#DDE3CD

Willow Green · LightGray · Mint Green

HEX

#DDE3CD

RGB

rgb(221, 227, 205)

HSL

hsl(76, 28%, 85%)

HSB

hsb(76, 10%, 89%)

CMYK

cmyk(3%, 0%, 10%, 11%)

Oklch

oklch(90.5% 0.030 119.4)

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

#C9E2DA

Jade · LightGray · Glacier Blue

HEX

#C9E2DA

RGB

rgb(201, 226, 218)

HSL

hsl(161, 30%, 84%)

HSB

hsb(161, 11%, 89%)

CMYK

cmyk(11%, 0%, 4%, 11%)

Oklch

oklch(89.2% 0.029 174.4)

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

#EFFFFA

Jade · White · Glacier Blue

HEX

#EFFFFA

RGB

rgb(239, 255, 250)

HSL

hsl(161, 100%, 97%)

HSB

hsb(161, 6%, 100%)

CMYK

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

Oklch

oklch(98.7% 0.018 175.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1ABA8

ABA0A4

Analogous

A0ABA3

A1ABA8

A0A9AB

Triadic

A1ABA8

A8A0AB

ABA8A0

Split-Comp.

A1ABA8

ABA0A9

ABA3A0

Tetradic

A1ABA8

A3A0AB

ABA0A4

A9ABA0

Contrast Matrix WCAG 2.1 Contrast

A1ABA8	BBC3B9	DDE3CD	C9E2DA	EFFFFA
—	1.3 Fail	1.8 Fail	1.7 Fail	2.3 Fail
1.3 Fail	—	1.4 Fail	1.3 Fail	1.8 Fail
1.8 Fail	1.4 Fail	—	1.0 Fail	1.3 Fail
1.7 Fail	1.3 Fail	1.0 Fail	—	1.3 Fail
2.3 Fail	1.8 Fail	1.3 Fail	1.3 Fail	—

White BG

2.4Fail

1.8Fail

1.3Fail

1.4Fail

1.0Fail

Black BG

8.9AAA

11.6AAA

15.9AAA

15.4AAA

20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5A9

BEBFBB

E0E0D2

D4D4DC

F6F6FB

Deuteranopia

A5A4A9

BEBDBC

DFDFD4

D2D1DC

F5F4FC

Tritanopia

A2A9A9

BBBDBE

DDD7D7

CADDDE

F0FCFC

Achromatopsia

A8A8A8

BFBFBF

DFDFDF

DADADA

FAFAFA

Shades & Tints Shades & Tints

#A1ABA8

Dark

Light

#BBC3B9

Dark

Light

#DDE3CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1aba8;
  --color-2: #bbc3b9;
  --color-3: #dde3cd;
  --color-4: #c9e2da;
  --color-5: #effffa;
}

SCSS

$color-1: #a1aba8;
$color-2: #bbc3b9;
$color-3: #dde3cd;
$color-4: #c9e2da;
$color-5: #effffa;

TAILWIND

colors: {
  'brand-1': '#a1aba8',
  'brand-2': '#bbc3b9',
  'brand-3': '#dde3cd',
  'brand-4': '#c9e2da',
  'brand-5': '#effffa',
}

RGB Array

[161, 171, 168], [187, 195, 185], [221, 227, 205], [201, 226, 218], [239, 255, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A1ABA8, #BBC3B9, #DDE3CD, #C9E2DA, #EFFFFA 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: #a1aba8; --color-2: #bbc3b9; --color-3: #dde3cd; --color-4: #c9e2da; --color-5: #effffa. 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