← Back to Editor

#FCF2D7 · #CED6F0 · #9DA5BF · #7A8196 · #5C5964

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

WorkspaceReadingData Visualization

Color Details Color Details

#FCF2D7

Goose Yellow · Beige · Lemon Cream

HEX
#FCF2D7
RGB
rgb(252, 242, 215)
HSL
hsl(44, 86%, 92%)
HSB
hsb(44, 15%, 99%)
CMYK
cmyk(0%, 4%, 15%, 1%)
Oklch
oklch(96.2% 0.037 90.1)

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

#CED6F0

Azure · LightGray · Sky Blue

HEX
#CED6F0
RGB
rgb(206, 214, 240)
HSL
hsl(226, 53%, 87%)
HSB
hsb(226, 14%, 94%)
CMYK
cmyk(14%, 11%, 0%, 6%)
Oklch
oklch(87.8% 0.037 272.0)

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

#9DA5BF

Azure · DarkGray · Cobalt Blue

HEX
#9DA5BF
RGB
rgb(157, 165, 191)
HSL
hsl(226, 21%, 68%)
HSB
hsb(226, 18%, 75%)
CMYK
cmyk(18%, 14%, 0%, 25%)
Oklch
oklch(72.4% 0.039 271.9)

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

#7A8196

Azure · LightSlateGray · Navy Blue

HEX
#7A8196
RGB
rgb(122, 129, 150)
HSL
hsl(225, 12%, 53%)
HSB
hsb(225, 19%, 59%)
CMYK
cmyk(19%, 14%, 0%, 41%)
Oklch
oklch(60.5% 0.033 270.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#5C5964

Ink Gray · DimGray · Charcoal

HEX
#5C5964
RGB
rgb(92, 89, 100)
HSL
hsl(256, 6%, 37%)
HSB
hsb(256, 11%, 39%)
CMYK
cmyk(8%, 11%, 0%, 61%)
Oklch
oklch(47.1% 0.018 298.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCF2D7
D9E2FC

Analogous

FCE1D9
FCF2D7
F4FCD9

Triadic

FCF2D7
D9FCF3
F3D9FC

Split-Comp.

FCF2D7
D9F4FC
E1D9FC

Tetradic

FCF2D7
D9FCE1
D9E2FC
FCD9F4

Contrast Matrix WCAG 2.1 Contrast

FCF2D7
CED6F0
9DA5BF
7A8196
5C5964
—
1.3
Fail
2.2
Fail
3.5
AA Large
6.1
AA
1.3
Fail
—
1.7
Fail
2.7
Fail
4.7
AA
2.2
Fail
1.7
Fail
—
1.6
Fail
2.8
Fail
3.5
AA Large
2.7
Fail
1.6
Fail
—
1.8
Fail
6.1
AA
4.7
AA
2.8
Fail
1.8
Fail
—
White BG
1.1Fail
1.4Fail
2.5Fail
3.9AA Large
6.8AA
Black BG
18.8AAA
14.5AAA
8.6AAA
5.4AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8DE
D1D2EA
A0A1B9
7D7D91
5B5B61

Deuteranopia

F8F9DF
D1D0E8
A09FB7
7D7C90
5B5B61

Tritanopia

FBE3E4
CEE5E4
9DB4B3
7A8D8C
5C5F5F

Achromatopsia

F2F2F2
D7D7D7
A6A6A6
818181
5B5B5B

Shades & Tints Shades & Tints

#FCF2D7

Dark
Light

#CED6F0

Dark
Light

#9DA5BF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcf2d7;
  --color-2: #ced6f0;
  --color-3: #9da5bf;
  --color-4: #7a8196;
  --color-5: #5c5964;
}

SCSS

$color-1: #fcf2d7;
$color-2: #ced6f0;
$color-3: #9da5bf;
$color-4: #7a8196;
$color-5: #5c5964;

TAILWIND

colors: {
  'brand-1': '#fcf2d7',
  'brand-2': '#ced6f0',
  'brand-3': '#9da5bf',
  'brand-4': '#7a8196',
  'brand-5': '#5c5964',
}

RGB Array

[252, 242, 215], [206, 214, 240], [157, 165, 191], [122, 129, 150], [92, 89, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCF2D7, #CED6F0, #9DA5BF, #7A8196, #5C5964 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #fcf2d7; --color-2: #ced6f0; --color-3: #9da5bf; --color-4: #7a8196; --color-5: #5c5964. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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