← Back to Editor

#F5F0D0 · #9BC1AD · #7FB095 · #705C5A · #826D6B

muted

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5F0D0

Fresh Green · Beige · Lemon Cream

HEX
#F5F0D0
RGB
rgb(245, 240, 208)
HSL
hsl(52, 65%, 89%)
HSB
hsb(52, 15%, 96%)
CMYK
cmyk(0%, 2%, 15%, 4%)
Oklch
oklch(95.1% 0.042 99.8)

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

#9BC1AD

Celadon · DarkGray · Apple Green

HEX
#9BC1AD
RGB
rgb(155, 193, 173)
HSL
hsl(148, 23%, 68%)
HSB
hsb(148, 20%, 76%)
CMYK
cmyk(20%, 0%, 10%, 24%)
Oklch
oklch(77.8% 0.050 162.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#7FB095

Celadon · DarkSeaGreen · Olive Green

HEX
#7FB095
RGB
rgb(127, 176, 149)
HSL
hsl(147, 24%, 59%)
HSB
hsb(147, 28%, 69%)
CMYK
cmyk(28%, 0%, 15%, 31%)
Oklch
oklch(71.5% 0.065 160.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#705C5A

Crimson · DimGray · Wine Red

HEX
#705C5A
RGB
rgb(112, 92, 90)
HSL
hsl(5, 11%, 40%)
HSB
hsb(5, 20%, 44%)
CMYK
cmyk(0%, 18%, 20%, 56%)
Oklch
oklch(49.4% 0.026 24.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#826D6B

Crimson · DimGray · Passion Red

HEX
#826D6B
RGB
rgb(130, 109, 107)
HSL
hsl(5, 10%, 46%)
HSB
hsb(5, 18%, 51%)
CMYK
cmyk(0%, 16%, 18%, 49%)
Oklch
oklch(55.4% 0.027 24.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F0D0
D1D6F5

Analogous

F5DED1
F5F0D0
E8F5D1

Triadic

F5F0D0
D1F5F0
F0D1F5

Split-Comp.

F5F0D0
D1E8F5
DED1F5

Tetradic

F5F0D0
D1F5DE
D1D6F5
F5D1E8

Contrast Matrix WCAG 2.1 Contrast

F5F0D0
9BC1AD
7FB095
705C5A
826D6B
—
1.7
Fail
2.1
Fail
5.4
AA
4.2
AA Large
1.7
Fail
—
1.2
Fail
3.2
AA Large
2.4
Fail
2.1
Fail
1.2
Fail
—
2.5
Fail
2.0
Fail
5.4
AA
3.2
AA Large
2.5
Fail
—
1.3
Fail
4.2
AA Large
2.4
Fail
2.0
Fail
1.3
Fail
—
White BG
1.2Fail
2.0Fail
2.5Fail
6.2AA
4.8AA
Black BG
18.3AAA
10.6AAA
8.5AAA
3.4AA Large
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3D8
ABACB2
94959C
67675A
79796B

Deuteranopia

F3F4DA
A9A6B3
918E9D
696A5B
7A7C6C

Tritanopia

F5DEDF
9DB6B7
81A1A2
6F5B5B
816C6C

Achromatopsia

EEEEEE
B3B3B3
9E9E9E
626262
737373

Shades & Tints Shades & Tints

#F5F0D0

Dark
Light

#9BC1AD

Dark
Light

#7FB095

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f0d0;
  --color-2: #9bc1ad;
  --color-3: #7fb095;
  --color-4: #705c5a;
  --color-5: #826d6b;
}

SCSS

$color-1: #f5f0d0;
$color-2: #9bc1ad;
$color-3: #7fb095;
$color-4: #705c5a;
$color-5: #826d6b;

TAILWIND

colors: {
  'brand-1': '#f5f0d0',
  'brand-2': '#9bc1ad',
  'brand-3': '#7fb095',
  'brand-4': '#705c5a',
  'brand-5': '#826d6b',
}

RGB Array

[245, 240, 208], [155, 193, 173], [127, 176, 149], [112, 92, 90], [130, 109, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #F5F0D0, #9BC1AD, #7FB095, #705C5A, #826D6B is ideal for: brand design, premium product pages, magazine layouts, 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: #f5f0d0; --color-2: #9bc1ad; --color-3: #7fb095; --color-4: #705c5a; --color-5: #826d6b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco 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