← Back to Editor

#646068 · #B3B8B7 · #F86254 · #F88378 · #F5E8F9

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#646068

Ink Gray · DimGray · Charcoal

HEX
#646068
RGB
rgb(100, 96, 104)
HSL
hsl(270, 4%, 39%)
HSB
hsb(270, 8%, 41%)
CMYK
cmyk(4%, 8%, 0%, 59%)
Oklch
oklch(49.5% 0.013 308.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#B3B8B7

Silver Gray · Silver · Pearl Gray

HEX
#B3B8B7
RGB
rgb(179, 184, 183)
HSL
hsl(168, 3%, 71%)
HSB
hsb(168, 3%, 72%)
CMYK
cmyk(3%, 0%, 1%, 28%)
Oklch
oklch(77.8% 0.006 183.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#F86254

Peach Pink · Tomato · Coral Red

HEX
#F86254
RGB
rgb(248, 98, 84)
HSL
hsl(5, 92%, 65%)
HSB
hsb(5, 66%, 97%)
CMYK
cmyk(0%, 60%, 66%, 3%)
Oklch
oklch(68.6% 0.187 28.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F88378

Peach Pink · Salmon · Coral Red

HEX
#F88378
RGB
rgb(248, 131, 120)
HSL
hsl(5, 90%, 72%)
HSB
hsb(5, 52%, 97%)
CMYK
cmyk(0%, 47%, 52%, 3%)
Oklch
oklch(73.8% 0.145 26.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F5E8F9

Lilac · Lavender · Lavender

HEX
#F5E8F9
RGB
rgb(245, 232, 249)
HSL
hsl(286, 59%, 94%)
HSB
hsb(286, 7%, 98%)
CMYK
cmyk(2%, 7%, 0%, 2%)
Oklch
oklch(94.6% 0.026 318.2)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

646068
63675F

Analogous

5F5F67
646068
675F67

Triadic

646068
67635F
5F6763

Split-Comp.

646068
67675F
5F675F

Tetradic

646068
675F5F
63675F
5F6767

Contrast Matrix WCAG 2.1 Contrast

646068
B3B8B7
F86254
F88378
F5E8F9
—
3.1
AA Large
2.0
Fail
2.5
Fail
5.2
AA
3.1
AA Large
—
1.5
Fail
1.2
Fail
1.7
Fail
2.0
Fail
1.5
Fail
—
1.2
Fail
2.6
Fail
2.5
Fail
1.2
Fail
1.2
Fail
—
2.1
Fail
5.2
AA
1.7
Fail
2.6
Fail
2.1
Fail
—
White BG
6.1AA
2.0Fail
3.1AA Large
2.5Fail
1.2Fail
Black BG
3.4AA Large
10.5AAA
6.9AA
8.5AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

626266
B5B5B7
B7B657
C5C47B
EFEFF5

Deuteranopia

636366
B5B5B7
C0CB58
CCD57B
F0F1F4

Tritanopia

646564
B3B7B7
F15A5B
F27D7D
F4F2F1

Achromatopsia

626262
B6B6B6
8D8D8D
A5A5A5
EEEEEE

Shades & Tints Shades & Tints

#646068

Dark
Light

#B3B8B7

Dark
Light

#F86254

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #646068;
  --color-2: #b3b8b7;
  --color-3: #f86254;
  --color-4: #f88378;
  --color-5: #f5e8f9;
}

SCSS

$color-1: #646068;
$color-2: #b3b8b7;
$color-3: #f86254;
$color-4: #f88378;
$color-5: #f5e8f9;

TAILWIND

colors: {
  'brand-1': '#646068',
  'brand-2': '#b3b8b7',
  'brand-3': '#f86254',
  'brand-4': '#f88378',
  'brand-5': '#f5e8f9',
}

RGB Array

[100, 96, 104], [179, 184, 183], [248, 98, 84], [248, 131, 120], [245, 232, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #646068, #B3B8B7, #F86254, #F88378, #F5E8F9 is ideal for: health products, baby brands, fresh-style blogs, 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: #646068; --color-2: #b3b8b7; --color-3: #f86254; --color-4: #f88378; --color-5: #f5e8f9. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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