← Back to Editor

#1E2D45 · #334D59 · #417366 · #65B878 · #CADEA6

cool

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

#1E2D45

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1E2D45
RGB
rgb(30, 45, 69)
HSL
hsl(217, 39%, 19%)
HSB
hsb(217, 57%, 27%)
CMYK
cmyk(57%, 35%, 0%, 73%)
Oklch
oklch(29.6% 0.048 259.5)

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

#334D59

Slate Blue · DarkSlateGray · Mint Ice

HEX
#334D59
RGB
rgb(51, 77, 89)
HSL
hsl(199, 27%, 27%)
HSB
hsb(199, 43%, 35%)
CMYK
cmyk(43%, 13%, 0%, 65%)
Oklch
oklch(40.4% 0.037 228.5)

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

#417366

Mineral Blue · SeaGreen · Mint Ice

HEX
#417366
RGB
rgb(65, 115, 102)
HSL
hsl(164, 28%, 35%)
HSB
hsb(164, 43%, 45%)
CMYK
cmyk(43%, 0%, 11%, 55%)
Oklch
oklch(51.6% 0.058 175.3)

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

#65B878

Celadon · MediumSeaGreen · Olive Green

HEX
#65B878
RGB
rgb(101, 184, 120)
HSL
hsl(134, 37%, 56%)
HSB
hsb(134, 45%, 72%)
CMYK
cmyk(45%, 0%, 35%, 28%)
Oklch
oklch(71.3% 0.124 149.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#CADEA6

Willow Green · Silver · Apple Green

HEX
#CADEA6
RGB
rgb(202, 222, 166)
HSL
hsl(81, 46%, 76%)
HSB
hsb(81, 25%, 87%)
CMYK
cmyk(9%, 0%, 25%, 13%)
Oklch
oklch(87.2% 0.077 123.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E2D45
43351E

Analogous

1E3F43
1E2D45
221E43

Triadic

1E2D45
431E2C
2C431E

Split-Comp.

1E2D45
43221E
3F431E

Tetradic

1E2D45
431E3F
43351E
1E4322

Contrast Matrix WCAG 2.1 Contrast

1E2D45
334D59
417366
65B878
CADEA6
—
1.5
Fail
2.6
Fail
5.7
AA
9.6
AAA
1.5
Fail
—
1.6
Fail
3.7
AA Large
6.2
AA
2.6
Fail
1.6
Fail
—
2.2
Fail
3.8
AA Large
5.7
AA
3.7
AA Large
2.2
Fail
—
1.7
Fail
9.6
AAA
6.2
AA
3.8
AA Large
1.7
Fail
—
White BG
13.8AAA
8.9AAA
5.4AA
2.4Fail
1.4Fail
Black BG
1.5Fail
2.3Fail
3.9AA Large
8.7AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

24253F
3E3E56
575769
898A87
D3D3B4

Deuteranopia

24233E
3D3B55
54506A
847E8B
D2D0B7

Tritanopia

1F3B3A
345453
446C6C
699496
CBBEC1

Achromatopsia

2B2B2B
474747
636363
989898
D2D2D2

Shades & Tints Shades & Tints

#1E2D45

Dark
Light

#334D59

Dark
Light

#417366

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e2d45;
  --color-2: #334d59;
  --color-3: #417366;
  --color-4: #65b878;
  --color-5: #cadea6;
}

SCSS

$color-1: #1e2d45;
$color-2: #334d59;
$color-3: #417366;
$color-4: #65b878;
$color-5: #cadea6;

TAILWIND

colors: {
  'brand-1': '#1e2d45',
  'brand-2': '#334d59',
  'brand-3': '#417366',
  'brand-4': '#65b878',
  'brand-5': '#cadea6',
}

RGB Array

[30, 45, 69], [51, 77, 89], [65, 115, 102], [101, 184, 120], [202, 222, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #1E2D45, #334D59, #417366, #65B878, #CADEA6 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: #1e2d45; --color-2: #334d59; --color-3: #417366; --color-4: #65b878; --color-5: #cadea6. 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