← Back to Editor

#5C4D48 · #F3AE9E · #D0A199 · #87A09A · #4CB0AE

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

#5C4D48

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5C4D48
RGB
rgb(92, 77, 72)
HSL
hsl(15, 12%, 32%)
HSB
hsb(15, 22%, 36%)
CMYK
cmyk(0%, 16%, 22%, 64%)
Oklch
oklch(43.4% 0.022 39.3)

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

#F3AE9E

Peach Pink · BurlyWood · Coral Red

HEX
#F3AE9E
RGB
rgb(243, 174, 158)
HSL
hsl(11, 78%, 79%)
HSB
hsb(11, 35%, 95%)
CMYK
cmyk(0%, 28%, 35%, 5%)
Oklch
oklch(81.2% 0.085 33.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D0A199

Peach Pink · Tan · Coral Red

HEX
#D0A199
RGB
rgb(208, 161, 153)
HSL
hsl(9, 37%, 71%)
HSB
hsb(9, 26%, 82%)
CMYK
cmyk(0%, 23%, 26%, 18%)
Oklch
oklch(75.0% 0.057 29.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#87A09A

Mineral Blue · LightSlateGray · Lake Green

HEX
#87A09A
RGB
rgb(135, 160, 154)
HSL
hsl(166, 12%, 58%)
HSB
hsb(166, 16%, 63%)
CMYK
cmyk(16%, 0%, 4%, 37%)
Oklch
oklch(68.5% 0.029 179.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#4CB0AE

Mineral Blue · CadetBlue · Mint Ice

HEX
#4CB0AE
RGB
rgb(76, 176, 174)
HSL
hsl(179, 40%, 49%)
HSB
hsb(179, 57%, 69%)
CMYK
cmyk(57%, 0%, 1%, 31%)
Oklch
oklch(69.8% 0.093 193.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C4D48
48565B

Analogous

5B484D
5C4D48
5B5648

Triadic

5C4D48
485B4D
4D485B

Split-Comp.

5C4D48
485B56
484D5B

Tetradic

5C4D48
4D5B48
48565B
56485B

Contrast Matrix WCAG 2.1 Contrast

5C4D48
F3AE9E
D0A199
87A09A
4CB0AE
—
4.4
AA Large
3.5
AA Large
2.9
Fail
3.1
AA Large
4.4
AA Large
—
1.2
Fail
1.5
Fail
1.4
Fail
3.5
AA Large
1.2
Fail
—
1.2
Fail
1.1
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
3.1
AA Large
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
8.0AAA
1.8Fail
2.3Fail
2.8Fail
2.6Fail
Black BG
2.6Fail
11.4AAA
9.2AAA
7.5AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565549
D5D5A2
BCBB9B
92929B
7778AE

Deuteranopia

56574A
D9DEA3
BEC29B
908F9C
726AAF

Tritanopia

5B4A4A
F0A5A6
CE9C9D
889D9D
51AFAF

Achromatopsia

515151
C1C1C1
AEAEAE
989898
929292

Shades & Tints Shades & Tints

#5C4D48

Dark
Light

#F3AE9E

Dark
Light

#D0A199

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c4d48;
  --color-2: #f3ae9e;
  --color-3: #d0a199;
  --color-4: #87a09a;
  --color-5: #4cb0ae;
}

SCSS

$color-1: #5c4d48;
$color-2: #f3ae9e;
$color-3: #d0a199;
$color-4: #87a09a;
$color-5: #4cb0ae;

TAILWIND

colors: {
  'brand-1': '#5c4d48',
  'brand-2': '#f3ae9e',
  'brand-3': '#d0a199',
  'brand-4': '#87a09a',
  'brand-5': '#4cb0ae',
}

RGB Array

[92, 77, 72], [243, 174, 158], [208, 161, 153], [135, 160, 154], [76, 176, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C4D48, #F3AE9E, #D0A199, #87A09A, #4CB0AE is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5c4d48; --color-2: #f3ae9e; --color-3: #d0a199; --color-4: #87a09a; --color-5: #4cb0ae. 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. 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