← Back to Editor

#483060 · #301848 · #181818 · #F0D860 · #484860

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

#483060

Dark Plum · DarkSlateGray · Eggplant

HEX
#483060
RGB
rgb(72, 48, 96)
HSL
hsl(270, 33%, 28%)
HSB
hsb(270, 50%, 38%)
CMYK
cmyk(25%, 50%, 0%, 62%)
Oklch
oklch(36.0% 0.084 305.7)

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

#301848

Dark Plum · MidnightBlue · Dark Purple

HEX
#301848
RGB
rgb(48, 24, 72)
HSL
hsl(270, 50%, 19%)
HSB
hsb(270, 67%, 28%)
CMYK
cmyk(33%, 67%, 0%, 72%)
Oklch
oklch(26.9% 0.087 304.2)

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

#181818

Ink Black · Black · Jet Black

HEX
#181818
RGB
rgb(24, 24, 24)
HSL
hsl(0, 0%, 9%)
HSB
hsb(0, 0%, 9%)
CMYK
cmyk(0%, 0%, 0%, 91%)
Oklch
oklch(20.9% 0.000 89.9)

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

#F0D860

Fresh Green · Khaki · Sunflower

HEX
#F0D860
RGB
rgb(240, 216, 96)
HSL
hsl(50, 83%, 66%)
HSB
hsb(50, 60%, 94%)
CMYK
cmyk(0%, 10%, 60%, 6%)
Oklch
oklch(88.0% 0.141 98.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#484860

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#484860
RGB
rgb(72, 72, 96)
HSL
hsl(240, 14%, 33%)
HSB
hsb(240, 25%, 38%)
CMYK
cmyk(25%, 25%, 0%, 62%)
Oklch
oklch(41.2% 0.040 284.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

483060
475F30

Analogous

30305F
483060
5F305F

Triadic

483060
5F4730
305F47

Split-Comp.

483060
5F5F30
305F30

Tetradic

483060
5F3030
475F30
305F5F

Contrast Matrix WCAG 2.1 Contrast

483060
301848
181818
F0D860
484860
—
1.4
Fail
1.6
Fail
7.9
AAA
1.3
Fail
1.4
Fail
—
1.1
Fail
10.9
AAA
1.8
Fail
1.6
Fail
1.1
Fail
—
12.4
AAA
2.0
Fail
7.9
AAA
10.9
AAA
12.4
AAA
—
6.2
AA
1.3
Fail
1.8
Fail
2.0
Fail
6.2
AA
—
White BG
11.2AAA
15.6AAA
17.8AAA
1.4Fail
8.9AAA
Black BG
1.9Fail
1.3Fail
1.2Fail
14.7AAA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3D54
26253C
181818
E6E57D
48485A

Deuteranopia

3F4152
27293A
181818
E7E984
484859

Tritanopia

474B49
2F3331
181818
EF9499
485655

Achromatopsia

3D3D3D
252525
181818
D1D1D1
4B4B4B

Shades & Tints Shades & Tints

#483060

Dark
Light

#301848

Dark
Light

#181818

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #483060;
  --color-2: #301848;
  --color-3: #181818;
  --color-4: #f0d860;
  --color-5: #484860;
}

SCSS

$color-1: #483060;
$color-2: #301848;
$color-3: #181818;
$color-4: #f0d860;
$color-5: #484860;

TAILWIND

colors: {
  'brand-1': '#483060',
  'brand-2': '#301848',
  'brand-3': '#181818',
  'brand-4': '#f0d860',
  'brand-5': '#484860',
}

RGB Array

[72, 48, 96], [48, 24, 72], [24, 24, 24], [240, 216, 96], [72, 72, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #483060, #301848, #181818, #F0D860, #484860 is ideal for: tech websites, dark mode UIs, game UIs, 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: #483060; --color-2: #301848; --color-3: #181818; --color-4: #f0d860; --color-5: #484860. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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