#2D2338 + #34363E + #487957 + #967A57 + #DF325F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D2338

Deep Indigo · DarkSlateGray · Dark Purple

HEX

#2D2338

RGB

rgb(45, 35, 56)

HSL

hsl(269, 23%, 18%)

HSB

hsb(269, 37%, 22%)

CMYK

cmyk(20%, 38%, 0%, 78%)

Oklch

oklch(27.7% 0.040 305.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#34363E

Indigo · DarkSlateGray · Dark Stone

HEX

#34363E

RGB

rgb(52, 54, 62)

HSL

hsl(228, 9%, 22%)

HSB

hsb(228, 16%, 24%)

CMYK

cmyk(16%, 13%, 0%, 76%)

Oklch

oklch(33.4% 0.014 274.5)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#487957

Celadon · SeaGreen · Forest Green

HEX

#487957

RGB

rgb(72, 121, 87)

HSL

hsl(138, 25%, 38%)

HSB

hsb(138, 40%, 47%)

CMYK

cmyk(40%, 0%, 28%, 53%)

Oklch

oklch(53.1% 0.076 152.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#967A57

Ochre · Gray · Amber Brown

HEX

#967A57

RGB

rgb(150, 122, 87)

HSL

hsl(33, 27%, 46%)

HSB

hsb(33, 42%, 59%)

CMYK

cmyk(0%, 19%, 42%, 41%)

Oklch

oklch(59.7% 0.060 72.5)

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

#DF325F

Dark Violet · Crimson · Rose Pink

HEX

#DF325F

RGB

rgb(223, 50, 95)

HSL

hsl(344, 73%, 54%)

HSB

hsb(344, 78%, 87%)

CMYK

cmyk(0%, 78%, 57%, 13%)

Oklch

oklch(59.9% 0.208 11.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D2338

2E3823

Analogous

232438

2D2338

382338

Triadic

2D2338

382E23

23382E

Split-Comp.

2D2338

383823

243823

Tetradic

2D2338

382324

2E3823

233838

Contrast Matrix WCAG 2.1 Contrast

2D2338	34363E	487957	967A57	DF325F
—	1.2 Fail	2.9 Fail	3.7 AA Large	3.4 AA Large
1.2 Fail	—	2.4 Fail	3.0 Fail	2.7 Fail
2.9 Fail	2.4 Fail	—	1.3 Fail	1.1 Fail
3.7 AA Large	3.0 Fail	1.3 Fail	—	1.1 Fail
3.4 AA Large	2.7 Fail	1.1 Fail	1.1 Fail	—

White BG

14.9AAA

12.0AAA

5.1AA

4.0AA Large

4.4AA Large

Black BG

1.4Fail

1.7Fail

4.1AA Large

5.2AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292933

35353C

5D5E5F

8A8A5F

949354

Deuteranopia

292A32

35353C

5A5761

8C8E62

9EAB52

Tritanopia

2D2F2E

343B3A

4A6667

956668

D64C4A

Achromatopsia

282828

363636

666666

7E7E7E

6B6B6B

Shades & Tints Shades & Tints

#2D2338

Dark

Light

#34363E

Dark

Light

#487957

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d2338;
  --color-2: #34363e;
  --color-3: #487957;
  --color-4: #967a57;
  --color-5: #df325f;
}

SCSS

$color-1: #2d2338;
$color-2: #34363e;
$color-3: #487957;
$color-4: #967a57;
$color-5: #df325f;

TAILWIND

colors: {
  'brand-1': '#2d2338',
  'brand-2': '#34363e',
  'brand-3': '#487957',
  'brand-4': '#967a57',
  'brand-5': '#df325f',
}

RGB Array

[45, 35, 56], [52, 54, 62], [72, 121, 87], [150, 122, 87], [223, 50, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D2338, #34363E, #487957, #967A57, #DF325F 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: #2d2338; --color-2: #34363e; --color-3: #487957; --color-4: #967a57; --color-5: #df325f. 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