#232B3E + #472F45 + #95314D + #E1354B + #EF9022 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#232B3E

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#232B3E

RGB

rgb(35, 43, 62)

HSL

hsl(222, 28%, 19%)

HSB

hsb(222, 44%, 24%)

CMYK

cmyk(44%, 31%, 0%, 76%)

Oklch

oklch(29.1% 0.037 266.5)

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

#472F45

Rose Purple · DarkSlateGray · Eggplant

HEX

#472F45

RGB

rgb(71, 47, 69)

HSL

hsl(305, 20%, 23%)

HSB

hsb(305, 34%, 28%)

CMYK

cmyk(0%, 34%, 3%, 72%)

Oklch

oklch(34.2% 0.050 329.5)

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

#95314D

Dark Violet · Brown · Camellia

HEX

#95314D

RGB

rgb(149, 49, 77)

HSL

hsl(343, 51%, 39%)

HSB

hsb(343, 67%, 58%)

CMYK

cmyk(0%, 67%, 48%, 42%)

Oklch

oklch(46.8% 0.135 7.0)

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

#E1354B

Vermilion · Crimson · Passion Red

HEX

#E1354B

RGB

rgb(225, 53, 75)

HSL

hsl(352, 74%, 55%)

HSB

hsb(352, 76%, 88%)

CMYK

cmyk(0%, 76%, 67%, 12%)

Oklch

oklch(60.1% 0.206 19.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#EF9022

Ginger · GoldenRod · Warm Sun

HEX

#EF9022

RGB

rgb(239, 144, 34)

HSL

hsl(32, 86%, 54%)

HSB

hsb(32, 86%, 94%)

CMYK

cmyk(0%, 40%, 86%, 6%)

Oklch

oklch(73.8% 0.159 62.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

232B3E

3E3623

Analogous

23393E

232B3E

28233E

Triadic

232B3E

3E232B

2B3E23

Split-Comp.

232B3E

3E2823

393E23

Tetradic

232B3E

3E2339

3E3623

233E28

Contrast Matrix WCAG 2.1 Contrast

232B3E	472F45	95314D	E1354B	EF9022
—	1.2 Fail	1.9 Fail	3.2 AA Large	5.8 AA
1.2 Fail	—	1.6 Fail	2.7 Fail	4.9 AA
1.9 Fail	1.6 Fail	—	1.7 Fail	3.1 AA Large
3.2 AA Large	2.7 Fail	1.7 Fail	—	1.8 Fail
5.8 AA	4.9 AA	3.1 AA Large	1.8 Fail	—

White BG

14.1AAA

11.9AAA

7.4AAA

4.4AA Large

2.4Fail

Black BG

1.5Fail

1.8Fail

2.8Fail

4.8AA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262739

3D3C40

6A6946

979546

C6C53D

Deuteranopia

262538

3E403E

707745

A1AD44

CBD243

Tritanopia

233635

463B3B

904140

D84141

EA5256

Achromatopsia

2B2B2B

393939

525252

6B6B6B

A0A0A0

Shades & Tints Shades & Tints

#232B3E

Dark

Light

#472F45

Dark

Light

#95314D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #232b3e;
  --color-2: #472f45;
  --color-3: #95314d;
  --color-4: #e1354b;
  --color-5: #ef9022;
}

SCSS

$color-1: #232b3e;
$color-2: #472f45;
$color-3: #95314d;
$color-4: #e1354b;
$color-5: #ef9022;

TAILWIND

colors: {
  'brand-1': '#232b3e',
  'brand-2': '#472f45',
  'brand-3': '#95314d',
  'brand-4': '#e1354b',
  'brand-5': '#ef9022',
}

RGB Array

[35, 43, 62], [71, 47, 69], [149, 49, 77], [225, 53, 75], [239, 144, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #232B3E, #472F45, #95314D, #E1354B, #EF9022 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: #232b3e; --color-2: #472f45; --color-3: #95314d; --color-4: #e1354b; --color-5: #ef9022. 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