← Back to Editor

#F2F0E4 · #E7CDAC · #B5B7AC · #7C898F · #546785

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

#F2F0E4

Fresh Green · Linen · Lemon Cream

HEX
#F2F0E4
RGB
rgb(242, 240, 228)
HSL
hsl(51, 35%, 92%)
HSB
hsb(51, 6%, 95%)
CMYK
cmyk(0%, 1%, 6%, 5%)
Oklch
oklch(95.3% 0.016 99.0)

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

#E7CDAC

Goose Yellow · Wheat · Peach Orange

HEX
#E7CDAC
RGB
rgb(231, 205, 172)
HSL
hsl(34, 55%, 79%)
HSB
hsb(34, 26%, 91%)
CMYK
cmyk(0%, 11%, 26%, 9%)
Oklch
oklch(86.2% 0.053 73.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B5B7AC

Ash · DarkGray · Silver Sand

HEX
#B5B7AC
RGB
rgb(181, 183, 172)
HSL
hsl(71, 7%, 70%)
HSB
hsb(71, 6%, 72%)
CMYK
cmyk(1%, 0%, 6%, 28%)
Oklch
oklch(77.5% 0.015 115.1)

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

#7C898F

Slate Blue · LightSlateGray · Warm Gray

HEX
#7C898F
RGB
rgb(124, 137, 143)
HSL
hsl(199, 8%, 52%)
HSB
hsb(199, 13%, 56%)
CMYK
cmyk(13%, 4%, 0%, 44%)
Oklch
oklch(62.1% 0.018 227.1)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#546785

Indigo · DimGray · Navy Blue

HEX
#546785
RGB
rgb(84, 103, 133)
HSL
hsl(217, 23%, 43%)
HSB
hsb(217, 37%, 52%)
CMYK
cmyk(37%, 23%, 0%, 48%)
Oklch
oklch(51.0% 0.053 259.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F0E4
E3E6F2

Analogous

F2E8E3
F2F0E4
EDF2E3

Triadic

F2F0E4
E3F2F0
F0E3F2

Split-Comp.

F2F0E4
E3EDF2
E8E3F2

Tetradic

F2F0E4
E3F2E8
E3E6F2
F2E3ED

Contrast Matrix WCAG 2.1 Contrast

F2F0E4
E7CDAC
B5B7AC
7C898F
546785
—
1.3
Fail
1.8
Fail
3.1
AA Large
5.0
AA
1.3
Fail
—
1.3
Fail
2.4
Fail
3.8
AA Large
1.8
Fail
1.3
Fail
—
1.8
Fail
2.8
Fail
3.1
AA Large
2.4
Fail
1.8
Fail
—
1.6
Fail
5.0
AA
3.8
AA Large
2.8
Fail
1.6
Fail
—
White BG
1.1Fail
1.5Fail
2.0Fail
3.6AA Large
5.7AA
Black BG
18.4AAA
13.7AAA
10.3AAA
5.8AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1E7
DCDCB4
B6B6AF
82828E
5C5C7E

Deuteranopia

F1F1E8
DDDFB6
B6B6AF
81808D
5B5A7C

Tritanopia

F2E9EA
E6BABC
B5B1B1
7D8C8C
557877

Achromatopsia

EFEFEF
D1D1D1
B5B5B5
868686
656565

Shades & Tints Shades & Tints

#F2F0E4

Dark
Light

#E7CDAC

Dark
Light

#B5B7AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f0e4;
  --color-2: #e7cdac;
  --color-3: #b5b7ac;
  --color-4: #7c898f;
  --color-5: #546785;
}

SCSS

$color-1: #f2f0e4;
$color-2: #e7cdac;
$color-3: #b5b7ac;
$color-4: #7c898f;
$color-5: #546785;

TAILWIND

colors: {
  'brand-1': '#f2f0e4',
  'brand-2': '#e7cdac',
  'brand-3': '#b5b7ac',
  'brand-4': '#7c898f',
  'brand-5': '#546785',
}

RGB Array

[242, 240, 228], [231, 205, 172], [181, 183, 172], [124, 137, 143], [84, 103, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2F0E4, #E7CDAC, #B5B7AC, #7C898F, #546785 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: #f2f0e4; --color-2: #e7cdac; --color-3: #b5b7ac; --color-4: #7c898f; --color-5: #546785. 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