#FCFDD8 + #DDECCE + #AFDDD2 + #A6B4D0 + #918487 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCFDD8

Fresh Green · LightYellow · Lemon Cream

HEX

#FCFDD8

RGB

rgb(252, 253, 216)

HSL

hsl(62, 90%, 92%)

HSB

hsb(62, 15%, 99%)

CMYK

cmyk(0%, 0%, 15%, 1%)

Oklch

oklch(98.4% 0.048 108.5)

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

#DDECCE

Celadon · LightGray · Mint Green

HEX

#DDECCE

RGB

rgb(221, 236, 206)

HSL

hsl(90, 44%, 87%)

HSB

hsb(90, 13%, 93%)

CMYK

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

Oklch

oklch(92.4% 0.043 129.0)

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

#AFDDD2

Jade · LightBlue · Glacier Blue

HEX

#AFDDD2

RGB

rgb(175, 221, 210)

HSL

hsl(166, 40%, 78%)

HSB

hsb(166, 21%, 87%)

CMYK

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

Oklch

oklch(86.2% 0.050 178.8)

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

#A6B4D0

Azure · LightSteelBlue · Cobalt Blue

HEX

#A6B4D0

RGB

rgb(166, 180, 208)

HSL

hsl(220, 31%, 73%)

HSB

hsb(220, 20%, 82%)

CMYK

cmyk(20%, 13%, 0%, 18%)

Oklch

oklch(76.8% 0.043 264.3)

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

#918487

Ash · Gray · Warm Gray

HEX

#918487

RGB

rgb(145, 132, 135)

HSL

hsl(346, 6%, 54%)

HSB

hsb(346, 9%, 57%)

CMYK

cmyk(0%, 9%, 7%, 43%)

Oklch

oklch(62.6% 0.016 1.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFDD8

D9D8FD

Analogous

FDECD8

FCFDD8

E9FDD8

Triadic

FCFDD8

D8FCFD

FDD8FC

Split-Comp.

FCFDD8

D8E9FD

ECD8FD

Tetradic

FCFDD8

D8FDEC

D9D8FD

FDD8E9

Contrast Matrix WCAG 2.1 Contrast

FCFDD8	DDECCE	AFDDD2	A6B4D0	918487
—	1.2 Fail	1.4 Fail	2.0 Fail	3.4 AA Large
1.2 Fail	—	1.2 Fail	1.7 Fail	2.9 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	2.4 Fail
2.0 Fail	1.7 Fail	1.4 Fail	—	1.7 Fail
3.4 AA Large	2.9 Fail	2.4 Fail	1.7 Fail	—

White BG

1.0Fail

1.2Fail

1.5Fail

2.1Fail

3.6AA Large

Black BG

20.2AAA

17.0AAA

14.1AAA

10.1AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCE1

E3E4D5

C3C3D5

ACACC9

8B8B86

Deuteranopia

FCFCE3

E3E2D7

C0BDD5

ABAAC8

8C8D86

Tritanopia

FCE8EA

DEDBDC

B1D7D7

A7C4C3

908686

Achromatopsia

F8F8F8

E4E4E4

CECECE

B3B3B3

888888

Shades & Tints Shades & Tints

#FCFDD8

Dark

Light

#DDECCE

Dark

Light

#AFDDD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcfdd8;
  --color-2: #ddecce;
  --color-3: #afddd2;
  --color-4: #a6b4d0;
  --color-5: #918487;
}

SCSS

$color-1: #fcfdd8;
$color-2: #ddecce;
$color-3: #afddd2;
$color-4: #a6b4d0;
$color-5: #918487;

TAILWIND

colors: {
  'brand-1': '#fcfdd8',
  'brand-2': '#ddecce',
  'brand-3': '#afddd2',
  'brand-4': '#a6b4d0',
  'brand-5': '#918487',
}

RGB Array

[252, 253, 216], [221, 236, 206], [175, 221, 210], [166, 180, 208], [145, 132, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCFDD8, #DDECCE, #AFDDD2, #A6B4D0, #918487 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: #fcfdd8; --color-2: #ddecce; --color-3: #afddd2; --color-4: #a6b4d0; --color-5: #918487. 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