← Back to Editor

#201833 · #523778 · #509156 · #91B543 · #E0B27E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#201833

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#201833
RGB
rgb(32, 24, 51)
HSL
hsl(258, 36%, 15%)
HSB
hsb(258, 53%, 20%)
CMYK
cmyk(37%, 53%, 0%, 80%)
Oklch
oklch(23.4% 0.051 295.8)

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

#523778

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#523778
RGB
rgb(82, 55, 120)
HSL
hsl(265, 37%, 34%)
HSB
hsb(265, 54%, 47%)
CMYK
cmyk(32%, 54%, 0%, 53%)
Oklch
oklch(40.0% 0.108 300.8)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#509156

Celadon · SeaGreen · Olive Green

HEX
#509156
RGB
rgb(80, 145, 86)
HSL
hsl(126, 29%, 44%)
HSB
hsb(126, 45%, 57%)
CMYK
cmyk(45%, 0%, 41%, 43%)
Oklch
oklch(59.8% 0.111 146.0)

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

#91B543

Grass Green · DarkSeaGreen · Olive Green

HEX
#91B543
RGB
rgb(145, 181, 67)
HSL
hsl(79, 46%, 49%)
HSB
hsb(79, 63%, 71%)
CMYK
cmyk(20%, 0%, 63%, 29%)
Oklch
oklch(72.4% 0.147 124.9)

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

#E0B27E

Ginger · BurlyWood · Warm Sun

HEX
#E0B27E
RGB
rgb(224, 178, 126)
HSL
hsl(32, 61%, 69%)
HSB
hsb(32, 44%, 88%)
CMYK
cmyk(0%, 21%, 44%, 12%)
Oklch
oklch(79.3% 0.086 69.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

201833
2C3418

Analogous

181E34
201833
2F1834

Triadic

201833
342118
183421

Split-Comp.

201833
342F18
1E3418

Tetradic

201833
34181E
2C3418
18342F

Contrast Matrix WCAG 2.1 Contrast

201833
523778
509156
91B543
E0B27E
—
1.8
Fail
4.5
AA Large
7.2
AAA
8.7
AAA
1.8
Fail
—
2.5
Fail
4.1
AA Large
5.0
AA
4.5
AA Large
2.5
Fail
—
1.6
Fail
2.0
Fail
7.2
AAA
4.1
AA Large
1.6
Fail
—
1.2
Fail
8.7
AAA
5.0
AA
2.0
Fail
1.2
Fail
—
White BG
16.9AAA
9.6AAA
3.8AA Large
2.4Fail
1.9Fail
Black BG
1.2Fail
2.2Fail
5.5AA
8.9AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1C2C
464668
6C6D64
A1A15F
CCCC8B

Deuteranopia

1D1E2B
484A65
686468
9F9C65
CFD28E

Tritanopia

202726
515C59
537072
937479
DE9597

Achromatopsia

1D1D1D
464646
777777
9D9D9D
BABABA

Shades & Tints Shades & Tints

#201833

Dark
Light

#523778

Dark
Light

#509156

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #201833;
  --color-2: #523778;
  --color-3: #509156;
  --color-4: #91b543;
  --color-5: #e0b27e;
}

SCSS

$color-1: #201833;
$color-2: #523778;
$color-3: #509156;
$color-4: #91b543;
$color-5: #e0b27e;

TAILWIND

colors: {
  'brand-1': '#201833',
  'brand-2': '#523778',
  'brand-3': '#509156',
  'brand-4': '#91b543',
  'brand-5': '#e0b27e',
}

RGB Array

[32, 24, 51], [82, 55, 120], [80, 145, 86], [145, 181, 67], [224, 178, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #201833, #523778, #509156, #91B543, #E0B27E is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #201833; --color-2: #523778; --color-3: #509156; --color-4: #91b543; --color-5: #e0b27e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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