← Back to Editor

#30272A · #CEB1AD · #5D302B · #966757 · #35445B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#30272A

Dark Violet · DarkSlateGray · Raspberry

HEX
#30272A
RGB
rgb(48, 39, 42)
HSL
hsl(340, 10%, 17%)
HSB
hsb(340, 19%, 19%)
CMYK
cmyk(0%, 19%, 13%, 81%)
Oklch
oklch(28.4% 0.014 356.0)

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

#CEB1AD

Peach Pink · Silver · Coral Red

HEX
#CEB1AD
RGB
rgb(206, 177, 173)
HSL
hsl(7, 25%, 74%)
HSB
hsb(7, 16%, 81%)
CMYK
cmyk(0%, 14%, 16%, 19%)
Oklch
oklch(78.4% 0.034 27.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#5D302B

Crimson · DarkOliveGreen · Wine Red

HEX
#5D302B
RGB
rgb(93, 48, 43)
HSL
hsl(6, 37%, 27%)
HSB
hsb(6, 54%, 36%)
CMYK
cmyk(0%, 48%, 54%, 64%)
Oklch
oklch(36.6% 0.066 27.4)

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

#966757

Tangerine · Sienna · Amber Brown

HEX
#966757
RGB
rgb(150, 103, 87)
HSL
hsl(15, 27%, 46%)
HSB
hsb(15, 42%, 59%)
CMYK
cmyk(0%, 31%, 42%, 41%)
Oklch
oklch(55.9% 0.066 39.6)

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

#35445B

Indigo · DarkSlateGray · Prussian Blue

HEX
#35445B
RGB
rgb(53, 68, 91)
HSL
hsl(216, 26%, 28%)
HSB
hsb(216, 42%, 36%)
CMYK
cmyk(42%, 25%, 0%, 64%)
Oklch
oklch(38.4% 0.044 258.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30272A
27302D

Analogous

30272E
30272A
302827

Triadic

30272A
2A3027
272A30

Split-Comp.

30272A
273028
272E30

Tetradic

30272A
2E3027
27302D
282730

Contrast Matrix WCAG 2.1 Contrast

30272A
CEB1AD
5D302B
966757
35445B
—
7.3
AAA
1.3
Fail
3.0
AA Large
1.5
Fail
7.3
AAA
—
5.5
AA
2.4
Fail
4.9
AA
1.3
Fail
5.5
AA
—
2.3
Fail
1.1
Fail
3.0
AA Large
2.4
Fail
2.3
Fail
—
2.1
Fail
1.5
Fail
4.9
AA
1.1
Fail
2.1
Fail
—
White BG
14.5AAA
2.0Fail
10.9AAA
4.8AA
9.9AAA
Black BG
1.4Fail
10.5AAA
1.9Fail
4.4AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C29
C1C1AE
4A492C
82815B
3B3C55

Deuteranopia

2D2D29
C3C5AE
4C502D
84885C
3B3954

Tritanopia

302929
CDAFAF
5B2D2D
945E5F
365150

Achromatopsia

2A2A2A
B9B9B9
3D3D3D
737373
424242

Shades & Tints Shades & Tints

#30272A

Dark
Light

#CEB1AD

Dark
Light

#5D302B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30272a;
  --color-2: #ceb1ad;
  --color-3: #5d302b;
  --color-4: #966757;
  --color-5: #35445b;
}

SCSS

$color-1: #30272a;
$color-2: #ceb1ad;
$color-3: #5d302b;
$color-4: #966757;
$color-5: #35445b;

TAILWIND

colors: {
  'brand-1': '#30272a',
  'brand-2': '#ceb1ad',
  'brand-3': '#5d302b',
  'brand-4': '#966757',
  'brand-5': '#35445b',
}

RGB Array

[48, 39, 42], [206, 177, 173], [93, 48, 43], [150, 103, 87], [53, 68, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #30272A, #CEB1AD, #5D302B, #966757, #35445B 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: #30272a; --color-2: #ceb1ad; --color-3: #5d302b; --color-4: #966757; --color-5: #35445b. 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