← Back to Editor

#636254 · #C4BB7A · #653E36 · #687B61 · #B8C0B2

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

#636254

Autumn Sage · DimGray · Charcoal

HEX
#636254
RGB
rgb(99, 98, 84)
HSL
hsl(56, 8%, 36%)
HSB
hsb(56, 15%, 39%)
CMYK
cmyk(0%, 1%, 15%, 61%)
Oklch
oklch(49.3% 0.022 103.8)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#C4BB7A

Fresh Green · Tan · Sunflower

HEX
#C4BB7A
RGB
rgb(196, 187, 122)
HSL
hsl(53, 39%, 62%)
HSB
hsb(53, 38%, 77%)
CMYK
cmyk(0%, 5%, 38%, 23%)
Oklch
oklch(78.4% 0.085 101.3)

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

#653E36

Crimson · DarkOliveGreen · Wine Red

HEX
#653E36
RGB
rgb(101, 62, 54)
HSL
hsl(10, 30%, 30%)
HSB
hsb(10, 47%, 40%)
CMYK
cmyk(0%, 39%, 47%, 60%)
Oklch
oklch(40.8% 0.057 32.2)

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

#687B61

Celadon · DimGray · Olive Green

HEX
#687B61
RGB
rgb(104, 123, 97)
HSL
hsl(104, 12%, 43%)
HSB
hsb(104, 21%, 48%)
CMYK
cmyk(15%, 0%, 21%, 52%)
Oklch
oklch(56.0% 0.045 137.3)

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

#B8C0B2

Celadon · Silver · Apple Green

HEX
#B8C0B2
RGB
rgb(184, 192, 178)
HSL
hsl(94, 10%, 73%)
HSB
hsb(94, 7%, 75%)
CMYK
cmyk(4%, 0%, 7%, 25%)
Oklch
oklch(79.8% 0.021 131.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

636254
545563

Analogous

635B54
636254
5D6354

Triadic

636254
546362
625463

Split-Comp.

636254
545D63
5B5463

Tetradic

636254
54635B
545563
63545D

Contrast Matrix WCAG 2.1 Contrast

636254
C4BB7A
653E36
687B61
B8C0B2
—
3.2
AA Large
1.5
Fail
1.3
Fail
3.3
AA Large
3.2
AA Large
—
4.7
AA
2.3
Fail
1.0
Fail
1.5
Fail
4.7
AA
—
2.0
Fail
4.9
AA
1.3
Fail
2.3
Fail
2.0
Fail
—
2.4
Fail
3.3
AA Large
1.0
Fail
4.9
AA
2.4
Fail
—
White BG
6.2AA
2.0Fail
9.1AAA
4.6AA
1.9Fail
Black BG
3.4AA Large
10.7AAA
2.3Fail
4.6AA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636357
C0C08A
545438
707067
BBBCB5

Deuteranopia

636358
C1C18E
565938
6F6E69
BBBAB6

Tritanopia

635A5B
C49699
63393A
696C6D
B8B8B9

Achromatopsia

616161
B6B6B6
494949
727272
BCBCBC

Shades & Tints Shades & Tints

#636254

Dark
Light

#C4BB7A

Dark
Light

#653E36

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #636254;
  --color-2: #c4bb7a;
  --color-3: #653e36;
  --color-4: #687b61;
  --color-5: #b8c0b2;
}

SCSS

$color-1: #636254;
$color-2: #c4bb7a;
$color-3: #653e36;
$color-4: #687b61;
$color-5: #b8c0b2;

TAILWIND

colors: {
  'brand-1': '#636254',
  'brand-2': '#c4bb7a',
  'brand-3': '#653e36',
  'brand-4': '#687b61',
  'brand-5': '#b8c0b2',
}

RGB Array

[99, 98, 84], [196, 187, 122], [101, 62, 54], [104, 123, 97], [184, 192, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #636254, #C4BB7A, #653E36, #687B61, #B8C0B2 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: #636254; --color-2: #c4bb7a; --color-3: #653e36; --color-4: #687b61; --color-5: #b8c0b2. 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