← Back to Editor

#473E3E · #8C7969 · #A0BDAC · #C1E6DF · #D3F0F2

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

#473E3E

Dark Cyan · DarkSlateGray · Charcoal

HEX
#473E3E
RGB
rgb(71, 62, 62)
HSL
hsl(0, 7%, 26%)
HSB
hsb(0, 13%, 28%)
CMYK
cmyk(0%, 13%, 13%, 72%)
Oklch
oklch(37.3% 0.013 17.7)

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

#8C7969

Tangerine · Gray · Amber Brown

HEX
#8C7969
RGB
rgb(140, 121, 105)
HSL
hsl(27, 14%, 48%)
HSB
hsb(27, 25%, 55%)
CMYK
cmyk(0%, 14%, 25%, 45%)
Oklch
oklch(58.9% 0.033 62.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A0BDAC

Celadon · DarkGray · Apple Green

HEX
#A0BDAC
RGB
rgb(160, 189, 172)
HSL
hsl(145, 18%, 68%)
HSB
hsb(145, 15%, 74%)
CMYK
cmyk(15%, 0%, 9%, 26%)
Oklch
oklch(77.2% 0.040 159.6)

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

#C1E6DF

Jade · LightBlue · Glacier Blue

HEX
#C1E6DF
RGB
rgb(193, 230, 223)
HSL
hsl(169, 43%, 83%)
HSB
hsb(169, 16%, 90%)
CMYK
cmyk(16%, 0%, 3%, 10%)
Oklch
oklch(89.6% 0.040 182.7)

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

#D3F0F2

Sky Blue · Lavender · Glacier Blue

HEX
#D3F0F2
RGB
rgb(211, 240, 242)
HSL
hsl(184, 54%, 89%)
HSB
hsb(184, 13%, 95%)
CMYK
cmyk(13%, 1%, 0%, 5%)
Oklch
oklch(93.5% 0.030 201.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

473E3E
3E4747

Analogous

473E42
473E3E
47423E

Triadic

473E3E
3E473E
3E3E47

Split-Comp.

473E3E
3E4742
3E4247

Tetradic

473E3E
42473E
3E4747
423E47

Contrast Matrix WCAG 2.1 Contrast

473E3E
8C7969
A0BDAC
C1E6DF
D3F0F2
—
2.5
Fail
5.1
AA
7.7
AAA
8.6
AAA
2.5
Fail
—
2.1
Fail
3.1
AA Large
3.5
AA Large
5.1
AA
2.1
Fail
—
1.5
Fail
1.7
Fail
7.7
AAA
3.1
AA Large
1.5
Fail
—
1.1
Fail
8.6
AAA
3.5
AA Large
1.7
Fail
1.1
Fail
—
White BG
10.4AAA
4.2AA Large
2.0Fail
1.3Fail
1.2Fail
Black BG
2.0Fail
5.1AA
10.4AAA
15.7AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43433E
84846D
ADADB0
D1D1E1
E0E0F2

Deuteranopia

44443E
85866E
ABA9B1
CFCCE1
DEDCF1

Tritanopia

473E3E
8B7071
A1B3B4
C3E2E2
D4F1F1

Achromatopsia

414141
7D7D7D
B2B2B2
DADADA
E8E8E8

Shades & Tints Shades & Tints

#473E3E

Dark
Light

#8C7969

Dark
Light

#A0BDAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #473e3e;
  --color-2: #8c7969;
  --color-3: #a0bdac;
  --color-4: #c1e6df;
  --color-5: #d3f0f2;
}

SCSS

$color-1: #473e3e;
$color-2: #8c7969;
$color-3: #a0bdac;
$color-4: #c1e6df;
$color-5: #d3f0f2;

TAILWIND

colors: {
  'brand-1': '#473e3e',
  'brand-2': '#8c7969',
  'brand-3': '#a0bdac',
  'brand-4': '#c1e6df',
  'brand-5': '#d3f0f2',
}

RGB Array

[71, 62, 62], [140, 121, 105], [160, 189, 172], [193, 230, 223], [211, 240, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #473E3E, #8C7969, #A0BDAC, #C1E6DF, #D3F0F2 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: #473e3e; --color-2: #8c7969; --color-3: #a0bdac; --color-4: #c1e6df; --color-5: #d3f0f2. 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