#ADBABE + #F8C8C9 + #AFB1B1 + #F7D2D6 + #ACB4B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ADBABE

Sky Blue · Silver · Lake Green

HEX

#ADBABE

RGB

rgb(173, 186, 190)

HSL

hsl(194, 12%, 71%)

HSB

hsb(194, 9%, 75%)

CMYK

cmyk(9%, 2%, 0%, 25%)

Oklch

oklch(78.0% 0.016 218.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F8C8C9

Peach Pink · Pink · Cherry Blossom

HEX

#F8C8C9

RGB

rgb(248, 200, 201)

HSL

hsl(359, 77%, 88%)

HSB

hsb(359, 19%, 97%)

CMYK

cmyk(0%, 19%, 19%, 3%)

Oklch

oklch(87.5% 0.055 16.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#AFB1B1

Ash · DarkGray · Silver Sand

HEX

#AFB1B1

RGB

rgb(175, 177, 177)

HSL

hsl(180, 1%, 69%)

HSB

hsb(180, 1%, 69%)

CMYK

cmyk(1%, 0%, 0%, 31%)

Oklch

oklch(75.9% 0.002 197.1)

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

#F7D2D6

Peach Pink · Pink · Cherry Blossom

HEX

#F7D2D6

RGB

rgb(247, 210, 214)

HSL

hsl(354, 70%, 90%)

HSB

hsb(354, 15%, 97%)

CMYK

cmyk(0%, 15%, 13%, 3%)

Oklch

oklch(89.6% 0.042 10.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#ACB4B8

Sky Blue · DarkGray · Silver Sand

HEX

#ACB4B8

RGB

rgb(172, 180, 184)

HSL

hsl(200, 8%, 70%)

HSB

hsb(200, 7%, 72%)

CMYK

cmyk(7%, 2%, 0%, 28%)

Oklch

oklch(76.5% 0.011 228.9)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADBABE

BEB0AC

Analogous

ACBEB9

ADBABE

ACB1BE

Triadic

ADBABE

BEACBA

BABEAC

Split-Comp.

ADBABE

BEACB1

BEB9AC

Tetradic

ADBABE

B9ACBE

BEB0AC

B1BEAC

Contrast Matrix WCAG 2.1 Contrast

ADBABE	F8C8C9	AFB1B1	F7D2D6	ACB4B8
—	1.3 Fail	1.1 Fail	1.4 Fail	1.1 Fail
1.3 Fail	—	1.4 Fail	1.1 Fail	1.4 Fail
1.1 Fail	1.4 Fail	—	1.6 Fail	1.0 Fail
1.4 Fail	1.1 Fail	1.6 Fail	—	1.5 Fail
1.1 Fail	1.4 Fail	1.0 Fail	1.5 Fail	—

White BG

2.0Fail

1.5Fail

2.2Fail

1.4Fail

2.1Fail

Black BG

10.5AAA

14.1AAA

9.7AAA

15.1AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3BD

E3E3C9

B0B0B1

E7E7D5

AFB0B7

Deuteranopia

B2B1BD

E6EAC9

B0B0B1

E9ECD5

AFAEB7

Tritanopia

AEBCBC

F6C9C9

AFB1B1

F5D4D4

ACB6B6

Achromatopsia

B7B7B7

D6D6D6

B0B0B0

DEDEDE

B2B2B2

Shades & Tints Shades & Tints

#ADBABE

Dark

Light

#F8C8C9

Dark

Light

#AFB1B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adbabe;
  --color-2: #f8c8c9;
  --color-3: #afb1b1;
  --color-4: #f7d2d6;
  --color-5: #acb4b8;
}

SCSS

$color-1: #adbabe;
$color-2: #f8c8c9;
$color-3: #afb1b1;
$color-4: #f7d2d6;
$color-5: #acb4b8;

TAILWIND

colors: {
  'brand-1': '#adbabe',
  'brand-2': '#f8c8c9',
  'brand-3': '#afb1b1',
  'brand-4': '#f7d2d6',
  'brand-5': '#acb4b8',
}

RGB Array

[173, 186, 190], [248, 200, 201], [175, 177, 177], [247, 210, 214], [172, 180, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADBABE, #F8C8C9, #AFB1B1, #F7D2D6, #ACB4B8 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: #adbabe; --color-2: #f8c8c9; --color-3: #afb1b1; --color-4: #f7d2d6; --color-5: #acb4b8. 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