← Back to Editor

#F8D4B0 · #836871 · #501F32 · #21171F · #6A3F53

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

#F8D4B0

Goose Yellow · Wheat · Peach Orange

HEX
#F8D4B0
RGB
rgb(248, 212, 176)
HSL
hsl(30, 84%, 83%)
HSB
hsb(30, 29%, 97%)
CMYK
cmyk(0%, 15%, 29%, 3%)
Oklch
oklch(89.1% 0.062 66.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#836871

Dark Violet · DimGray · Camellia

HEX
#836871
RGB
rgb(131, 104, 113)
HSL
hsl(340, 11%, 46%)
HSB
hsb(340, 21%, 51%)
CMYK
cmyk(0%, 21%, 14%, 49%)
Oklch
oklch(54.7% 0.037 356.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#501F32

Dark Violet · DarkSlateGray · Raspberry

HEX
#501F32
RGB
rgb(80, 31, 50)
HSL
hsl(337, 44%, 22%)
HSB
hsb(337, 61%, 31%)
CMYK
cmyk(0%, 61%, 38%, 69%)
Oklch
oklch(31.8% 0.077 358.1)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#21171F

Rose Purple · Black · Dark Purple

HEX
#21171F
RGB
rgb(33, 23, 31)
HSL
hsl(312, 18%, 11%)
HSB
hsb(312, 30%, 13%)
CMYK
cmyk(0%, 30%, 6%, 87%)
Oklch
oklch(22.1% 0.022 333.4)

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

#6A3F53

Dark Violet · DimGray · Camellia

HEX
#6A3F53
RGB
rgb(106, 63, 83)
HSL
hsl(332, 25%, 33%)
HSB
hsb(332, 41%, 42%)
CMYK
cmyk(0%, 41%, 22%, 58%)
Oklch
oklch(42.5% 0.066 350.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8D4B0
AFD4F8

Analogous

F8AFAF
F8D4B0
F8F8AF

Triadic

F8D4B0
AFF8D4
D4AFF8

Split-Comp.

F8D4B0
AFF8F8
AFAFF8

Tetradic

F8D4B0
AFF8AF
AFD4F8
F8AFF8

Contrast Matrix WCAG 2.1 Contrast

F8D4B0
836871
501F32
21171F
6A3F53
—
3.6
AA Large
9.5
AAA
12.5
AAA
6.1
AA
3.6
AA Large
—
2.6
Fail
3.5
AA Large
1.7
Fail
9.5
AAA
2.6
Fail
—
1.3
Fail
1.5
Fail
12.5
AAA
3.5
AA Large
1.3
Fail
—
2.0
Fail
6.1
AA
1.7
Fail
1.5
Fail
2.0
Fail
—
White BG
1.4Fail
5.0AA
13.3AAA
17.4AAA
8.6AAA
Black BG
15.0AAA
4.2AA Large
1.6Fail
1.2Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8B9
77776F
3B3A2D
1D1D1D
57574E

Deuteranopia

EBEDBB
797B6E
3E412C
1D1E1D
5A5D4D

Tritanopia

F6C0C1
826D6D
4E2A29
211C1B
684A4A

Achromatopsia

DBDBDB
717171
303030
1B1B1B
4E4E4E

Shades & Tints Shades & Tints

#F8D4B0

Dark
Light

#836871

Dark
Light

#501F32

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8d4b0;
  --color-2: #836871;
  --color-3: #501f32;
  --color-4: #21171f;
  --color-5: #6a3f53;
}

SCSS

$color-1: #f8d4b0;
$color-2: #836871;
$color-3: #501f32;
$color-4: #21171f;
$color-5: #6a3f53;

TAILWIND

colors: {
  'brand-1': '#f8d4b0',
  'brand-2': '#836871',
  'brand-3': '#501f32',
  'brand-4': '#21171f',
  'brand-5': '#6a3f53',
}

RGB Array

[248, 212, 176], [131, 104, 113], [80, 31, 50], [33, 23, 31], [106, 63, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8D4B0, #836871, #501F32, #21171F, #6A3F53 is ideal for: tech websites, dark mode UIs, game UIs, 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: #f8d4b0; --color-2: #836871; --color-3: #501f32; --color-4: #21171f; --color-5: #6a3f53. 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 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