#001818 + #789048 + #184860 + #487890 + #301830 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#001818

Lake Blue · Black · Peacock Green

HEX

#001818

RGB

rgb(0, 24, 24)

HSL

hsl(180, 100%, 5%)

HSB

hsb(180, 100%, 9%)

CMYK

cmyk(100%, 0%, 0%, 91%)

Oklch

oklch(18.9% 0.032 194.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#789048

Grass Green · DimGray · Olive Green

HEX

#789048

RGB

rgb(120, 144, 72)

HSL

hsl(80, 33%, 42%)

HSB

hsb(80, 50%, 56%)

CMYK

cmyk(17%, 0%, 50%, 44%)

Oklch

oklch(61.8% 0.102 124.5)

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

#184860

Lake Blue · DarkSlateGray · Prussian Blue

HEX

#184860

RGB

rgb(24, 72, 96)

HSL

hsl(200, 60%, 24%)

HSB

hsb(200, 75%, 38%)

CMYK

cmyk(75%, 25%, 0%, 62%)

Oklch

oklch(38.1% 0.065 234.1)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#487890

Slate Blue · SteelBlue · Navy Blue

HEX

#487890

RGB

rgb(72, 120, 144)

HSL

hsl(200, 33%, 42%)

HSB

hsb(200, 50%, 56%)

CMYK

cmyk(50%, 17%, 0%, 44%)

Oklch

oklch(54.8% 0.064 231.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#301830

Rose Purple · DarkSlateGray · Dark Purple

HEX

#301830

RGB

rgb(48, 24, 48)

HSL

hsl(300, 33%, 14%)

HSB

hsb(300, 50%, 19%)

CMYK

cmyk(0%, 50%, 0%, 81%)

Oklch

oklch(25.3% 0.055 327.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

001818

1A0000

Analogous

001A0D

001818

000D1A

Triadic

001818

1A001A

1A1A00

Split-Comp.

001818

1A000D

1A0D00

Tetradic

001818

0D001A

1A0000

0D1A00

Contrast Matrix WCAG 2.1 Contrast

001818	789048	184860	487890	301830
—	5.1 AA	1.9 Fail	3.8 AA Large	1.1 Fail
5.1 AA	—	2.8 Fail	1.3 Fail	4.5 AA
1.9 Fail	2.8 Fail	—	2.0 Fail	1.6 Fail
3.8 AA Large	1.3 Fail	2.0 Fail	—	3.4 AA Large
1.1 Fail	4.5 AA	1.6 Fail	3.4 AA Large	—

White BG

18.4AAA

3.6AA Large

9.8AAA

4.8AA

16.2AAA

Black BG

1.1Fail

5.9AA

2.1Fail

4.4AA Large

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0B18

828359

2D2D5A

5D5D8A

26252A

Deuteranopia

090718

817F5E

2A2659

5A5689

272929

Tritanopia

011818

79676A

1A5655

4A8685

2F2625

Achromatopsia

111111

818181

3C3C3C

6C6C6C

222222

Shades & Tints Shades & Tints

#001818

Dark

Light

#789048

Dark

Light

#184860

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #001818;
  --color-2: #789048;
  --color-3: #184860;
  --color-4: #487890;
  --color-5: #301830;
}

SCSS

$color-1: #001818;
$color-2: #789048;
$color-3: #184860;
$color-4: #487890;
$color-5: #301830;

TAILWIND

colors: {
  'brand-1': '#001818',
  'brand-2': '#789048',
  'brand-3': '#184860',
  'brand-4': '#487890',
  'brand-5': '#301830',
}

RGB Array

[0, 24, 24], [120, 144, 72], [24, 72, 96], [72, 120, 144], [48, 24, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #001818, #789048, #184860, #487890, #301830 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: #001818; --color-2: #789048; --color-3: #184860; --color-4: #487890; --color-5: #301830. 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