#230A20 + #4A1E2D + #562636 + #603841 + #836E59 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#230A20

Rose Purple · Black · Dark Purple

HEX

#230A20

RGB

rgb(35, 10, 32)

HSL

hsl(307, 56%, 9%)

HSB

hsb(307, 71%, 14%)

CMYK

cmyk(0%, 71%, 9%, 86%)

Oklch

oklch(19.6% 0.055 332.3)

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

#4A1E2D

Dark Violet · DarkSlateGray · Raspberry

HEX

#4A1E2D

RGB

rgb(74, 30, 45)

HSL

hsl(340, 42%, 20%)

HSB

hsb(340, 59%, 29%)

CMYK

cmyk(0%, 59%, 39%, 71%)

Oklch

oklch(30.4% 0.069 0.6)

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

#562636

Dark Violet · DarkSlateGray · Raspberry

HEX

#562636

RGB

rgb(86, 38, 54)

HSL

hsl(340, 39%, 24%)

HSB

hsb(340, 56%, 34%)

CMYK

cmyk(0%, 56%, 37%, 66%)

Oklch

oklch(34.1% 0.074 0.7)

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

#603841

Crimson · DarkOliveGreen · Wine Red

HEX

#603841

RGB

rgb(96, 56, 65)

HSL

hsl(347, 26%, 30%)

HSB

hsb(347, 42%, 38%)

CMYK

cmyk(0%, 42%, 32%, 62%)

Oklch

oklch(39.2% 0.058 5.5)

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

#836E59

Ochre · DimGray · Amber Brown

HEX

#836E59

RGB

rgb(131, 110, 89)

HSL

hsl(30, 19%, 43%)

HSB

hsb(30, 32%, 51%)

CMYK

cmyk(0%, 16%, 32%, 49%)

Oklch

oklch(55.3% 0.041 66.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

230A20

0A240D

Analogous

1A0A24

230A20

240A14

Triadic

230A20

21240A

0A2124

Split-Comp.

230A20

14240A

0A241A

Tetradic

230A20

241A0A

0A240D

0A1424

Contrast Matrix WCAG 2.1 Contrast

230A20	4A1E2D	562636	603841	836E59
—	1.3 Fail	1.5 Fail	1.9 Fail	3.8 AA Large
1.3 Fail	—	1.1 Fail	1.4 Fail	2.9 Fail
1.5 Fail	1.1 Fail	—	1.2 Fail	2.5 Fail
1.9 Fail	1.4 Fail	1.2 Fail	—	2.0 Fail
3.8 AA Large	2.9 Fail	2.5 Fail	2.0 Fail	—

White BG

18.5AAA

13.9AAA

12.2AAA

9.8AAA

4.8AA

Black BG

1.1Fail

1.5Fail

1.7Fail

2.1Fail

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

18181B

373729

414132

4F4E3F

7A7A5E

Deuteranopia

1A1C19

3A3D29

444831

51543E

7B7D5F

Tritanopia

221616

482726

542F2E

5E3D3D

826263

Achromatopsia

141414

2D2D2D

363636

454545

727272

Shades & Tints Shades & Tints

#230A20

Dark

Light

#4A1E2D

Dark

Light

#562636

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #230a20;
  --color-2: #4a1e2d;
  --color-3: #562636;
  --color-4: #603841;
  --color-5: #836e59;
}

SCSS

$color-1: #230a20;
$color-2: #4a1e2d;
$color-3: #562636;
$color-4: #603841;
$color-5: #836e59;

TAILWIND

colors: {
  'brand-1': '#230a20',
  'brand-2': '#4a1e2d',
  'brand-3': '#562636',
  'brand-4': '#603841',
  'brand-5': '#836e59',
}

RGB Array

[35, 10, 32], [74, 30, 45], [86, 38, 54], [96, 56, 65], [131, 110, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #230A20, #4A1E2D, #562636, #603841, #836E59 is ideal for: tech websites, dark mode UIs, game UIs. 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: #230a20; --color-2: #4a1e2d; --color-3: #562636; --color-4: #603841; --color-5: #836e59. 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. 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