← Back to Editor

#300618 · #4A2736 · #DB72CC · #85734C · #CCB976

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

#300618

Dark Violet · Black · Raspberry

HEX
#300618
RGB
rgb(48, 6, 24)
HSL
hsl(334, 78%, 11%)
HSB
hsb(334, 88%, 19%)
CMYK
cmyk(0%, 87%, 50%, 81%)
Oklch
oklch(21.1% 0.070 358.7)

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

#4A2736

Dark Violet · DarkSlateGray · Raspberry

HEX
#4A2736
RGB
rgb(74, 39, 54)
HSL
hsl(334, 31%, 22%)
HSB
hsb(334, 47%, 29%)
CMYK
cmyk(0%, 47%, 27%, 71%)
Oklch
oklch(32.4% 0.057 353.6)

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

#DB72CC

Mauve · Orchid · Lilac Purple

HEX
#DB72CC
RGB
rgb(219, 114, 204)
HSL
hsl(309, 59%, 65%)
HSB
hsb(309, 48%, 86%)
CMYK
cmyk(0%, 48%, 7%, 14%)
Oklch
oklch(70.2% 0.170 332.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#85734C

Ochre · DimGray · Honey Gold

HEX
#85734C
RGB
rgb(133, 115, 76)
HSL
hsl(41, 27%, 41%)
HSB
hsb(41, 43%, 52%)
CMYK
cmyk(0%, 14%, 43%, 48%)
Oklch
oklch(56.3% 0.060 85.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CCB976

Ginger · Tan · Sunflower

HEX
#CCB976
RGB
rgb(204, 185, 118)
HSL
hsl(47, 46%, 63%)
HSB
hsb(47, 42%, 80%)
CMYK
cmyk(0%, 9%, 42%, 20%)
Oklch
oklch(78.7% 0.089 94.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

300618
06321F

Analogous

32062F
300618
320906

Triadic

300618
193206
061932

Split-Comp.

300618
063209
062F32

Tetradic

300618
2F3206
06321F
090632

Contrast Matrix WCAG 2.1 Contrast

300618
4A2736
DB72CC
85734C
CCB976
—
1.4
Fail
6.3
AA
3.9
AA Large
9.2
AAA
1.4
Fail
—
4.5
AA Large
2.8
Fail
6.6
AA
6.3
AA
4.5
AA Large
—
1.6
Fail
1.5
Fail
3.9
AA Large
2.8
Fail
1.6
Fail
—
2.4
Fail
9.2
AAA
6.6
AA
1.5
Fail
2.4
Fail
—
White BG
18.0AAA
12.8AAA
2.9Fail
4.6AA
2.0Fail
Black BG
1.2Fail
1.6Fail
7.3AAA
4.6AA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1D14
3B3B32
AEADB6
7D7D55
C4C486

Deuteranopia

202313
3D4032
B4BBB1
7E8058
C5C68A

Tritanopia

2E100F
48302F
D6A5A1
845D5F
CB9396

Achromatopsia

151515
333333
9C9C9C
747474
B7B7B7

Shades & Tints Shades & Tints

#300618

Dark
Light

#4A2736

Dark
Light

#DB72CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #300618;
  --color-2: #4a2736;
  --color-3: #db72cc;
  --color-4: #85734c;
  --color-5: #ccb976;
}

SCSS

$color-1: #300618;
$color-2: #4a2736;
$color-3: #db72cc;
$color-4: #85734c;
$color-5: #ccb976;

TAILWIND

colors: {
  'brand-1': '#300618',
  'brand-2': '#4a2736',
  'brand-3': '#db72cc',
  'brand-4': '#85734c',
  'brand-5': '#ccb976',
}

RGB Array

[48, 6, 24], [74, 39, 54], [219, 114, 204], [133, 115, 76], [204, 185, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #300618, #4A2736, #DB72CC, #85734C, #CCB976 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: #300618; --color-2: #4a2736; --color-3: #db72cc; --color-4: #85734c; --color-5: #ccb976. 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