← Back to Editor

#F1F2E2 · #EEE2E8 · #D1BBC3 · #8A7882 · #52444A

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

WorkspaceReadingData Visualization

Color Details Color Details

#F1F2E2

Fresh Green · Beige · Lemon Cream

HEX
#F1F2E2
RGB
rgb(241, 242, 226)
HSL
hsl(64, 38%, 92%)
HSB
hsb(64, 7%, 95%)
CMYK
cmyk(0%, 0%, 7%, 5%)
Oklch
oklch(95.6% 0.021 109.7)

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

#EEE2E8

Rouge · Linen · Cherry Blossom

HEX
#EEE2E8
RGB
rgb(238, 226, 232)
HSL
hsl(330, 26%, 91%)
HSB
hsb(330, 5%, 93%)
CMYK
cmyk(0%, 5%, 3%, 7%)
Oklch
oklch(92.4% 0.015 345.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D1BBC3

Rouge · Silver · Cherry Blossom

HEX
#D1BBC3
RGB
rgb(209, 187, 195)
HSL
hsl(338, 19%, 78%)
HSB
hsb(338, 11%, 82%)
CMYK
cmyk(0%, 11%, 7%, 18%)
Oklch
oklch(81.3% 0.027 353.7)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#8A7882

Ash · Gray · Warm Gray

HEX
#8A7882
RGB
rgb(138, 120, 130)
HSL
hsl(327, 7%, 51%)
HSB
hsb(327, 13%, 54%)
CMYK
cmyk(0%, 13%, 6%, 46%)
Oklch
oklch(59.2% 0.026 343.4)

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

#52444A

Dark Violet · DarkSlateGray · Charcoal

HEX
#52444A
RGB
rgb(82, 68, 74)
HSL
hsl(334, 9%, 29%)
HSB
hsb(334, 17%, 32%)
CMYK
cmyk(0%, 17%, 10%, 68%)
Oklch
oklch(40.3% 0.021 350.4)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F2E2
E4E3F2

Analogous

F2ECE3
F1F2E2
EAF2E3

Triadic

F1F2E2
E3F1F2
F2E3F1

Split-Comp.

F1F2E2
E3EAF2
ECE3F2

Tetradic

F1F2E2
E3F2EC
E4E3F2
F2E3EA

Contrast Matrix WCAG 2.1 Contrast

F1F2E2
EEE2E8
D1BBC3
8A7882
52444A
—
1.1
Fail
1.6
Fail
3.6
AA Large
8.1
AAA
1.1
Fail
—
1.4
Fail
3.3
AA Large
7.3
AAA
1.6
Fail
1.4
Fail
—
2.3
Fail
5.1
AA
3.6
AA Large
3.3
AA Large
2.3
Fail
—
2.2
Fail
8.1
AAA
7.3
AAA
5.1
AA
2.2
Fail
—
White BG
1.1Fail
1.3Fail
1.8Fail
4.1AA Large
9.2AAA
Black BG
18.5AAA
16.7AAA
11.6AAA
5.1AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1E6
E9E9E7
C7C7C1
828280
4C4C49

Deuteranopia

F1F1E7
EAEAE6
C9CAC1
83857F
4D4E48

Tritanopia

F1E9EA
EDE5E5
D0C0BF
897E7D
514747

Achromatopsia

F0F0F0
E6E6E6
C2C2C2
7F7F7F
494949

Shades & Tints Shades & Tints

#F1F2E2

Dark
Light

#EEE2E8

Dark
Light

#D1BBC3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f2e2;
  --color-2: #eee2e8;
  --color-3: #d1bbc3;
  --color-4: #8a7882;
  --color-5: #52444a;
}

SCSS

$color-1: #f1f2e2;
$color-2: #eee2e8;
$color-3: #d1bbc3;
$color-4: #8a7882;
$color-5: #52444a;

TAILWIND

colors: {
  'brand-1': '#f1f2e2',
  'brand-2': '#eee2e8',
  'brand-3': '#d1bbc3',
  'brand-4': '#8a7882',
  'brand-5': '#52444a',
}

RGB Array

[241, 242, 226], [238, 226, 232], [209, 187, 195], [138, 120, 130], [82, 68, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F2E2, #EEE2E8, #D1BBC3, #8A7882, #52444A is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #f1f2e2; --color-2: #eee2e8; --color-3: #d1bbc3; --color-4: #8a7882; --color-5: #52444a. 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 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