#A1CFAB + #F0ECD1 + #F5B8AA + #BDADAF + #99A5B1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A1CFAB

Celadon · DarkSeaGreen · Apple Green

HEX

#A1CFAB

RGB

rgb(161, 207, 171)

HSL

hsl(133, 32%, 72%)

HSB

hsb(133, 22%, 81%)

CMYK

cmyk(22%, 0%, 17%, 19%)

Oklch

oklch(81.2% 0.070 151.2)

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

#F0ECD1

Fresh Green · Beige · Lemon Cream

HEX

#F0ECD1

RGB

rgb(240, 236, 209)

HSL

hsl(52, 51%, 88%)

HSB

hsb(52, 13%, 94%)

CMYK

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

Oklch

oklch(93.9% 0.036 100.1)

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

#F5B8AA

Peach Pink · LightPink · Cherry Blossom

HEX

#F5B8AA

RGB

rgb(245, 184, 170)

HSL

hsl(11, 79%, 81%)

HSB

hsb(11, 31%, 96%)

CMYK

cmyk(0%, 25%, 31%, 4%)

Oklch

oklch(83.5% 0.074 33.3)

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

#BDADAF

Peach Pink · DarkGray · Coral Red

HEX

#BDADAF

RGB

rgb(189, 173, 175)

HSL

hsl(353, 11%, 71%)

HSB

hsb(353, 8%, 74%)

CMYK

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

Oklch

oklch(76.2% 0.019 8.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#99A5B1

Azure · DarkGray · Cobalt Blue

HEX

#99A5B1

RGB

rgb(153, 165, 177)

HSL

hsl(210, 13%, 65%)

HSB

hsb(210, 14%, 69%)

CMYK

cmyk(14%, 7%, 0%, 31%)

Oklch

oklch(71.6% 0.022 248.1)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1CFAB

CEA1C5

Analogous

AECEA1

A1CFAB

A1CEC2

Triadic

A1CFAB

ABA1CE

CEABA1

Split-Comp.

A1CFAB

C2A1CE

CEA1AE

Tetradic

A1CFAB

A1AECE

CEA1C5

CEC2A1

Contrast Matrix WCAG 2.1 Contrast

A1CFAB	F0ECD1	F5B8AA	BDADAF	99A5B1
—	1.5 Fail	1.0 Fail	1.2 Fail	1.4 Fail
1.5 Fail	—	1.4 Fail	1.8 Fail	2.1 Fail
1.0 Fail	1.4 Fail	—	1.3 Fail	1.5 Fail
1.2 Fail	1.8 Fail	1.3 Fail	—	1.2 Fail
1.4 Fail	2.1 Fail	1.5 Fail	1.2 Fail	—

White BG

1.7Fail

1.2Fail

1.7Fail

2.2Fail

2.5Fail

Black BG

12.0AAA

17.6AAA

12.3AAA

9.8AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5B4

EEEED8

DBDAAD

B6B6AF

9E9EAE

Deuteranopia

B2AFB6

EFEFD9

DEE3AE

B7B8AE

9E9DAD

Tritanopia

A3BBBC

F0DDDE

F2B0B1

BCAEAE

9AACAB

Achromatopsia

BDBDBD

EAEAEA

C9C9C9

B2B2B2

A3A3A3

Shades & Tints Shades & Tints

#A1CFAB

Dark

Light

#F0ECD1

Dark

Light

#F5B8AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1cfab;
  --color-2: #f0ecd1;
  --color-3: #f5b8aa;
  --color-4: #bdadaf;
  --color-5: #99a5b1;
}

SCSS

$color-1: #a1cfab;
$color-2: #f0ecd1;
$color-3: #f5b8aa;
$color-4: #bdadaf;
$color-5: #99a5b1;

TAILWIND

colors: {
  'brand-1': '#a1cfab',
  'brand-2': '#f0ecd1',
  'brand-3': '#f5b8aa',
  'brand-4': '#bdadaf',
  'brand-5': '#99a5b1',
}

RGB Array

[161, 207, 171], [240, 236, 209], [245, 184, 170], [189, 173, 175], [153, 165, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A1CFAB, #F0ECD1, #F5B8AA, #BDADAF, #99A5B1 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: #a1cfab; --color-2: #f0ecd1; --color-3: #f5b8aa; --color-4: #bdadaf; --color-5: #99a5b1. 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