← Back to Editor

#494B4D · #78786F · #CDD7B6 · #EFF0E3 · #B2D1D2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#494B4D

Dark Cyan · DarkSlateGray · Charcoal

HEX
#494B4D
RGB
rgb(73, 75, 77)
HSL
hsl(210, 3%, 29%)
HSB
hsb(210, 5%, 30%)
CMYK
cmyk(5%, 3%, 0%, 70%)
Oklch
oklch(41.2% 0.004 247.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#78786F

Ink Gray · Gray · Warm Gray

HEX
#78786F
RGB
rgb(120, 120, 111)
HSL
hsl(60, 4%, 45%)
HSB
hsb(60, 7%, 47%)
CMYK
cmyk(0%, 0%, 7%, 53%)
Oklch
oklch(57.0% 0.014 106.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#CDD7B6

Willow Green · Silver · Apple Green

HEX
#CDD7B6
RGB
rgb(205, 215, 182)
HSL
hsl(78, 29%, 78%)
HSB
hsb(78, 15%, 84%)
CMYK
cmyk(5%, 0%, 15%, 16%)
Oklch
oklch(86.3% 0.046 121.1)

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

#EFF0E3

Fresh Green · Beige · Lemon Cream

HEX
#EFF0E3
RGB
rgb(239, 240, 227)
HSL
hsl(65, 30%, 92%)
HSB
hsb(65, 5%, 94%)
CMYK
cmyk(0%, 0%, 5%, 6%)
Oklch
oklch(95.1% 0.017 110.3)

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

#B2D1D2

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B2D1D2
RGB
rgb(178, 209, 210)
HSL
hsl(182, 26%, 76%)
HSB
hsb(182, 15%, 82%)
CMYK
cmyk(15%, 0%, 0%, 18%)
Oklch
oklch(83.8% 0.033 198.9)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

494B4D
4C4A48

Analogous

484C4C
494B4D
48484C

Triadic

494B4D
4C484A
4A4C48

Split-Comp.

494B4D
4C4848
4C4C48

Tetradic

494B4D
4C484C
4C4A48
484C48

Contrast Matrix WCAG 2.1 Contrast

494B4D
78786F
CDD7B6
EFF0E3
B2D1D2
—
2.0
Fail
5.8
AA
7.6
AAA
5.4
AA
2.0
Fail
—
3.0
Fail
3.9
AA Large
2.7
Fail
5.8
AA
3.0
Fail
—
1.3
Fail
1.1
Fail
7.6
AAA
3.9
AA Large
1.3
Fail
—
1.4
Fail
5.4
AA
2.7
Fail
1.1
Fail
1.4
Fail
—
White BG
8.8AAA
4.5AA Large
1.5Fail
1.2Fail
1.6Fail
Black BG
2.4Fail
4.7AA
14.0AAA
18.2AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A4D
787871
D1D1BE
EFEFE6
BFC0D2

Deuteranopia

4A4A4C
787872
D1D0C0
EFEFE7
BEBBD2

Tritanopia

494C4C
787373
CEC4C6
EFE9E9
B4D2D2

Achromatopsia

4B4B4B
777777
D0D0D0
EEEEEE
C8C8C8

Shades & Tints Shades & Tints

#494B4D

Dark
Light

#78786F

Dark
Light

#CDD7B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #494b4d;
  --color-2: #78786f;
  --color-3: #cdd7b6;
  --color-4: #eff0e3;
  --color-5: #b2d1d2;
}

SCSS

$color-1: #494b4d;
$color-2: #78786f;
$color-3: #cdd7b6;
$color-4: #eff0e3;
$color-5: #b2d1d2;

TAILWIND

colors: {
  'brand-1': '#494b4d',
  'brand-2': '#78786f',
  'brand-3': '#cdd7b6',
  'brand-4': '#eff0e3',
  'brand-5': '#b2d1d2',
}

RGB Array

[73, 75, 77], [120, 120, 111], [205, 215, 182], [239, 240, 227], [178, 209, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #494B4D, #78786F, #CDD7B6, #EFF0E3, #B2D1D2 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: #494b4d; --color-2: #78786f; --color-3: #cdd7b6; --color-4: #eff0e3; --color-5: #b2d1d2. 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