← Back to Editor

#417C82 · #C2FCFE · #132029 · #0C0E0D · #A81706

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#417C82

Slate Blue · SlateGray · Mint Ice

HEX
#417C82
RGB
rgb(65, 124, 130)
HSL
hsl(186, 33%, 38%)
HSB
hsb(186, 50%, 51%)
CMYK
cmyk(50%, 5%, 0%, 49%)
Oklch
oklch(54.9% 0.062 204.1)

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

#C2FCFE

Sky Blue · Lavender · Glacier Blue

HEX
#C2FCFE
RGB
rgb(194, 252, 254)
HSL
hsl(182, 97%, 88%)
HSB
hsb(182, 24%, 100%)
CMYK
cmyk(24%, 1%, 0%, 0%)
Oklch
oklch(95.2% 0.058 198.9)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#132029

Slate Blue · Black · Deep Sea Blue

HEX
#132029
RGB
rgb(19, 32, 41)
HSL
hsl(205, 37%, 12%)
HSB
hsb(205, 54%, 16%)
CMYK
cmyk(54%, 22%, 0%, 84%)
Oklch
oklch(23.6% 0.025 239.4)

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

#0C0E0D

Mineral Blue · Black · Jet Black

HEX
#0C0E0D
RGB
rgb(12, 14, 13)
HSL
hsl(150, 8%, 5%)
HSB
hsb(150, 14%, 5%)
CMYK
cmyk(14%, 0%, 7%, 95%)
Oklch
oklch(16.1% 0.004 164.5)

Traditional「Mineral Blue」· Paint「Jet Black」· Creative Midnight Shadow

#A81706

Vermilion · FireBrick · Wine Red

HEX
#A81706
RGB
rgb(168, 23, 6)
HSL
hsl(6, 93%, 34%)
HSB
hsb(6, 96%, 66%)
CMYK
cmyk(0%, 86%, 96%, 34%)
Oklch
oklch(46.9% 0.180 30.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

417C82
814741

Analogous

418167
417C82
415B81

Triadic

417C82
81417A
7A8141

Split-Comp.

417C82
81415B
816741

Tetradic

417C82
674181
814741
5B8141

Contrast Matrix WCAG 2.1 Contrast

417C82
C2FCFE
132029
0C0E0D
A81706
—
4.2
AA Large
3.5
AA Large
4.1
AA Large
1.6
Fail
4.2
AA Large
—
14.7
AAA
17.2
AAA
6.7
AA
3.5
AA Large
14.7
AAA
—
1.2
Fail
2.2
Fail
4.1
AA Large
17.2
AAA
1.2
Fail
—
2.6
Fail
1.6
Fail
6.7
AA
2.2
Fail
2.6
Fail
—
White BG
4.7AA
1.1Fail
16.6AAA
19.4AAA
7.5AAA
Black BG
4.4AA Large
18.6AAA
1.3Fail
1.1Fail
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B81
DBDCFE
191927
0D0D0D
69680A

Deuteranopia

575380
D8D3FD
181726
0D0D0D
727D0B

Tritanopia

447F7F
C5FDFD
142525
0C0D0D
A10D0E

Achromatopsia

6B6B6B
EBEBEB
1D1D1D
0D0D0D
404040

Shades & Tints Shades & Tints

#417C82

Dark
Light

#C2FCFE

Dark
Light

#132029

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #417c82;
  --color-2: #c2fcfe;
  --color-3: #132029;
  --color-4: #0c0e0d;
  --color-5: #a81706;
}

SCSS

$color-1: #417c82;
$color-2: #c2fcfe;
$color-3: #132029;
$color-4: #0c0e0d;
$color-5: #a81706;

TAILWIND

colors: {
  'brand-1': '#417c82',
  'brand-2': '#c2fcfe',
  'brand-3': '#132029',
  'brand-4': '#0c0e0d',
  'brand-5': '#a81706',
}

RGB Array

[65, 124, 130], [194, 252, 254], [19, 32, 41], [12, 14, 13], [168, 23, 6]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #417C82, #C2FCFE, #132029, #0C0E0D, #A81706 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: #417c82; --color-2: #c2fcfe; --color-3: #132029; --color-4: #0c0e0d; --color-5: #a81706. 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