#000A47 + #213878 + #276C67 + #627369 + #7B8075 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#000A47

Indigo · MidnightBlue · Deep Sea Blue

HEX

#000A47

RGB

rgb(0, 10, 71)

HSL

hsl(232, 100%, 14%)

HSB

hsb(232, 100%, 28%)

CMYK

cmyk(100%, 86%, 0%, 72%)

Oklch

oklch(19.8% 0.112 263.9)

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

#213878

Indigo · MidnightBlue · Prussian Blue

HEX

#213878

RGB

rgb(33, 56, 120)

HSL

hsl(224, 57%, 30%)

HSB

hsb(224, 73%, 47%)

CMYK

cmyk(73%, 53%, 0%, 53%)

Oklch

oklch(36.1% 0.113 266.0)

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

#276C67

Mineral Blue · SeaGreen · Mint Ice

HEX

#276C67

RGB

rgb(39, 108, 103)

HSL

hsl(176, 47%, 29%)

HSB

hsb(176, 64%, 42%)

CMYK

cmyk(64%, 0%, 5%, 58%)

Oklch

oklch(48.7% 0.069 188.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#627369

Celadon · DimGray · Warm Gray

HEX

#627369

RGB

rgb(98, 115, 105)

HSL

hsl(145, 8%, 42%)

HSB

hsb(145, 15%, 45%)

CMYK

cmyk(15%, 0%, 9%, 55%)

Oklch

oklch(53.8% 0.025 159.6)

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

#7B8075

Ink Gray · Gray · Warm Gray

HEX

#7B8075

RGB

rgb(123, 128, 117)

HSL

hsl(87, 4%, 48%)

HSB

hsb(87, 9%, 50%)

CMYK

cmyk(4%, 0%, 9%, 50%)

Oklch

oklch(59.2% 0.017 127.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

000A47

473E00

Analogous

002D47

000A47

1A0047

Triadic

000A47

47000A

0A4700

Split-Comp.

000A47

471A00

2D4700

Tetradic

000A47

47002D

473E00

00471A

Contrast Matrix WCAG 2.1 Contrast

000A47	213878	276C67	627369	7B8075
—	1.7 Fail	3.0 AA Large	3.7 AA Large	4.6 AA
1.7 Fail	—	1.8 Fail	2.2 Fail	2.7 Fail
3.0 AA Large	1.8 Fail	—	1.2 Fail	1.5 Fail
3.7 AA Large	2.2 Fail	1.2 Fail	—	1.2 Fail
4.6 AA	2.7 Fail	1.5 Fail	1.2 Fail	—

White BG

18.5AAA

11.0AAA

6.1AA

5.0AA

4.0AA Large

Black BG

1.1Fail

1.9Fail

3.4AA Large

4.2AA Large

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

040438

2B2B69

454568

696A6B

7D7D78

Deuteranopia

040335

2A2865

413C69

68676C

7D7D78

Tritanopia

012D2A

225C5A

2A6969

636D6E

7B7A7A

Achromatopsia

0E0E0E

383838

575757

6D6D6D

7D7D7D

Shades & Tints Shades & Tints

#000A47

Dark

Light

#213878

Dark

Light

#276C67

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #000a47;
  --color-2: #213878;
  --color-3: #276c67;
  --color-4: #627369;
  --color-5: #7b8075;
}

SCSS

$color-1: #000a47;
$color-2: #213878;
$color-3: #276c67;
$color-4: #627369;
$color-5: #7b8075;

TAILWIND

colors: {
  'brand-1': '#000a47',
  'brand-2': '#213878',
  'brand-3': '#276c67',
  'brand-4': '#627369',
  'brand-5': '#7b8075',
}

RGB Array

[0, 10, 71], [33, 56, 120], [39, 108, 103], [98, 115, 105], [123, 128, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #000A47, #213878, #276C67, #627369, #7B8075 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: #000a47; --color-2: #213878; --color-3: #276c67; --color-4: #627369; --color-5: #7b8075. 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