#363142 + #8F7142 + #AB9649 + #B5BD4B + #93E356 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#363142

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#363142

RGB

rgb(54, 49, 66)

HSL

hsl(258, 15%, 23%)

HSB

hsb(258, 26%, 26%)

CMYK

cmyk(18%, 26%, 0%, 74%)

Oklch

oklch(32.6% 0.030 298.2)

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

#8F7142

Ochre · Sienna · Amber Brown

HEX

#8F7142

RGB

rgb(143, 113, 66)

HSL

hsl(37, 37%, 41%)

HSB

hsb(37, 54%, 56%)

CMYK

cmyk(0%, 21%, 54%, 44%)

Oklch

oklch(56.7% 0.074 77.6)

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

#AB9649

Ochre · GoldenRod · Honey Gold

HEX

#AB9649

RGB

rgb(171, 150, 73)

HSL

hsl(47, 40%, 48%)

HSB

hsb(47, 57%, 67%)

CMYK

cmyk(0%, 12%, 57%, 33%)

Oklch

oklch(67.6% 0.100 94.3)

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

#B5BD4B

Autumn Sage · GoldenRod · Sunflower

HEX

#B5BD4B

RGB

rgb(181, 189, 75)

HSL

hsl(64, 46%, 52%)

HSB

hsb(64, 60%, 74%)

CMYK

cmyk(4%, 0%, 60%, 26%)

Oklch

oklch(77.0% 0.137 112.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#93E356

Emerald · GreenYellow · Apple Green

HEX

#93E356

RGB

rgb(147, 227, 86)

HSL

hsl(94, 72%, 61%)

HSB

hsb(94, 62%, 89%)

CMYK

cmyk(35%, 0%, 62%, 11%)

Oklch

oklch(83.6% 0.191 134.0)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

363142

3E4332

Analogous

323543

363142

403243

Triadic

363142

433732

324337

Split-Comp.

363142

434032

354332

Tetradic

363142

433235

3E4332

324340

Contrast Matrix WCAG 2.1 Contrast

363142	8F7142	AB9649	B5BD4B	93E356
—	2.8 Fail	4.3 AA Large	6.2 AA	8.0 AAA
2.8 Fail	—	1.6 Fail	2.2 Fail	2.9 Fail
4.3 AA Large	1.6 Fail	—	1.4 Fail	1.9 Fail
6.2 AA	2.2 Fail	1.4 Fail	—	1.3 Fail
8.0 AAA	2.9 Fail	1.9 Fail	1.3 Fail	—

White BG

12.5AAA

4.6AA

2.9Fail

2.0Fail

1.6Fail

Black BG

1.7Fail

4.6AA

7.2AAA

10.3AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34343E

82824D

A2A25C

B8B967

B6B678

Deuteranopia

34353D

848650

A3A560

B8B76D

B1AB80

Tritanopia

363B3A

8E5658

AA6A6E

B57C81

979399

Achromatopsia

343434

757575

949494

AEAEAE

BBBBBB

Shades & Tints Shades & Tints

#363142

Dark

Light

#8F7142

Dark

Light

#AB9649

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #363142;
  --color-2: #8f7142;
  --color-3: #ab9649;
  --color-4: #b5bd4b;
  --color-5: #93e356;
}

SCSS

$color-1: #363142;
$color-2: #8f7142;
$color-3: #ab9649;
$color-4: #b5bd4b;
$color-5: #93e356;

TAILWIND

colors: {
  'brand-1': '#363142',
  'brand-2': '#8f7142',
  'brand-3': '#ab9649',
  'brand-4': '#b5bd4b',
  'brand-5': '#93e356',
}

RGB Array

[54, 49, 66], [143, 113, 66], [171, 150, 73], [181, 189, 75], [147, 227, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #363142, #8F7142, #AB9649, #B5BD4B, #93E356 is ideal for: corporate websites, product showcases, portfolios. 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: #363142; --color-2: #8f7142; --color-3: #ab9649; --color-4: #b5bd4b; --color-5: #93e356. 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. 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 dark-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