← Back to Editor

#300B1F · #583A34 · #8A7C67 · #C4B492 · #E3D7B7

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

#300B1F

Rose Purple · Black · Raspberry

HEX
#300B1F
RGB
rgb(48, 11, 31)
HSL
hsl(328, 63%, 12%)
HSB
hsb(328, 77%, 19%)
CMYK
cmyk(0%, 77%, 35%, 81%)
Oklch
oklch(22.2% 0.066 350.3)

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

#583A34

Crimson · DarkOliveGreen · Wine Red

HEX
#583A34
RGB
rgb(88, 58, 52)
HSL
hsl(10, 26%, 27%)
HSB
hsb(10, 41%, 35%)
CMYK
cmyk(0%, 34%, 41%, 65%)
Oklch
oklch(38.1% 0.044 31.7)

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

#8A7C67

Ochre · Gray · Amber Brown

HEX
#8A7C67
RGB
rgb(138, 124, 103)
HSL
hsl(36, 15%, 47%)
HSB
hsb(36, 25%, 54%)
CMYK
cmyk(0%, 10%, 25%, 46%)
Oklch
oklch(59.3% 0.035 77.9)

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

#C4B492

Ginger · Tan · Sunflower

HEX
#C4B492
RGB
rgb(196, 180, 146)
HSL
hsl(41, 30%, 67%)
HSB
hsb(41, 26%, 77%)
CMYK
cmyk(0%, 8%, 26%, 23%)
Oklch
oklch(77.5% 0.050 85.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E3D7B7

Goose Yellow · Wheat · Lemon Cream

HEX
#E3D7B7
RGB
rgb(227, 215, 183)
HSL
hsl(44, 44%, 80%)
HSB
hsb(44, 19%, 89%)
CMYK
cmyk(0%, 5%, 19%, 11%)
Oklch
oklch(88.1% 0.045 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

300B1F
0B321D

Analogous

310B32
300B1F
320B0D

Triadic

300B1F
20320B
0B2032

Split-Comp.

300B1F
0D320B
0B3231

Tetradic

300B1F
32310B
0B321D
0B0D32

Contrast Matrix WCAG 2.1 Contrast

300B1F
583A34
8A7C67
C4B492
E3D7B7
—
1.7
Fail
4.3
AA Large
8.6
AAA
12.3
AAA
1.7
Fail
—
2.5
Fail
5.0
AA
7.1
AAA
4.3
AA Large
2.5
Fail
—
2.0
Fail
2.8
Fail
8.6
AAA
5.0
AA
2.0
Fail
—
1.4
Fail
12.3
AAA
7.1
AAA
2.8
Fail
1.4
Fail
—
White BG
17.6AAA
10.1AAA
4.1AA Large
2.0Fail
1.4Fail
Black BG
1.2Fail
2.1Fail
5.2AA
10.3AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

20201A
4B4B35
84846C
BDBD9A
DEDEBF

Deuteranopia

222519
4D4F36
85866D
BEBF9C
DFDFC1

Tritanopia

2E1616
573737
897071
C3A1A2
E2C5C6

Achromatopsia

181818
424242
7E7E7E
B5B5B5
D7D7D7

Shades & Tints Shades & Tints

#300B1F

Dark
Light

#583A34

Dark
Light

#8A7C67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #300b1f;
  --color-2: #583a34;
  --color-3: #8a7c67;
  --color-4: #c4b492;
  --color-5: #e3d7b7;
}

SCSS

$color-1: #300b1f;
$color-2: #583a34;
$color-3: #8a7c67;
$color-4: #c4b492;
$color-5: #e3d7b7;

TAILWIND

colors: {
  'brand-1': '#300b1f',
  'brand-2': '#583a34',
  'brand-3': '#8a7c67',
  'brand-4': '#c4b492',
  'brand-5': '#e3d7b7',
}

RGB Array

[48, 11, 31], [88, 58, 52], [138, 124, 103], [196, 180, 146], [227, 215, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #300B1F, #583A34, #8A7C67, #C4B492, #E3D7B7 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: #300b1f; --color-2: #583a34; --color-3: #8a7c67; --color-4: #c4b492; --color-5: #e3d7b7. 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