← Back to Editor

#4F2020 · #A87D7D · #CCC2C2 · #F7ECC8 · #3B3A39

A 5-color palette 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

#4F2020

Crimson · Maroon · Wine Red

HEX
#4F2020
RGB
rgb(79, 32, 32)
HSL
hsl(0, 42%, 22%)
HSB
hsb(0, 59%, 31%)
CMYK
cmyk(0%, 59%, 59%, 69%)
Oklch
oklch(31.2% 0.071 22.0)

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

#A87D7D

Crimson · Gray · Passion Red

HEX
#A87D7D
RGB
rgb(168, 125, 125)
HSL
hsl(0, 20%, 57%)
HSB
hsb(0, 26%, 66%)
CMYK
cmyk(0%, 26%, 26%, 34%)
Oklch
oklch(63.2% 0.054 18.7)

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

#CCC2C2

Peach Pink · Silver · Pearl Gray

HEX
#CCC2C2
RGB
rgb(204, 194, 194)
HSL
hsl(0, 9%, 78%)
HSB
hsb(0, 5%, 80%)
CMYK
cmyk(0%, 5%, 5%, 20%)
Oklch
oklch(82.2% 0.011 17.4)

Traditional「Peach Pink」· Paint「Pearl Gray」· Creative Silver Lining

#F7ECC8

Goose Yellow · Bisque · Lemon Cream

HEX
#F7ECC8
RGB
rgb(247, 236, 200)
HSL
hsl(46, 75%, 88%)
HSB
hsb(46, 19%, 97%)
CMYK
cmyk(0%, 4%, 19%, 3%)
Oklch
oklch(94.3% 0.048 93.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#3B3A39

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3B3A39
RGB
rgb(59, 58, 57)
HSL
hsl(30, 2%, 23%)
HSB
hsb(30, 3%, 23%)
CMYK
cmyk(0%, 2%, 3%, 77%)
Oklch
oklch(34.9% 0.002 67.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F2020
215050

Analogous

502138
4F2020
503821

Triadic

4F2020
215021
212150

Split-Comp.

4F2020
215038
213850

Tetradic

4F2020
385021
215050
382150

Contrast Matrix WCAG 2.1 Contrast

4F2020
A87D7D
CCC2C2
F7ECC8
3B3A39
—
3.8
AA Large
7.7
AAA
11.4
AAA
1.2
Fail
3.8
AA Large
—
2.0
Fail
3.0
AA Large
3.2
AA Large
7.7
AAA
2.0
Fail
—
1.5
Fail
6.5
AA
11.4
AAA
3.0
AA Large
1.5
Fail
—
9.6
AAA
1.2
Fail
3.2
AA Large
6.5
AA
9.6
AAA
—
White BG
13.5AAA
3.6AA Large
1.7Fail
1.2Fail
11.3AAA
Black BG
1.6Fail
5.9AA
12.1AAA
17.8AAA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3A20
95957D
C8C8C2
F2F2D1
3B3B39

Deuteranopia

3D4120
989B7D
C8C9C2
F3F4D3
3B3B39

Tritanopia

4D2020
A67D7D
CBC2C2
F6D8D9
3B3939

Achromatopsia

2E2E2E
8A8A8A
C5C5C5
EBEBEB
3A3A3A

Shades & Tints Shades & Tints

#4F2020

Dark
Light

#A87D7D

Dark
Light

#CCC2C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f2020;
  --color-2: #a87d7d;
  --color-3: #ccc2c2;
  --color-4: #f7ecc8;
  --color-5: #3b3a39;
}

SCSS

$color-1: #4f2020;
$color-2: #a87d7d;
$color-3: #ccc2c2;
$color-4: #f7ecc8;
$color-5: #3b3a39;

TAILWIND

colors: {
  'brand-1': '#4f2020',
  'brand-2': '#a87d7d',
  'brand-3': '#ccc2c2',
  'brand-4': '#f7ecc8',
  'brand-5': '#3b3a39',
}

RGB Array

[79, 32, 32], [168, 125, 125], [204, 194, 194], [247, 236, 200], [59, 58, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F2020, #A87D7D, #CCC2C2, #F7ECC8, #3B3A39 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: #4f2020; --color-2: #a87d7d; --color-3: #ccc2c2; --color-4: #f7ecc8; --color-5: #3b3a39. 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