← Back to Editor

#F7EBE4 · #CFCFCF · #97BFB7 · #949BA6 · #856D75

muted

A 5-color muted 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

#F7EBE4

Apricot · Linen · Peach Orange

HEX
#F7EBE4
RGB
rgb(247, 235, 228)
HSL
hsl(22, 54%, 93%)
HSB
hsb(22, 8%, 97%)
CMYK
cmyk(0%, 5%, 8%, 3%)
Oklch
oklch(94.8% 0.016 52.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CFCFCF

Silver Gray · LightGray · Pearl Gray

HEX
#CFCFCF
RGB
rgb(207, 207, 207)
HSL
hsl(0, 0%, 81%)
HSB
hsb(0, 0%, 81%)
CMYK
cmyk(0%, 0%, 0%, 19%)
Oklch
oklch(85.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#97BFB7

Jade · DarkGray · Lake Green

HEX
#97BFB7
RGB
rgb(151, 191, 183)
HSL
hsl(168, 24%, 67%)
HSB
hsb(168, 21%, 75%)
CMYK
cmyk(21%, 0%, 4%, 25%)
Oklch
oklch(77.3% 0.044 181.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#949BA6

Azure · DarkGray · Silver Sand

HEX
#949BA6
RGB
rgb(148, 155, 166)
HSL
hsl(217, 9%, 62%)
HSB
hsb(217, 11%, 65%)
CMYK
cmyk(11%, 7%, 0%, 35%)
Oklch
oklch(68.7% 0.018 259.4)

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

#856D75

Dark Violet · Gray · Camellia

HEX
#856D75
RGB
rgb(133, 109, 117)
HSL
hsl(340, 10%, 47%)
HSB
hsb(340, 18%, 52%)
CMYK
cmyk(0%, 18%, 12%, 48%)
Oklch
oklch(56.0% 0.032 356.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7EBE4
E4F0F7

Analogous

F7E4E6
F7EBE4
F7F4E4

Triadic

F7EBE4
E4F7EB
EBE4F7

Split-Comp.

F7EBE4
E4F7F4
E4E6F7

Tetradic

F7EBE4
E6F7E4
E4F0F7
F4E4F7

Contrast Matrix WCAG 2.1 Contrast

F7EBE4
CFCFCF
97BFB7
949BA6
856D75
—
1.3
Fail
1.7
Fail
2.4
Fail
4.0
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
3.0
AA Large
1.7
Fail
1.3
Fail
—
1.4
Fail
2.4
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.7
Fail
4.0
AA Large
3.0
AA Large
2.4
Fail
1.7
Fail
—
White BG
1.2Fail
1.6Fail
2.0Fail
2.8Fail
4.7AA
Black BG
18.0AAA
13.5AAA
10.5AAA
7.5AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E6
CFCFCF
A8A9B9
9797A3
7B7A73

Deuteranopia

F3F3E6
CFCFCF
A6A3B9
9796A3
7C7E73

Tritanopia

F6E7E7
CFCFCF
99BABB
94A1A1
847271

Achromatopsia

EEEEEE
CFCFCF
B2B2B2
9A9A9A
757575

Shades & Tints Shades & Tints

#F7EBE4

Dark
Light

#CFCFCF

Dark
Light

#97BFB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ebe4;
  --color-2: #cfcfcf;
  --color-3: #97bfb7;
  --color-4: #949ba6;
  --color-5: #856d75;
}

SCSS

$color-1: #f7ebe4;
$color-2: #cfcfcf;
$color-3: #97bfb7;
$color-4: #949ba6;
$color-5: #856d75;

TAILWIND

colors: {
  'brand-1': '#f7ebe4',
  'brand-2': '#cfcfcf',
  'brand-3': '#97bfb7',
  'brand-4': '#949ba6',
  'brand-5': '#856d75',
}

RGB Array

[247, 235, 228], [207, 207, 207], [151, 191, 183], [148, 155, 166], [133, 109, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #F7EBE4, #CFCFCF, #97BFB7, #949BA6, #856D75 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: #f7ebe4; --color-2: #cfcfcf; --color-3: #97bfb7; --color-4: #949ba6; --color-5: #856d75. 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 muted-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