#A4CCC1 + #D4E9D8 + #F8FAE5 + #A1D0C8 + #7FACB1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A4CCC1

Jade · Silver · Lake Green

HEX

#A4CCC1

RGB

rgb(164, 204, 193)

HSL

hsl(163, 28%, 72%)

HSB

hsb(163, 20%, 80%)

CMYK

cmyk(20%, 0%, 5%, 20%)

Oklch

oklch(81.3% 0.045 176.5)

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

#D4E9D8

Celadon · LightGray · Mint Green

HEX

#D4E9D8

RGB

rgb(212, 233, 216)

HSL

hsl(131, 32%, 87%)

HSB

hsb(131, 9%, 91%)

CMYK

cmyk(9%, 0%, 7%, 9%)

Oklch

oklch(91.4% 0.032 151.1)

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

#F8FAE5

Fresh Green · LightYellow · Lemon Cream

HEX

#F8FAE5

RGB

rgb(248, 250, 229)

HSL

hsl(66, 68%, 94%)

HSB

hsb(66, 8%, 98%)

CMYK

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

Oklch

oklch(97.8% 0.028 111.3)

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

#A1D0C8

Jade · LightSteelBlue · Lake Green

HEX

#A1D0C8

RGB

rgb(161, 208, 200)

HSL

hsl(170, 33%, 72%)

HSB

hsb(170, 23%, 82%)

CMYK

cmyk(23%, 0%, 4%, 18%)

Oklch

oklch(82.2% 0.050 183.5)

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

#7FACB1

Slate Blue · CadetBlue · Lake Green

HEX

#7FACB1

RGB

rgb(127, 172, 177)

HSL

hsl(186, 24%, 60%)

HSB

hsb(186, 28%, 69%)

CMYK

cmyk(28%, 3%, 0%, 31%)

Oklch

oklch(71.4% 0.049 204.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A4CCC1

CCA4AF

Analogous

A4CCAC

A4CCC1

A4C3CC

Triadic

A4CCC1

C0A4CC

CCC0A4

Split-Comp.

A4CCC1

CCA4C3

CCACA4

Tetradic

A4CCC1

ACA4CC

CCA4AF

C3CCA4

Contrast Matrix WCAG 2.1 Contrast

A4CCC1	D4E9D8	F8FAE5	A1D0C8	7FACB1
—	1.4 Fail	1.7 Fail	1.0 Fail	1.4 Fail
1.4 Fail	—	1.2 Fail	1.3 Fail	1.9 Fail
1.7 Fail	1.2 Fail	—	1.6 Fail	2.3 Fail
1.0 Fail	1.3 Fail	1.6 Fail	—	1.5 Fail
1.4 Fail	1.9 Fail	2.3 Fail	1.5 Fail	—

White BG

1.8Fail

1.3Fail

1.1Fail

1.7Fail

2.5Fail

Black BG

12.0AAA

16.4AAA

19.8AAA

12.4AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B6C4

DDDDDC

F9F9EA

B5B6CA

9293B0

Deuteranopia

B3B0C4

DCDADD

F9F9EB

B3AFCA

908DB0

Tritanopia

A6C6C6

D5DFE0

F8EEEF

A3CBCC

81AFAF

Achromatopsia

BFBFBF

E1E1E1

F7F7F7

C1C1C1

9F9F9F

Shades & Tints Shades & Tints

#A4CCC1

Dark

Light

#D4E9D8

Dark

Light

#F8FAE5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4ccc1;
  --color-2: #d4e9d8;
  --color-3: #f8fae5;
  --color-4: #a1d0c8;
  --color-5: #7facb1;
}

SCSS

$color-1: #a4ccc1;
$color-2: #d4e9d8;
$color-3: #f8fae5;
$color-4: #a1d0c8;
$color-5: #7facb1;

TAILWIND

colors: {
  'brand-1': '#a4ccc1',
  'brand-2': '#d4e9d8',
  'brand-3': '#f8fae5',
  'brand-4': '#a1d0c8',
  'brand-5': '#7facb1',
}

RGB Array

[164, 204, 193], [212, 233, 216], [248, 250, 229], [161, 208, 200], [127, 172, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A4CCC1, #D4E9D8, #F8FAE5, #A1D0C8, #7FACB1 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: #a4ccc1; --color-2: #d4e9d8; --color-3: #f8fae5; --color-4: #a1d0c8; --color-5: #7facb1. 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