← Back to Editor

#C4987D · #865648 · #6C4A4B · #3D383F · #2A222F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#C4987D

Apricot · Tan · Warm Sun

HEX
#C4987D
RGB
rgb(196, 152, 125)
HSL
hsl(23, 38%, 63%)
HSB
hsb(23, 36%, 77%)
CMYK
cmyk(0%, 22%, 36%, 23%)
Oklch
oklch(71.4% 0.065 52.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#865648

Crimson · Sienna · Wine Red

HEX
#865648
RGB
rgb(134, 86, 72)
HSL
hsl(14, 30%, 40%)
HSB
hsb(14, 46%, 53%)
CMYK
cmyk(0%, 36%, 46%, 47%)
Oklch
oklch(50.3% 0.068 37.0)

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

#6C4A4B

Crimson · DimGray · Wine Red

HEX
#6C4A4B
RGB
rgb(108, 74, 75)
HSL
hsl(358, 19%, 36%)
HSB
hsb(358, 31%, 42%)
CMYK
cmyk(0%, 31%, 31%, 58%)
Oklch
oklch(44.7% 0.047 17.1)

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

#3D383F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D383F
RGB
rgb(61, 56, 63)
HSL
hsl(283, 6%, 23%)
HSB
hsb(283, 11%, 25%)
CMYK
cmyk(3%, 11%, 0%, 75%)
Oklch
oklch(34.8% 0.014 316.4)

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

#2A222F

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2A222F
RGB
rgb(42, 34, 47)
HSL
hsl(277, 16%, 16%)
HSB
hsb(277, 28%, 18%)
CMYK
cmyk(11%, 28%, 0%, 82%)
Oklch
oklch(26.7% 0.026 312.3)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4987D
7DA9C5

Analogous

C57D85
C4987D
C5BC7D

Triadic

C4987D
7DC598
987DC5

Split-Comp.

C4987D
7DC5BC
7D85C5

Tetradic

C4987D
85C57D
7DA9C5
BC7DC5

Contrast Matrix WCAG 2.1 Contrast

C4987D
865648
6C4A4B
3D383F
2A222F
—
2.4
Fail
3.0
Fail
4.4
AA Large
5.9
AA
2.4
Fail
—
1.3
Fail
1.9
Fail
2.5
Fail
3.0
Fail
1.3
Fail
—
1.5
Fail
2.0
Fail
4.4
AA Large
1.9
Fail
1.5
Fail
—
1.3
Fail
5.9
AA
2.5
Fail
2.0
Fail
1.3
Fail
—
White BG
2.6Fail
6.1AA
7.7AAA
11.4AAA
15.3AAA
Black BG
8.1AAA
3.4AA Large
2.7Fail
1.8Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B184
71714B
5D5D4B
3B3B3D
27262C

Deuteranopia

B4B785
74784C
5F624B
3B3C3D
27282B

Tritanopia

C2898A
844E4F
6A4B4B
3D3C3C
2A2929

Achromatopsia

A2A2A2
636363
545454
3A3A3A
262626

Shades & Tints Shades & Tints

#C4987D

Dark
Light

#865648

Dark
Light

#6C4A4B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4987d;
  --color-2: #865648;
  --color-3: #6c4a4b;
  --color-4: #3d383f;
  --color-5: #2a222f;
}

SCSS

$color-1: #c4987d;
$color-2: #865648;
$color-3: #6c4a4b;
$color-4: #3d383f;
$color-5: #2a222f;

TAILWIND

colors: {
  'brand-1': '#c4987d',
  'brand-2': '#865648',
  'brand-3': '#6c4a4b',
  'brand-4': '#3d383f',
  'brand-5': '#2a222f',
}

RGB Array

[196, 152, 125], [134, 86, 72], [108, 74, 75], [61, 56, 63], [42, 34, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4987D, #865648, #6C4A4B, #3D383F, #2A222F is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #c4987d; --color-2: #865648; --color-3: #6c4a4b; --color-4: #3d383f; --color-5: #2a222f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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