#04113B + #213945 + #2A4D63 + #899B2D + #A5B72D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#04113B

Indigo · MidnightBlue · Deep Sea Blue

HEX

#04113B

RGB

rgb(4, 17, 59)

HSL

hsl(226, 87%, 12%)

HSB

hsb(226, 93%, 23%)

CMYK

cmyk(93%, 71%, 0%, 77%)

Oklch

oklch(20.0% 0.083 264.8)

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

#213945

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#213945

RGB

rgb(33, 57, 69)

HSL

hsl(200, 35%, 20%)

HSB

hsb(200, 52%, 27%)

CMYK

cmyk(52%, 17%, 0%, 73%)

Oklch

oklch(33.0% 0.037 231.1)

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

#2A4D63

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2A4D63

RGB

rgb(42, 77, 99)

HSL

hsl(203, 40%, 28%)

HSB

hsb(203, 58%, 39%)

CMYK

cmyk(58%, 22%, 0%, 61%)

Oklch

oklch(40.4% 0.055 237.8)

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

#899B2D

Grass Green · Olive · Forest Green

HEX

#899B2D

RGB

rgb(137, 155, 45)

HSL

hsl(70, 55%, 39%)

HSB

hsb(70, 71%, 61%)

CMYK

cmyk(12%, 0%, 71%, 39%)

Oklch

oklch(65.4% 0.134 118.4)

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

#A5B72D

Autumn Sage · GoldenRod · Honey Gold

HEX

#A5B72D

RGB

rgb(165, 183, 45)

HSL

hsl(68, 61%, 45%)

HSB

hsb(68, 75%, 72%)

CMYK

cmyk(10%, 0%, 75%, 28%)

Oklch

oklch(74.1% 0.156 117.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04113B

392D04

Analogous

042B39

04113B

120439

Triadic

04113B

390410

103904

Split-Comp.

04113B

391204

2B3904

Tetradic

04113B

39042B

392D04

043912

Contrast Matrix WCAG 2.1 Contrast

04113B	213945	2A4D63	899B2D	A5B72D
—	1.5 Fail	2.0 Fail	5.9 AA	8.2 AAA
1.5 Fail	—	1.3 Fail	3.9 AA Large	5.4 AA
2.0 Fail	1.3 Fail	—	2.9 Fail	4.0 AA Large
5.9 AA	3.9 AA Large	2.9 Fail	—	1.4 Fail
8.2 AAA	5.4 AA	4.0 AA Large	1.4 Fail	—

White BG

18.3AAA

12.1AAA

9.0AAA

3.1AA Large

2.2Fail

Black BG

1.1Fail

1.7Fail

2.3Fail

6.8AA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A31

2B2C42

39395E

919148

ADAD4E

Deuteranopia

09082E

2A2841

37355C

908E4E

ACAA56

Tritanopia

052927

22403F

2C5959

8A5D61

A6696F

Achromatopsia

121212

333333

454545

898989

A2A2A2

Shades & Tints Shades & Tints

#04113B

Dark

Light

#213945

Dark

Light

#2A4D63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04113b;
  --color-2: #213945;
  --color-3: #2a4d63;
  --color-4: #899b2d;
  --color-5: #a5b72d;
}

SCSS

$color-1: #04113b;
$color-2: #213945;
$color-3: #2a4d63;
$color-4: #899b2d;
$color-5: #a5b72d;

TAILWIND

colors: {
  'brand-1': '#04113b',
  'brand-2': '#213945',
  'brand-3': '#2a4d63',
  'brand-4': '#899b2d',
  'brand-5': '#a5b72d',
}

RGB Array

[4, 17, 59], [33, 57, 69], [42, 77, 99], [137, 155, 45], [165, 183, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #04113B, #213945, #2A4D63, #899B2D, #A5B72D 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: #04113b; --color-2: #213945; --color-3: #2a4d63; --color-4: #899b2d; --color-5: #a5b72d. 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