← Back to Editor

#020A2E · #646688 · #A07A8B · #F8A887 · #FECF8C

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

#020A2E

Indigo · Black · Deep Sea Blue

HEX
#020A2E
RGB
rgb(2, 10, 46)
HSL
hsl(229, 92%, 9%)
HSB
hsb(229, 96%, 18%)
CMYK
cmyk(96%, 78%, 0%, 82%)
Oklch
oklch(16.7% 0.074 265.0)

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

#646688

Indigo · SlateGray · Navy Blue

HEX
#646688
RGB
rgb(100, 102, 136)
HSL
hsl(237, 15%, 46%)
HSB
hsb(237, 26%, 53%)
CMYK
cmyk(26%, 25%, 0%, 47%)
Oklch
oklch(52.2% 0.053 281.7)

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

#A07A8B

Dark Violet · Gray · Rose Pink

HEX
#A07A8B
RGB
rgb(160, 122, 139)
HSL
hsl(333, 17%, 55%)
HSB
hsb(333, 24%, 63%)
CMYK
cmyk(0%, 24%, 13%, 37%)
Oklch
oklch(62.2% 0.053 350.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F8A887

Apricot · LightSalmon · Warm Sun

HEX
#F8A887
RGB
rgb(248, 168, 135)
HSL
hsl(18, 89%, 75%)
HSB
hsb(18, 46%, 97%)
CMYK
cmyk(0%, 32%, 46%, 3%)
Oklch
oklch(80.2% 0.105 43.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FECF8C

Goose Yellow · Khaki · Peach Orange

HEX
#FECF8C
RGB
rgb(254, 207, 140)
HSL
hsl(35, 98%, 77%)
HSB
hsb(35, 45%, 100%)
CMYK
cmyk(0%, 19%, 45%, 0%)
Oklch
oklch(88.1% 0.100 75.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020A2E
2C2402

Analogous

021F2C
020A2E
0F022C

Triadic

020A2E
2C020A
0A2C02

Split-Comp.

020A2E
2C0F02
1F2C02

Tetradic

020A2E
2C021F
2C2402
022C0F

Contrast Matrix WCAG 2.1 Contrast

020A2E
646688
A07A8B
F8A887
FECF8C
—
3.5
AA Large
5.2
AA
10.1
AAA
13.4
AAA
3.5
AA Large
—
1.5
Fail
2.9
Fail
3.8
AA Large
5.2
AA
1.5
Fail
—
1.9
Fail
2.6
Fail
10.1
AAA
2.9
Fail
1.9
Fail
—
1.3
Fail
13.4
AAA
3.8
AA Large
2.6
Fail
1.3
Fail
—
White BG
19.3AAA
5.5AA
3.7AA Large
1.9Fail
1.4Fail
Black BG
1.1Fail
3.8AA Large
5.7AA
10.9AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

050625
656580
908F87
D5D58F
EAE99C

Deuteranopia

050423
65657E
929586
DAE091
ECF0A0

Tritanopia

021E1D
647978
9E8483
F49597
FCA9AC

Achromatopsia

0C0C0C
696969
878787
BCBCBC
D5D5D5

Shades & Tints Shades & Tints

#020A2E

Dark
Light

#646688

Dark
Light

#A07A8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020a2e;
  --color-2: #646688;
  --color-3: #a07a8b;
  --color-4: #f8a887;
  --color-5: #fecf8c;
}

SCSS

$color-1: #020a2e;
$color-2: #646688;
$color-3: #a07a8b;
$color-4: #f8a887;
$color-5: #fecf8c;

TAILWIND

colors: {
  'brand-1': '#020a2e',
  'brand-2': '#646688',
  'brand-3': '#a07a8b',
  'brand-4': '#f8a887',
  'brand-5': '#fecf8c',
}

RGB Array

[2, 10, 46], [100, 102, 136], [160, 122, 139], [248, 168, 135], [254, 207, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #020A2E, #646688, #A07A8B, #F8A887, #FECF8C 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: #020a2e; --color-2: #646688; --color-3: #a07a8b; --color-4: #f8a887; --color-5: #fecf8c. 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