#FFFCF2 + #D7DEE1 + #AFC1CF + #9DA0BB + #8B80A7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFFCF2

Goose Yellow · SeaShell · Lemon Cream

HEX

#FFFCF2

RGB

rgb(255, 252, 242)

HSL

hsl(46, 100%, 97%)

HSB

hsb(46, 5%, 100%)

CMYK

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

Oklch

oklch(99.1% 0.014 93.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D7DEE1

Sky Blue · LightGray · Glacier Blue

HEX

#D7DEE1

RGB

rgb(215, 222, 225)

HSL

hsl(198, 14%, 86%)

HSB

hsb(198, 4%, 88%)

CMYK

cmyk(4%, 1%, 0%, 12%)

Oklch

oklch(89.6% 0.009 225.1)

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

#AFC1CF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#AFC1CF

RGB

rgb(175, 193, 207)

HSL

hsl(206, 25%, 75%)

HSB

hsb(206, 15%, 81%)

CMYK

cmyk(15%, 7%, 0%, 19%)

Oklch

oklch(80.2% 0.028 241.2)

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

#9DA0BB

Azure · DarkGray · Cobalt Blue

HEX

#9DA0BB

RGB

rgb(157, 160, 187)

HSL

hsl(234, 18%, 67%)

HSB

hsb(234, 16%, 73%)

CMYK

cmyk(16%, 14%, 0%, 27%)

Oklch

oklch(71.2% 0.039 280.3)

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

#8B80A7

Deep Indigo · LightSlateGray · Navy Blue

HEX

#8B80A7

RGB

rgb(139, 128, 167)

HSL

hsl(257, 18%, 58%)

HSB

hsb(257, 23%, 65%)

CMYK

cmyk(17%, 23%, 0%, 35%)

Oklch

oklch(62.4% 0.059 297.6)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFCF2

F0F3FF

Analogous

FFF4F0

FFFCF2

FBFFF0

Triadic

FFFCF2

F0FFFB

FBF0FF

Split-Comp.

FFFCF2

F0FBFF

F4F0FF

Tetradic

FFFCF2

F0FFF4

F0F3FF

FFF0FB

Contrast Matrix WCAG 2.1 Contrast

FFFCF2	D7DEE1	AFC1CF	9DA0BB	8B80A7
—	1.3 Fail	1.8 Fail	2.5 Fail	3.6 AA Large
1.3 Fail	—	1.4 Fail	1.9 Fail	2.7 Fail
1.8 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.5 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
3.6 AA Large	2.7 Fail	2.0 Fail	1.4 Fail	—

White BG

1.0Fail

1.4Fail

1.8Fail

2.6Fail

3.7AA Large

Black BG

20.5AAA

15.4AAA

11.4AAA

8.2AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FEFEF4

DADAE0

B7B7CC

9E9EB4

86869E

Deuteranopia

FEFEF5

DAD9E0

B6B4CB

9E9EB3

87889B

Tritanopia

FFF6F7

D7E0E0

B0C9C8

9DAFAE

8A9694

Achromatopsia

FCFCFC

DCDCDC

BDBDBD

A2A2A2

888888

Shades & Tints Shades & Tints

#FFFCF2

Dark

Light

#D7DEE1

Dark

Light

#AFC1CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffcf2;
  --color-2: #d7dee1;
  --color-3: #afc1cf;
  --color-4: #9da0bb;
  --color-5: #8b80a7;
}

SCSS

$color-1: #fffcf2;
$color-2: #d7dee1;
$color-3: #afc1cf;
$color-4: #9da0bb;
$color-5: #8b80a7;

TAILWIND

colors: {
  'brand-1': '#fffcf2',
  'brand-2': '#d7dee1',
  'brand-3': '#afc1cf',
  'brand-4': '#9da0bb',
  'brand-5': '#8b80a7',
}

RGB Array

[255, 252, 242], [215, 222, 225], [175, 193, 207], [157, 160, 187], [139, 128, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFCF2, #D7DEE1, #AFC1CF, #9DA0BB, #8B80A7 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: #fffcf2; --color-2: #d7dee1; --color-3: #afc1cf; --color-4: #9da0bb; --color-5: #8b80a7. 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