#AFB3BA + #D3F0F2 + #CAD4DB + #FFF7FD + #D9BCB4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFB3BA

Silver Gray · DarkGray · Pearl Gray

HEX

#AFB3BA

RGB

rgb(175, 179, 186)

HSL

hsl(218, 7%, 71%)

HSB

hsb(218, 6%, 73%)

CMYK

cmyk(6%, 4%, 0%, 27%)

Oklch

oklch(76.6% 0.011 261.8)

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

#D3F0F2

Sky Blue · Lavender · Glacier Blue

HEX

#D3F0F2

RGB

rgb(211, 240, 242)

HSL

hsl(184, 54%, 89%)

HSB

hsb(184, 13%, 95%)

CMYK

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

Oklch

oklch(93.5% 0.030 201.7)

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

#CAD4DB

Sky Blue · LightGray · Sky Blue

HEX

#CAD4DB

RGB

rgb(202, 212, 219)

HSL

hsl(205, 19%, 83%)

HSB

hsb(205, 8%, 86%)

CMYK

cmyk(8%, 3%, 0%, 14%)

Oklch

oklch(86.4% 0.015 238.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#FFF7FD

Mauve · Snow · Lavender

HEX

#FFF7FD

RGB

rgb(255, 247, 253)

HSL

hsl(315, 100%, 98%)

HSB

hsb(315, 3%, 100%)

CMYK

cmyk(0%, 3%, 1%, 0%)

Oklch

oklch(98.4% 0.012 334.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#D9BCB4

Peach Pink · Silver · Coral Red

HEX

#D9BCB4

RGB

rgb(217, 188, 180)

HSL

hsl(13, 33%, 78%)

HSB

hsb(13, 17%, 85%)

CMYK

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

Oklch

oklch(81.8% 0.035 35.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFB3BA

BAB6B0

Analogous

B0B9BA

AFB3BA

B1B0BA

Triadic

AFB3BA

BAB0B4

B4BAB0

Split-Comp.

AFB3BA

BAB1B0

B9BAB0

Tetradic

AFB3BA

BAB0B9

BAB6B0

B0BAB1

Contrast Matrix WCAG 2.1 Contrast

AFB3BA	D3F0F2	CAD4DB	FFF7FD	D9BCB4
—	1.8 Fail	1.4 Fail	2.0 Fail	1.2 Fail
1.8 Fail	—	1.3 Fail	1.1 Fail	1.5 Fail
1.4 Fail	1.3 Fail	—	1.4 Fail	1.2 Fail
2.0 Fail	1.1 Fail	1.4 Fail	—	1.7 Fail
1.2 Fail	1.5 Fail	1.2 Fail	1.7 Fail	—

White BG

2.1Fail

1.2Fail

1.5Fail

1.1Fail

1.8Fail

Black BG

10.0AAA

17.5AAA

14.0AAA

20.0AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1B8

E0E0F2

CECED9

FCFBFC

CCCCB6

Deuteranopia

B1B0B8

DEDCF1

CECDD9

FCFDFB

CED0B6

Tritanopia

AFB7B7

D4F1F1

CAD8D8

FFFAFA

D8B7B8

Achromatopsia

B3B3B3

E8E8E8

D2D2D2

FAFAFA

C4C4C4

Shades & Tints Shades & Tints

#AFB3BA

Dark

Light

#D3F0F2

Dark

Light

#CAD4DB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afb3ba;
  --color-2: #d3f0f2;
  --color-3: #cad4db;
  --color-4: #fff7fd;
  --color-5: #d9bcb4;
}

SCSS

$color-1: #afb3ba;
$color-2: #d3f0f2;
$color-3: #cad4db;
$color-4: #fff7fd;
$color-5: #d9bcb4;

TAILWIND

colors: {
  'brand-1': '#afb3ba',
  'brand-2': '#d3f0f2',
  'brand-3': '#cad4db',
  'brand-4': '#fff7fd',
  'brand-5': '#d9bcb4',
}

RGB Array

[175, 179, 186], [211, 240, 242], [202, 212, 219], [255, 247, 253], [217, 188, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFB3BA, #D3F0F2, #CAD4DB, #FFF7FD, #D9BCB4 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: #afb3ba; --color-2: #d3f0f2; --color-3: #cad4db; --color-4: #fff7fd; --color-5: #d9bcb4. 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