← Back to Editor

#40484F · #848973 · #CCBB84 · #E6E6CC · #B6D5C6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#40484F

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#40484F
RGB
rgb(64, 72, 79)
HSL
hsl(208, 10%, 28%)
HSB
hsb(208, 19%, 31%)
CMYK
cmyk(19%, 9%, 0%, 69%)
Oklch
oklch(39.7% 0.016 244.6)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#848973

Grass Green · Gray · Warm Gray

HEX
#848973
RGB
rgb(132, 137, 115)
HSL
hsl(74, 9%, 49%)
HSB
hsb(74, 16%, 54%)
CMYK
cmyk(4%, 0%, 16%, 46%)
Oklch
oklch(62.0% 0.033 117.8)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#CCBB84

Ginger · Tan · Sunflower

HEX
#CCBB84
RGB
rgb(204, 187, 132)
HSL
hsl(46, 41%, 66%)
HSB
hsb(46, 35%, 80%)
CMYK
cmyk(0%, 8%, 35%, 20%)
Oklch
oklch(79.3% 0.075 92.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E6E6CC

Fresh Green · Bisque · Lemon Cream

HEX
#E6E6CC
RGB
rgb(230, 230, 204)
HSL
hsl(60, 34%, 85%)
HSB
hsb(60, 11%, 90%)
CMYK
cmyk(0%, 0%, 11%, 10%)
Oklch
oklch(91.8% 0.034 107.1)

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

#B6D5C6

Jade · Silver · Apple Green

HEX
#B6D5C6
RGB
rgb(182, 213, 198)
HSL
hsl(151, 27%, 77%)
HSB
hsb(151, 15%, 84%)
CMYK
cmyk(15%, 0%, 7%, 16%)
Oklch
oklch(84.6% 0.039 164.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40484F
4F4740

Analogous

404F4E
40484F
40414F

Triadic

40484F
4F4048
484F40

Split-Comp.

40484F
4F4041
4F4E40

Tetradic

40484F
4E404F
4F4740
414F40

Contrast Matrix WCAG 2.1 Contrast

40484F
848973
CCBB84
E6E6CC
B6D5C6
—
2.6
Fail
4.9
AA
7.3
AAA
5.9
AA
2.6
Fail
—
1.9
Fail
2.9
Fail
2.3
Fail
4.9
AA
1.9
Fail
—
1.5
Fail
1.2
Fail
7.3
AAA
2.9
Fail
1.5
Fail
—
1.2
Fail
5.9
AA
2.3
Fail
1.2
Fail
1.2
Fail
—
White BG
9.3AAA
3.6AA Large
1.9Fail
1.3Fail
1.6Fail
Black BG
2.3Fail
5.8AA
11.0AAA
16.6AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43444D
868678
C5C491
E6E6D2
C3C4CA

Deuteranopia

43424D
86867A
C6C795
E6E6D4
C2BFCB

Tritanopia

404C4C
847D7D
CB9C9E
E6D7D8
B8CCCD

Achromatopsia

464646
858585
BABABA
E3E3E3
CACACA

Shades & Tints Shades & Tints

#40484F

Dark
Light

#848973

Dark
Light

#CCBB84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40484f;
  --color-2: #848973;
  --color-3: #ccbb84;
  --color-4: #e6e6cc;
  --color-5: #b6d5c6;
}

SCSS

$color-1: #40484f;
$color-2: #848973;
$color-3: #ccbb84;
$color-4: #e6e6cc;
$color-5: #b6d5c6;

TAILWIND

colors: {
  'brand-1': '#40484f',
  'brand-2': '#848973',
  'brand-3': '#ccbb84',
  'brand-4': '#e6e6cc',
  'brand-5': '#b6d5c6',
}

RGB Array

[64, 72, 79], [132, 137, 115], [204, 187, 132], [230, 230, 204], [182, 213, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #40484F, #848973, #CCBB84, #E6E6CC, #B6D5C6 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: #40484f; --color-2: #848973; --color-3: #ccbb84; --color-4: #e6e6cc; --color-5: #b6d5c6. 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 general-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