← Back to Editor

#C5E9F7 · #418FA6 · #2F5967 · #0E4355 · #1F272A

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

#C5E9F7

Sky Blue · Lavender · Glacier Blue

HEX
#C5E9F7
RGB
rgb(197, 233, 247)
HSL
hsl(197, 76%, 87%)
HSB
hsb(197, 20%, 97%)
CMYK
cmyk(20%, 6%, 0%, 3%)
Oklch
oklch(91.3% 0.042 223.3)

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

#418FA6

Slate Blue · SteelBlue · Mint Ice

HEX
#418FA6
RGB
rgb(65, 143, 166)
HSL
hsl(194, 44%, 45%)
HSB
hsb(194, 61%, 65%)
CMYK
cmyk(61%, 14%, 0%, 35%)
Oklch
oklch(61.1% 0.083 220.1)

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

#2F5967

Slate Blue · DarkSlateGray · Mint Ice

HEX
#2F5967
RGB
rgb(47, 89, 103)
HSL
hsl(195, 37%, 29%)
HSB
hsb(195, 54%, 40%)
CMYK
cmyk(54%, 14%, 0%, 60%)
Oklch
oklch(43.9% 0.052 221.8)

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

#0E4355

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0E4355
RGB
rgb(14, 67, 85)
HSL
hsl(195, 72%, 19%)
HSB
hsb(195, 84%, 33%)
CMYK
cmyk(84%, 21%, 0%, 67%)
Oklch
oklch(35.8% 0.061 225.7)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1F272A

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F272A
RGB
rgb(31, 39, 42)
HSL
hsl(196, 15%, 14%)
HSB
hsb(196, 26%, 16%)
CMYK
cmyk(26%, 7%, 0%, 84%)
Oklch
oklch(26.6% 0.013 222.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5E9F7
F7D3C5

Analogous

C5F7EC
C5E9F7
C5D0F7

Triadic

C5E9F7
F7C5E9
E9F7C5

Split-Comp.

C5E9F7
F7C5D0
F7ECC5

Tetradic

C5E9F7
ECC5F7
F7D3C5
D0F7C5

Contrast Matrix WCAG 2.1 Contrast

C5E9F7
418FA6
2F5967
0E4355
1F272A
—
2.9
Fail
6.0
AA
8.4
AAA
11.8
AAA
2.9
Fail
—
2.1
Fail
2.9
Fail
4.1
AA Large
6.0
AA
2.1
Fail
—
1.4
Fail
2.0
Fail
8.4
AAA
2.9
Fail
1.4
Fail
—
1.4
Fail
11.8
AAA
4.1
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.3Fail
3.7AA Large
7.6AAA
10.8AAA
15.2AAA
Black BG
16.4AAA
5.7AA
2.7Fail
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5F4
6363A0
414264
252551
222329

Deuteranopia

D3D0F3
5E589F
3F3C63
221E50
222129

Tritanopia

C7F1F0
459C9B
316160
114D4C
1F2929

Achromatopsia

E0E0E0
7A7A7A
4E4E4E
353535
252525

Shades & Tints Shades & Tints

#C5E9F7

Dark
Light

#418FA6

Dark
Light

#2F5967

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5e9f7;
  --color-2: #418fa6;
  --color-3: #2f5967;
  --color-4: #0e4355;
  --color-5: #1f272a;
}

SCSS

$color-1: #c5e9f7;
$color-2: #418fa6;
$color-3: #2f5967;
$color-4: #0e4355;
$color-5: #1f272a;

TAILWIND

colors: {
  'brand-1': '#c5e9f7',
  'brand-2': '#418fa6',
  'brand-3': '#2f5967',
  'brand-4': '#0e4355',
  'brand-5': '#1f272a',
}

RGB Array

[197, 233, 247], [65, 143, 166], [47, 89, 103], [14, 67, 85], [31, 39, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5E9F7, #418FA6, #2F5967, #0E4355, #1F272A 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: #c5e9f7; --color-2: #418fa6; --color-3: #2f5967; --color-4: #0e4355; --color-5: #1f272a. 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