← Back to Editor

#343B4F · #CFCFE6 · #EBF3FF · #FFFFFF · #0E0C0C

cool

A 5-color cool 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

#343B4F

Indigo · DarkSlateGray · Prussian Blue

HEX
#343B4F
RGB
rgb(52, 59, 79)
HSL
hsl(224, 21%, 26%)
HSB
hsb(224, 34%, 31%)
CMYK
cmyk(34%, 25%, 0%, 69%)
Oklch
oklch(35.5% 0.036 269.5)

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

#CFCFE6

Wisteria · LightGray · Sky Blue

HEX
#CFCFE6
RGB
rgb(207, 207, 230)
HSL
hsl(240, 32%, 86%)
HSB
hsb(240, 10%, 90%)
CMYK
cmyk(10%, 10%, 0%, 10%)
Oklch
oklch(86.2% 0.032 285.7)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#EBF3FF

Azure · Lavender · Sky Blue

HEX
#EBF3FF
RGB
rgb(235, 243, 255)
HSL
hsl(216, 100%, 96%)
HSB
hsb(216, 8%, 100%)
CMYK
cmyk(8%, 5%, 0%, 0%)
Oklch
oklch(96.2% 0.018 258.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#0E0C0C

Crimson · Black · Jet Black

HEX
#0E0C0C
RGB
rgb(14, 12, 12)
HSL
hsl(0, 8%, 5%)
HSB
hsb(0, 14%, 5%)
CMYK
cmyk(0%, 14%, 14%, 95%)
Oklch
oklch(15.7% 0.003 17.5)

Traditional「Crimson」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

343B4F
504934

Analogous

344A50
343B4F
3B3450

Triadic

343B4F
50343C
3C5034

Split-Comp.

343B4F
503B34
4A5034

Tetradic

343B4F
50344A
504934
34503B

Contrast Matrix WCAG 2.1 Contrast

343B4F
CFCFE6
EBF3FF
FFFFFF
0E0C0C
—
7.3
AAA
10.0
AAA
11.1
AAA
1.8
Fail
7.3
AAA
—
1.4
Fail
1.5
Fail
12.7
AAA
10.0
AAA
1.4
Fail
—
1.1
Fail
17.5
AAA
11.1
AAA
1.5
Fail
1.1
Fail
—
19.5
AAA
1.8
Fail
12.7
AAA
17.5
AAA
19.5
AAA
—
White BG
11.1AAA
1.5Fail
1.1Fail
1.0Fail
19.5AAA
Black BG
1.9Fail
13.7AAA
18.8AAA
21.0AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

37374A
CFCFE0
EEEFFC
FFFFFF
0D0D0C

Deuteranopia

373649
CFCFDF
EEEDFB
FFFFFF
0D0D0C

Tritanopia

344646
CFDCDB
EBFAF9
FFFFFF
0E0C0C

Achromatopsia

3B3B3B
D2D2D2
F2F2F2
FFFFFF
0D0D0D

Shades & Tints Shades & Tints

#343B4F

Dark
Light

#CFCFE6

Dark
Light

#EBF3FF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #343b4f;
  --color-2: #cfcfe6;
  --color-3: #ebf3ff;
  --color-4: #ffffff;
  --color-5: #0e0c0c;
}

SCSS

$color-1: #343b4f;
$color-2: #cfcfe6;
$color-3: #ebf3ff;
$color-4: #ffffff;
$color-5: #0e0c0c;

TAILWIND

colors: {
  'brand-1': '#343b4f',
  'brand-2': '#cfcfe6',
  'brand-3': '#ebf3ff',
  'brand-4': '#ffffff',
  'brand-5': '#0e0c0c',
}

RGB Array

[52, 59, 79], [207, 207, 230], [235, 243, 255], [255, 255, 255], [14, 12, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #343B4F, #CFCFE6, #EBF3FF, #FFFFFF, #0E0C0C is ideal for: 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: #343b4f; --color-2: #cfcfe6; --color-3: #ebf3ff; --color-4: #ffffff; --color-5: #0e0c0c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 cool-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