#332335 + #6E5858 + #BF4900 + #C49300 + #A0B853 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#332335

Dark Plum · DarkSlateGray · Dark Purple

HEX

#332335

RGB

rgb(51, 35, 53)

HSL

hsl(293, 20%, 17%)

HSB

hsb(293, 34%, 21%)

CMYK

cmyk(4%, 34%, 0%, 79%)

Oklch

oklch(28.3% 0.039 322.7)

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

#6E5858

Crimson · DimGray · Wine Red

HEX

#6E5858

RGB

rgb(110, 88, 88)

HSL

hsl(0, 11%, 39%)

HSB

hsb(0, 20%, 43%)

CMYK

cmyk(0%, 20%, 20%, 57%)

Oklch

oklch(48.3% 0.029 18.2)

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

#BF4900

Tangerine · Chocolate · Amber Brown

HEX

#BF4900

RGB

rgb(191, 73, 0)

HSL

hsl(23, 100%, 37%)

HSB

hsb(23, 100%, 75%)

CMYK

cmyk(0%, 62%, 100%, 25%)

Oklch

oklch(55.8% 0.165 42.9)

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

#C49300

Ochre · DarkGoldenRod · Honey Gold

HEX

#C49300

RGB

rgb(196, 147, 0)

HSL

hsl(45, 100%, 38%)

HSB

hsb(45, 100%, 77%)

CMYK

cmyk(0%, 25%, 100%, 23%)

Oklch

oklch(69.1% 0.142 84.7)

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

#A0B853

Grass Green · DarkSeaGreen · Olive Green

HEX

#A0B853

RGB

rgb(160, 184, 83)

HSL

hsl(74, 42%, 52%)

HSB

hsb(74, 55%, 72%)

CMYK

cmyk(13%, 0%, 55%, 28%)

Oklch

oklch(74.3% 0.131 120.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332335

253423

Analogous

292334

332335

34232D

Triadic

332335

343223

233432

Split-Comp.

332335

2D3423

233429

Tetradic

332335

342923

253423

232D34

Contrast Matrix WCAG 2.1 Contrast

332335	6E5858	BF4900	C49300	A0B853
—	2.2 Fail	2.9 Fail	5.2 AA	6.6 AA
2.2 Fail	—	1.3 Fail	2.4 Fail	3.0 Fail
2.9 Fail	1.3 Fail	—	1.8 Fail	2.3 Fail
5.2 AA	2.4 Fail	1.8 Fail	—	1.3 Fail
6.6 AA	3.0 Fail	2.3 Fail	1.3 Fail	—

White BG

14.7AAA

6.6AA

5.0AA

2.8Fail

2.2Fail

Black BG

1.4Fail

3.2AA Large

4.2AA Large

7.5AAA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C31

646458

8C8B12

AFAE24

AAAB6B

Deuteranopia

2D2E30

666758

939C16

B2B52C

A9A771

Tritanopia

322D2C

6D5858

B92023

C24046

A17F83

Achromatopsia

2A2A2A

5F5F5F

646464

919191

A5A5A5

Shades & Tints Shades & Tints

#332335

Dark

Light

#6E5858

Dark

Light

#BF4900

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332335;
  --color-2: #6e5858;
  --color-3: #bf4900;
  --color-4: #c49300;
  --color-5: #a0b853;
}

SCSS

$color-1: #332335;
$color-2: #6e5858;
$color-3: #bf4900;
$color-4: #c49300;
$color-5: #a0b853;

TAILWIND

colors: {
  'brand-1': '#332335',
  'brand-2': '#6e5858',
  'brand-3': '#bf4900',
  'brand-4': '#c49300',
  'brand-5': '#a0b853',
}

RGB Array

[51, 35, 53], [110, 88, 88], [191, 73, 0], [196, 147, 0], [160, 184, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332335, #6E5858, #BF4900, #C49300, #A0B853 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: #332335; --color-2: #6e5858; --color-3: #bf4900; --color-4: #c49300; --color-5: #a0b853. 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