#040ABB + #21267A + #27294A + #292321 + #14100F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#040ABB

Indigo · MediumBlue · Prussian Blue

HEX

#040ABB

RGB

rgb(4, 10, 187)

HSL

hsl(238, 96%, 37%)

HSB

hsb(238, 98%, 73%)

CMYK

cmyk(98%, 95%, 0%, 27%)

Oklch

oklch(36.4% 0.244 264.7)

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

#21267A

Indigo · MidnightBlue · Prussian Blue

HEX

#21267A

RGB

rgb(33, 38, 122)

HSL

hsl(237, 57%, 30%)

HSB

hsb(237, 73%, 48%)

CMYK

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

Oklch

oklch(32.6% 0.140 273.0)

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

#27294A

Indigo · DarkSlateGray · Prussian Blue

HEX

#27294A

RGB

rgb(39, 41, 74)

HSL

hsl(237, 31%, 22%)

HSB

hsb(237, 47%, 29%)

CMYK

cmyk(47%, 45%, 0%, 71%)

Oklch

oklch(29.6% 0.060 279.5)

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

#292321

Tangerine · Black · Cinnamon

HEX

#292321

RGB

rgb(41, 35, 33)

HSL

hsl(15, 11%, 15%)

HSB

hsb(15, 20%, 16%)

CMYK

cmyk(0%, 15%, 20%, 84%)

Oklch

oklch(26.2% 0.010 39.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#14100F

Crimson · Black · Deep Berry

HEX

#14100F

RGB

rgb(20, 16, 15)

HSL

hsl(12, 14%, 7%)

HSB

hsb(12, 25%, 8%)

CMYK

cmyk(0%, 20%, 25%, 92%)

Oklch

oklch(17.8% 0.007 34.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

040ABB

B9B304

Analogous

0464B9

040ABB

5804B9

Triadic

040ABB

B9040A

0AB904

Split-Comp.

040ABB

B95804

64B904

Tetradic

040ABB

B90464

B9B304

04B958

Contrast Matrix WCAG 2.1 Contrast

040ABB	21267A	27294A	292321	14100F
—	1.1 Fail	1.2 Fail	1.3 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.5 Fail	1.4 Fail	1.2 Fail	—

White BG

11.9AAA

12.9AAA

14.0AAA

15.5AAA

18.9AAA

Black BG

1.8Fail

1.6Fail

1.5Fail

1.4Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

070790

232366

282842

262621

12120F

Deuteranopia

060686

232361

282840

272722

13130F

Tritanopia

046E67

215652

273C3A

292222

140F0F

Achromatopsia

1C1C1C

2E2E2E

2C2C2C

252525

111111

Shades & Tints Shades & Tints

#040ABB

Dark

Light

#21267A

Dark

Light

#27294A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #040abb;
  --color-2: #21267a;
  --color-3: #27294a;
  --color-4: #292321;
  --color-5: #14100f;
}

SCSS

$color-1: #040abb;
$color-2: #21267a;
$color-3: #27294a;
$color-4: #292321;
$color-5: #14100f;

TAILWIND

colors: {
  'brand-1': '#040abb',
  'brand-2': '#21267a',
  'brand-3': '#27294a',
  'brand-4': '#292321',
  'brand-5': '#14100f',
}

RGB Array

[4, 10, 187], [33, 38, 122], [39, 41, 74], [41, 35, 33], [20, 16, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #040ABB, #21267A, #27294A, #292321, #14100F 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: #040abb; --color-2: #21267a; --color-3: #27294a; --color-4: #292321; --color-5: #14100f. 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