← Back to Editor

#20252A · #17294D · #AAABCC · #E5F2E8

A 4-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

#20252A

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#20252A
RGB
rgb(32, 37, 42)
HSL
hsl(210, 14%, 15%)
HSB
hsb(210, 24%, 16%)
CMYK
cmyk(24%, 12%, 0%, 84%)
Oklch
oklch(26.2% 0.012 248.3)

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

#17294D

Indigo · MidnightBlue · Deep Sea Blue

HEX
#17294D
RGB
rgb(23, 41, 77)
HSL
hsl(220, 54%, 20%)
HSB
hsb(220, 70%, 30%)
CMYK
cmyk(70%, 47%, 0%, 70%)
Oklch
oklch(28.7% 0.070 262.7)

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

#AAABCC

Azure · LightSteelBlue · Cobalt Blue

HEX
#AAABCC
RGB
rgb(170, 171, 204)
HSL
hsl(238, 25%, 73%)
HSB
hsb(238, 17%, 80%)
CMYK
cmyk(17%, 16%, 0%, 20%)
Oklch
oklch(75.1% 0.047 283.8)

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

#E5F2E8

Celadon · Beige · Mint Green

HEX
#E5F2E8
RGB
rgb(229, 242, 232)
HSL
hsl(134, 33%, 92%)
HSB
hsb(134, 5%, 95%)
CMYK
cmyk(5%, 0%, 4%, 5%)
Oklch
oklch(94.9% 0.019 152.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20252A
2C2621

Analogous

212C2C
20252A
21212C

Triadic

20252A
2C2126
262C21

Split-Comp.

20252A
2C2121
2C2C21

Tetradic

20252A
2C212C
2C2621
212C21

Contrast Matrix WCAG 2.1 Contrast

20252A
17294D
AAABCC
E5F2E8
—
1.1
Fail
6.9
AA
13.4
AAA
1.1
Fail
—
6.4
AA
12.5
AAA
6.9
AA
6.4
AA
—
1.9
Fail
13.4
AAA
12.5
AAA
1.9
Fail
—
White BG
15.4AAA
14.4AAA
2.2Fail
1.2Fail
Black BG
1.4Fail
1.5Fail
9.4AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222229
1F1F44
AAAAC4
EBEBEA

Deuteranopia

222229
1E1C42
AAAAC2
EAE9EB

Tritanopia

202828
183D3C
AABEBC
E6ECED

Achromatopsia

242424
282828
AEAEAE
EDEDED

Shades & Tints Shades & Tints

#20252A

Dark
Light

#17294D

Dark
Light

#AAABCC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20252a;
  --color-2: #17294d;
  --color-3: #aaabcc;
  --color-4: #e5f2e8;
}

SCSS

$color-1: #20252a;
$color-2: #17294d;
$color-3: #aaabcc;
$color-4: #e5f2e8;

TAILWIND

colors: {
  'brand-1': '#20252a',
  'brand-2': '#17294d',
  'brand-3': '#aaabcc',
  'brand-4': '#e5f2e8',
}

RGB Array

[32, 37, 42], [23, 41, 77], [170, 171, 204], [229, 242, 232]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #20252A, #17294D, #AAABCC, #E5F2E8 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #20252a; --color-2: #17294d; --color-3: #aaabcc; --color-4: #e5f2e8. 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 general-style 4-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