← Back to Editor

#88757B · #84C292 · #BFCF8A · #F1D979 · #F1855A

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 Library

Color Details Color Details

#88757B

Dark Violet · Gray · Warm Gray

HEX
#88757B
RGB
rgb(136, 117, 123)
HSL
hsl(341, 8%, 50%)
HSB
hsb(341, 14%, 53%)
CMYK
cmyk(0%, 14%, 10%, 47%)
Oklch
oklch(58.2% 0.025 356.9)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#84C292

Celadon · DarkSeaGreen · Apple Green

HEX
#84C292
RGB
rgb(132, 194, 146)
HSL
hsl(134, 34%, 64%)
HSB
hsb(134, 32%, 76%)
CMYK
cmyk(32%, 0%, 25%, 24%)
Oklch
oklch(75.9% 0.094 150.8)

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

#BFCF8A

Willow Green · Tan · Apple Green

HEX
#BFCF8A
RGB
rgb(191, 207, 138)
HSL
hsl(74, 42%, 68%)
HSB
hsb(74, 33%, 81%)
CMYK
cmyk(8%, 0%, 33%, 19%)
Oklch
oklch(82.6% 0.092 119.1)

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

#F1D979

Goose Yellow · Khaki · Sunflower

HEX
#F1D979
RGB
rgb(241, 217, 121)
HSL
hsl(48, 81%, 71%)
HSB
hsb(48, 50%, 95%)
CMYK
cmyk(0%, 10%, 50%, 5%)
Oklch
oklch(88.5% 0.120 95.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#F1855A

Apricot · Coral · Warm Sun

HEX
#F1855A
RGB
rgb(241, 133, 90)
HSL
hsl(17, 84%, 65%)
HSB
hsb(17, 63%, 95%)
CMYK
cmyk(0%, 45%, 63%, 5%)
Oklch
oklch(72.7% 0.144 41.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88757B
758A83

Analogous

8A7586
88757B
8A7975

Triadic

88757B
7C8A75
757C8A

Split-Comp.

88757B
758A79
75868A

Tetradic

88757B
868A75
758A83
79758A

Contrast Matrix WCAG 2.1 Contrast

88757B
84C292
BFCF8A
F1D979
F1855A
—
2.1
Fail
2.6
Fail
3.1
AA Large
1.7
Fail
2.1
Fail
—
1.2
Fail
1.5
Fail
1.2
Fail
2.6
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
3.1
AA Large
1.5
Fail
1.2
Fail
—
1.8
Fail
1.7
Fail
1.2
Fail
1.5
Fail
1.8
Fail
—
White BG
4.3AA Large
2.1Fail
1.7Fail
1.4Fail
2.5Fail
Black BG
4.9AA
10.1AAA
12.5AAA
14.9AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80807A
9F9F9E
C6C69B
E7E690
C2C164

Deuteranopia

818279
9B97A0
C5C49F
E8EA96
C9D167

Tritanopia

877878
87A7A9
C0A8AB
F0A3A7
EC6D6E

Achromatopsia

7B7B7B
AAAAAA
C2C2C2
D5D5D5
A0A0A0

Shades & Tints Shades & Tints

#88757B

Dark
Light

#84C292

Dark
Light

#BFCF8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88757b;
  --color-2: #84c292;
  --color-3: #bfcf8a;
  --color-4: #f1d979;
  --color-5: #f1855a;
}

SCSS

$color-1: #88757b;
$color-2: #84c292;
$color-3: #bfcf8a;
$color-4: #f1d979;
$color-5: #f1855a;

TAILWIND

colors: {
  'brand-1': '#88757b',
  'brand-2': '#84c292',
  'brand-3': '#bfcf8a',
  'brand-4': '#f1d979',
  'brand-5': '#f1855a',
}

RGB Array

[136, 117, 123], [132, 194, 146], [191, 207, 138], [241, 217, 121], [241, 133, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #88757B, #84C292, #BFCF8A, #F1D979, #F1855A is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #88757b; --color-2: #84c292; --color-3: #bfcf8a; --color-4: #f1d979; --color-5: #f1855a. 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. 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. 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