← Back to Editor

#060F16 · #2A325E · #3F5C6A · #0095B2 · #829EB2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#060F16

Lake Blue · Black · Deep Sea Blue

HEX
#060F16
RGB
rgb(6, 15, 22)
HSL
hsl(206, 57%, 5%)
HSB
hsb(206, 73%, 9%)
CMYK
cmyk(73%, 32%, 0%, 91%)
Oklch
oklch(16.3% 0.021 241.3)

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

#2A325E

Indigo · DarkSlateGray · Prussian Blue

HEX
#2A325E
RGB
rgb(42, 50, 94)
HSL
hsl(231, 38%, 27%)
HSB
hsb(231, 55%, 37%)
CMYK
cmyk(55%, 47%, 0%, 63%)
Oklch
oklch(33.4% 0.078 273.7)

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

#3F5C6A

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3F5C6A
RGB
rgb(63, 92, 106)
HSL
hsl(200, 25%, 33%)
HSB
hsb(200, 41%, 42%)
CMYK
cmyk(41%, 13%, 0%, 58%)
Oklch
oklch(45.8% 0.041 229.5)

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

#0095B2

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0095B2
RGB
rgb(0, 149, 178)
HSL
hsl(190, 100%, 35%)
HSB
hsb(190, 100%, 70%)
CMYK
cmyk(100%, 16%, 0%, 30%)
Oklch
oklch(61.8% 0.111 218.1)

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

#829EB2

Slate Blue · LightSlateGray · Navy Blue

HEX
#829EB2
RGB
rgb(130, 158, 178)
HSL
hsl(205, 24%, 60%)
HSB
hsb(205, 27%, 70%)
CMYK
cmyk(27%, 11%, 0%, 30%)
Oklch
oklch(68.5% 0.043 239.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

060F16
140C05

Analogous

051413
060F16
050614

Triadic

060F16
14050E
0E1405

Split-Comp.

060F16
140506
141305

Tetradic

060F16
130514
140C05
061405

Contrast Matrix WCAG 2.1 Contrast

060F16
2A325E
3F5C6A
0095B2
829EB2
—
1.6
Fail
2.7
Fail
5.5
AA
6.9
AA
1.6
Fail
—
1.7
Fail
3.5
AA Large
4.4
AA Large
2.7
Fail
1.7
Fail
—
2.0
Fail
2.5
Fail
5.5
AA
3.5
AA Large
2.0
Fail
—
1.3
Fail
6.9
AA
4.4
AA Large
2.5
Fail
1.3
Fail
—
White BG
19.3AAA
12.2AAA
7.1AAA
3.5AA Large
2.8Fail
Black BG
1.1Fail
1.7Fail
3.0Fail
5.9AA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A14
2D2E53
4C4C67
4142AB
8E8EAD

Deuteranopia

090914
2D2C51
4A4866
382DA9
8D8AAC

Tritanopia

061313
2A4B49
406463
07A5A4
83A9A9

Achromatopsia

0D0D0D
353535
555555
6C6C6C
989898

Shades & Tints Shades & Tints

#060F16

Dark
Light

#2A325E

Dark
Light

#3F5C6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #060f16;
  --color-2: #2a325e;
  --color-3: #3f5c6a;
  --color-4: #0095b2;
  --color-5: #829eb2;
}

SCSS

$color-1: #060f16;
$color-2: #2a325e;
$color-3: #3f5c6a;
$color-4: #0095b2;
$color-5: #829eb2;

TAILWIND

colors: {
  'brand-1': '#060f16',
  'brand-2': '#2a325e',
  'brand-3': '#3f5c6a',
  'brand-4': '#0095b2',
  'brand-5': '#829eb2',
}

RGB Array

[6, 15, 22], [42, 50, 94], [63, 92, 106], [0, 149, 178], [130, 158, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #060F16, #2A325E, #3F5C6A, #0095B2, #829EB2 is ideal for: tech websites, dark mode UIs, game UIs, 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: #060f16; --color-2: #2a325e; --color-3: #3f5c6a; --color-4: #0095b2; --color-5: #829eb2. 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. 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