← Back to Editor

#F4F1D8 · #D8D6CB · #C9BAB5 · #C69DAB · #978788

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4F1D8

Fresh Green · Beige · Lemon Cream

HEX
#F4F1D8
RGB
rgb(244, 241, 216)
HSL
hsl(54, 56%, 90%)
HSB
hsb(54, 11%, 96%)
CMYK
cmyk(0%, 1%, 11%, 4%)
Oklch
oklch(95.4% 0.033 101.4)

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

#D8D6CB

Fresh Green · LightGray · Lemon Cream

HEX
#D8D6CB
RGB
rgb(216, 214, 203)
HSL
hsl(51, 14%, 82%)
HSB
hsb(51, 6%, 85%)
CMYK
cmyk(0%, 1%, 6%, 15%)
Oklch
oklch(87.5% 0.015 98.3)

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

#C9BAB5

Apricot · Silver · Warm Sun

HEX
#C9BAB5
RGB
rgb(201, 186, 181)
HSL
hsl(15, 16%, 75%)
HSB
hsb(15, 10%, 79%)
CMYK
cmyk(0%, 7%, 10%, 21%)
Oklch
oklch(80.0% 0.019 39.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#C69DAB

Rouge · DarkGray · Rose Pink

HEX
#C69DAB
RGB
rgb(198, 157, 171)
HSL
hsl(340, 26%, 70%)
HSB
hsb(340, 21%, 78%)
CMYK
cmyk(0%, 21%, 14%, 22%)
Oklch
oklch(73.8% 0.052 356.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#978788

Ash · Gray · Silver Sand

HEX
#978788
RGB
rgb(151, 135, 136)
HSL
hsl(356, 7%, 56%)
HSB
hsb(356, 11%, 59%)
CMYK
cmyk(0%, 11%, 10%, 41%)
Oklch
oklch(63.8% 0.019 13.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F1D8
D7DAF4

Analogous

F4E3D7
F4F1D8
E8F4D7

Triadic

F4F1D8
D7F4F1
F1D7F4

Split-Comp.

F4F1D8
D7E8F4
E3D7F4

Tetradic

F4F1D8
D7F4E3
D7DAF4
F4D7E8

Contrast Matrix WCAG 2.1 Contrast

F4F1D8
D8D6CB
C9BAB5
C69DAB
978788
—
1.3
Fail
1.6
Fail
2.1
Fail
3.0
AA Large
1.3
Fail
—
1.3
Fail
1.6
Fail
2.3
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
3.0
AA Large
2.3
Fail
1.8
Fail
1.4
Fail
—
White BG
1.1Fail
1.5Fail
1.9Fail
2.4Fail
3.4AA Large
Black BG
18.4AAA
14.4AAA
11.2AAA
8.8AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3DE
D7D7CE
C3C2B6
B4B4A8
909088

Deuteranopia

F3F3E0
D7D7CE
C3C5B7
B7BAA7
919288

Tritanopia

F4E3E4
D8D0D0
C8B7B7
C4A5A4
968888

Achromatopsia

EFEFEF
D5D5D5
BEBEBE
ABABAB
8C8C8C

Shades & Tints Shades & Tints

#F4F1D8

Dark
Light

#D8D6CB

Dark
Light

#C9BAB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f1d8;
  --color-2: #d8d6cb;
  --color-3: #c9bab5;
  --color-4: #c69dab;
  --color-5: #978788;
}

SCSS

$color-1: #f4f1d8;
$color-2: #d8d6cb;
$color-3: #c9bab5;
$color-4: #c69dab;
$color-5: #978788;

TAILWIND

colors: {
  'brand-1': '#f4f1d8',
  'brand-2': '#d8d6cb',
  'brand-3': '#c9bab5',
  'brand-4': '#c69dab',
  'brand-5': '#978788',
}

RGB Array

[244, 241, 216], [216, 214, 203], [201, 186, 181], [198, 157, 171], [151, 135, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F1D8, #D8D6CB, #C9BAB5, #C69DAB, #978788 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: #f4f1d8; --color-2: #d8d6cb; --color-3: #c9bab5; --color-4: #c69dab; --color-5: #978788. 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