← Back to Editor

#FBF3F3 · #D6DCE3 · #ABB6DF · #B6BFCE · #93969B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBF3F3

Peach Pink · SeaShell · Cherry Blossom

HEX
#FBF3F3
RGB
rgb(251, 243, 243)
HSL
hsl(0, 50%, 97%)
HSB
hsb(0, 3%, 98%)
CMYK
cmyk(0%, 3%, 3%, 2%)
Oklch
oklch(97.0% 0.009 17.3)

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

#D6DCE3

Azure · LightGray · Sky Blue

HEX
#D6DCE3
RGB
rgb(214, 220, 227)
HSL
hsl(212, 19%, 86%)
HSB
hsb(212, 6%, 89%)
CMYK
cmyk(6%, 3%, 0%, 11%)
Oklch
oklch(89.2% 0.012 252.1)

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

#ABB6DF

Azure · LightSteelBlue · Cobalt Blue

HEX
#ABB6DF
RGB
rgb(171, 182, 223)
HSL
hsl(227, 45%, 77%)
HSB
hsb(227, 23%, 87%)
CMYK
cmyk(23%, 18%, 0%, 13%)
Oklch
oklch(78.2% 0.060 273.2)

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

#B6BFCE

Azure · Silver · Cobalt Blue

HEX
#B6BFCE
RGB
rgb(182, 191, 206)
HSL
hsl(218, 20%, 76%)
HSB
hsb(218, 12%, 81%)
CMYK
cmyk(12%, 7%, 0%, 19%)
Oklch
oklch(80.2% 0.023 260.7)

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

#93969B

Ash · LightSlateGray · Silver Sand

HEX
#93969B
RGB
rgb(147, 150, 155)
HSL
hsl(217, 4%, 59%)
HSB
hsb(217, 5%, 61%)
CMYK
cmyk(5%, 3%, 0%, 39%)
Oklch
oklch(67.2% 0.008 260.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF3F3
F4FBFB

Analogous

FBF4F7
FBF3F3
FBF7F4

Triadic

FBF3F3
F4FBF4
F4F4FB

Split-Comp.

FBF3F3
F4FBF7
F4F7FB

Tetradic

FBF3F3
F7FBF4
F4FBFB
F7F4FB

Contrast Matrix WCAG 2.1 Contrast

FBF3F3
D6DCE3
ABB6DF
B6BFCE
93969B
—
1.3
Fail
1.8
Fail
1.7
Fail
2.7
Fail
1.3
Fail
—
1.4
Fail
1.3
Fail
2.1
Fail
1.8
Fail
1.4
Fail
—
1.1
Fail
1.5
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.6
Fail
2.7
Fail
2.1
Fail
1.5
Fail
1.6
Fail
—
White BG
1.1Fail
1.4Fail
2.0Fail
1.9Fail
3.0Fail
Black BG
19.2AAA
15.2AAA
10.5AAA
11.3AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F7F3
D9D9E1
B0B0D5
BABACA
94949A

Deuteranopia

F8F9F3
D8D8E1
AFAED3
B9B9CA
94949A

Tritanopia

FBF3F3
D6E0E0
ACCDCC
B6C8C7
939999

Achromatopsia

F5F5F5
DBDBDB
B7B7B7
BEBEBE
969696

Shades & Tints Shades & Tints

#FBF3F3

Dark
Light

#D6DCE3

Dark
Light

#ABB6DF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf3f3;
  --color-2: #d6dce3;
  --color-3: #abb6df;
  --color-4: #b6bfce;
  --color-5: #93969b;
}

SCSS

$color-1: #fbf3f3;
$color-2: #d6dce3;
$color-3: #abb6df;
$color-4: #b6bfce;
$color-5: #93969b;

TAILWIND

colors: {
  'brand-1': '#fbf3f3',
  'brand-2': '#d6dce3',
  'brand-3': '#abb6df',
  'brand-4': '#b6bfce',
  'brand-5': '#93969b',
}

RGB Array

[251, 243, 243], [214, 220, 227], [171, 182, 223], [182, 191, 206], [147, 150, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBF3F3, #D6DCE3, #ABB6DF, #B6BFCE, #93969B is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fbf3f3; --color-2: #d6dce3; --color-3: #abb6df; --color-4: #b6bfce; --color-5: #93969b. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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