#A1C4AF + #AD9EA8 + #AB8F9C + #DEACA7 + #F2D3B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A1C4AF

Celadon · DarkGray · Apple Green

HEX

#A1C4AF

RGB

rgb(161, 196, 175)

HSL

hsl(144, 23%, 70%)

HSB

hsb(144, 18%, 77%)

CMYK

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

Oklch

oklch(78.9% 0.048 158.8)

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

#AD9EA8

Mauve · DarkGray · Silver Sand

HEX

#AD9EA8

RGB

rgb(173, 158, 168)

HSL

hsl(320, 8%, 65%)

HSB

hsb(320, 9%, 68%)

CMYK

cmyk(0%, 9%, 3%, 32%)

Oklch

oklch(71.5% 0.022 337.9)

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

#AB8F9C

Rouge · DarkGray · Rose Pink

HEX

#AB8F9C

RGB

rgb(171, 143, 156)

HSL

hsl(332, 14%, 62%)

HSB

hsb(332, 16%, 67%)

CMYK

cmyk(0%, 16%, 9%, 33%)

Oklch

oklch(67.9% 0.038 348.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#DEACA7

Peach Pink · Tan · Coral Red

HEX

#DEACA7

RGB

rgb(222, 172, 167)

HSL

hsl(5, 45%, 76%)

HSB

hsb(5, 25%, 87%)

CMYK

cmyk(0%, 23%, 25%, 13%)

Oklch

oklch(78.9% 0.059 25.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F2D3B5

Goose Yellow · Wheat · Peach Orange

HEX

#F2D3B5

RGB

rgb(242, 211, 181)

HSL

hsl(30, 70%, 83%)

HSB

hsb(30, 25%, 95%)

CMYK

cmyk(0%, 13%, 25%, 5%)

Oklch

oklch(88.5% 0.053 66.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1C4AF

C4A1B6

Analogous

A4C4A1

A1C4AF

A1C4C1

Triadic

A1C4AF

AFA1C4

C4AFA1

Split-Comp.

A1C4AF

C1A1C4

C4A1A4

Tetradic

A1C4AF

A1A4C4

C4A1B6

C4C1A1

Contrast Matrix WCAG 2.1 Contrast

A1C4AF	AD9EA8	AB8F9C	DEACA7	F2D3B5
—	1.3 Fail	1.5 Fail	1.0 Fail	1.3 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.5 Fail	2.1 Fail
1.0 Fail	1.3 Fail	1.5 Fail	—	1.4 Fail
1.3 Fail	1.8 Fail	2.1 Fail	1.4 Fail	—

White BG

1.9Fail

2.6Fail

2.9Fail

2.0Fail

1.4Fail

Black BG

11.0AAA

8.2AAA

7.1AAA

10.6AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0B4

A7A6A6

9F9F99

C8C8A8

E5E4BC

Deuteranopia

AEACB5

A7A9A5

A1A398

CBCFA9

E6E9BE

Tritanopia

A3B8B9

ACA4A3

AA9696

DBA9A9

F0C2C3

Achromatopsia

B7B7B7

A4A4A4

999999

BABABA

D9D9D9

Shades & Tints Shades & Tints

#A1C4AF

Dark

Light

#AD9EA8

Dark

Light

#AB8F9C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1c4af;
  --color-2: #ad9ea8;
  --color-3: #ab8f9c;
  --color-4: #deaca7;
  --color-5: #f2d3b5;
}

SCSS

$color-1: #a1c4af;
$color-2: #ad9ea8;
$color-3: #ab8f9c;
$color-4: #deaca7;
$color-5: #f2d3b5;

TAILWIND

colors: {
  'brand-1': '#a1c4af',
  'brand-2': '#ad9ea8',
  'brand-3': '#ab8f9c',
  'brand-4': '#deaca7',
  'brand-5': '#f2d3b5',
}

RGB Array

[161, 196, 175], [173, 158, 168], [171, 143, 156], [222, 172, 167], [242, 211, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A1C4AF, #AD9EA8, #AB8F9C, #DEACA7, #F2D3B5 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: #a1c4af; --color-2: #ad9ea8; --color-3: #ab8f9c; --color-4: #deaca7; --color-5: #f2d3b5. 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