#201E30 + #2F2B48 + #544F62 + #79727C + #FF8000 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#201E30

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX

#201E30

RGB

rgb(32, 30, 48)

HSL

hsl(247, 23%, 15%)

HSB

hsb(247, 38%, 19%)

CMYK

cmyk(33%, 37%, 0%, 81%)

Oklch

oklch(24.6% 0.034 288.7)

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

#2F2B48

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#2F2B48

RGB

rgb(47, 43, 72)

HSL

hsl(248, 25%, 23%)

HSB

hsb(248, 40%, 28%)

CMYK

cmyk(35%, 40%, 0%, 72%)

Oklch

oklch(30.7% 0.052 289.3)

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

#544F62

Deep Indigo · DimGray · Prussian Blue

HEX

#544F62

RGB

rgb(84, 79, 98)

HSL

hsl(256, 11%, 35%)

HSB

hsb(256, 19%, 38%)

CMYK

cmyk(14%, 19%, 0%, 62%)

Oklch

oklch(44.0% 0.031 297.1)

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

#79727C

Ink Gray · Gray · Warm Gray

HEX

#79727C

RGB

rgb(121, 114, 124)

HSL

hsl(282, 4%, 47%)

HSB

hsb(282, 8%, 49%)

CMYK

cmyk(2%, 8%, 0%, 51%)

Oklch

oklch(56.2% 0.017 315.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#FF8000

Ochre · Orange · Amber Brown

HEX

#FF8000

RGB

rgb(255, 128, 0)

HSL

hsl(30, 100%, 50%)

HSB

hsb(30, 100%, 100%)

CMYK

cmyk(0%, 50%, 100%, 0%)

Oklch

oklch(73.2% 0.186 53.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

201E30

2D2F1D

Analogous

1D242F

201E30

281D2F

Triadic

201E30

2F201D

1D2F20

Split-Comp.

201E30

2F281D

242F1D

Tetradic

201E30

2F1D24

2D2F1D

1D2F28

Contrast Matrix WCAG 2.1 Contrast

201E30	2F2B48	544F62	79727C	FF8000
—	1.2 Fail	2.1 Fail	3.5 AA Large	6.5 AA
1.2 Fail	—	1.7 Fail	2.9 Fail	5.3 AA
2.1 Fail	1.7 Fail	—	1.7 Fail	3.1 AA Large
3.5 AA Large	2.9 Fail	1.7 Fail	—	1.8 Fail
6.5 AA	5.3 AA	3.1 AA Large	1.8 Fail	—

White BG

16.3AAA

13.5AAA

7.9AAA

4.7AA

2.5Fail

Black BG

1.3Fail

1.6Fail

2.7Fail

4.5AA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F2C

2D2D41

52525D

76767A

C8C71F

Deuteranopia

1F1F2B

2E2E3F

52535C

767779

CFD926

Tritanopia

202827

2F3B3A

545A59

797877

F9373D

Achromatopsia

212121

303030

535353

757575

979797

Shades & Tints Shades & Tints

#201E30

Dark

Light

#2F2B48

Dark

Light

#544F62

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #201e30;
  --color-2: #2f2b48;
  --color-3: #544f62;
  --color-4: #79727c;
  --color-5: #ff8000;
}

SCSS

$color-1: #201e30;
$color-2: #2f2b48;
$color-3: #544f62;
$color-4: #79727c;
$color-5: #ff8000;

TAILWIND

colors: {
  'brand-1': '#201e30',
  'brand-2': '#2f2b48',
  'brand-3': '#544f62',
  'brand-4': '#79727c',
  'brand-5': '#ff8000',
}

RGB Array

[32, 30, 48], [47, 43, 72], [84, 79, 98], [121, 114, 124], [255, 128, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #201E30, #2F2B48, #544F62, #79727C, #FF8000 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: #201e30; --color-2: #2f2b48; --color-3: #544f62; --color-4: #79727c; --color-5: #ff8000. 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