← Back to Editor

#040F5F · #7565B0 · #A473AB · #FBC9E4 · #FBF1E7

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#040F5F

Indigo · MidnightBlue · Deep Sea Blue

HEX
#040F5F
RGB
rgb(4, 15, 95)
HSL
hsl(233, 92%, 19%)
HSB
hsb(233, 96%, 37%)
CMYK
cmyk(96%, 84%, 0%, 63%)
Oklch
oklch(24.1% 0.137 265.9)

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

#7565B0

Deep Indigo · SlateBlue · Navy Blue

HEX
#7565B0
RGB
rgb(117, 101, 176)
HSL
hsl(253, 32%, 54%)
HSB
hsb(253, 43%, 69%)
CMYK
cmyk(34%, 43%, 0%, 31%)
Oklch
oklch(55.5% 0.115 292.0)

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

#A473AB

Dark Plum · LightSlateGray · Violet

HEX
#A473AB
RGB
rgb(164, 115, 171)
HSL
hsl(293, 25%, 56%)
HSB
hsb(293, 33%, 67%)
CMYK
cmyk(4%, 33%, 0%, 33%)
Oklch
oklch(62.5% 0.099 322.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#FBC9E4

Mauve · Pink · Cherry Blossom

HEX
#FBC9E4
RGB
rgb(251, 201, 228)
HSL
hsl(328, 86%, 89%)
HSB
hsb(328, 20%, 98%)
CMYK
cmyk(0%, 20%, 9%, 2%)
Oklch
oklch(88.7% 0.066 344.9)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#FBF1E7

Goose Yellow · Linen · Peach Orange

HEX
#FBF1E7
RGB
rgb(251, 241, 231)
HSL
hsl(30, 71%, 95%)
HSB
hsb(30, 8%, 98%)
CMYK
cmyk(0%, 4%, 8%, 2%)
Oklch
oklch(96.3% 0.017 67.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

040F5F
5D5304

Analogous

043B5D
040F5F
26045D

Triadic

040F5F
5D040E
0E5D04

Split-Comp.

040F5F
5D2604
3B5D04

Tetradic

040F5F
5D043B
5D5304
045D26

Contrast Matrix WCAG 2.1 Contrast

040F5F
7565B0
A473AB
FBC9E4
FBF1E7
—
3.4
AA Large
4.5
AA
11.8
AAA
15.2
AAA
3.4
AA Large
—
1.3
Fail
3.4
AA Large
4.4
AA Large
4.5
AA
1.3
Fail
—
2.6
Fail
3.4
AA Large
11.8
AAA
3.4
AA Large
2.6
Fail
—
1.3
Fail
15.2
AAA
4.4
AA Large
3.4
AA Large
1.3
Fail
—
White BG
17.0AAA
4.9AA
3.7AA Large
1.4Fail
1.1Fail
Black BG
1.2Fail
4.2AA Large
5.6AA
14.6AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

09094C
6E6E9E
8F8E9D
E5E5DD
F7F7E9

Deuteranopia

080747
6F709A
92959A
E8ECDC
F7F8EA

Tritanopia

053C39
74908C
A29390
F9D8D7
FBEBEC

Achromatopsia

151515
727272
888888
DBDBDB
F3F3F3

Shades & Tints Shades & Tints

#040F5F

Dark
Light

#7565B0

Dark
Light

#A473AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #040f5f;
  --color-2: #7565b0;
  --color-3: #a473ab;
  --color-4: #fbc9e4;
  --color-5: #fbf1e7;
}

SCSS

$color-1: #040f5f;
$color-2: #7565b0;
$color-3: #a473ab;
$color-4: #fbc9e4;
$color-5: #fbf1e7;

TAILWIND

colors: {
  'brand-1': '#040f5f',
  'brand-2': '#7565b0',
  'brand-3': '#a473ab',
  'brand-4': '#fbc9e4',
  'brand-5': '#fbf1e7',
}

RGB Array

[4, 15, 95], [117, 101, 176], [164, 115, 171], [251, 201, 228], [251, 241, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #040F5F, #7565B0, #A473AB, #FBC9E4, #FBF1E7 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #040f5f; --color-2: #7565b0; --color-3: #a473ab; --color-4: #fbc9e4; --color-5: #fbf1e7. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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