← Back to Editor

#F0F0F0 · #181860 · #F0D8D8 · #C0A8C0 · #A8A8C0

A 5-color palette 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

#F0F0F0

Plain White · Linen · Cloud White

HEX
#F0F0F0
RGB
rgb(240, 240, 240)
HSL
hsl(0, 0%, 94%)
HSB
hsb(0, 0%, 94%)
CMYK
cmyk(0%, 0%, 0%, 6%)
Oklch
oklch(95.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#181860

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#181860
RGB
rgb(24, 24, 96)
HSL
hsl(240, 60%, 24%)
HSB
hsb(240, 75%, 38%)
CMYK
cmyk(75%, 75%, 0%, 62%)
Oklch
oklch(26.8% 0.123 274.2)

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

#F0D8D8

Peach Pink · Bisque · Cherry Blossom

HEX
#F0D8D8
RGB
rgb(240, 216, 216)
HSL
hsl(0, 44%, 89%)
HSB
hsb(0, 10%, 94%)
CMYK
cmyk(0%, 10%, 10%, 6%)
Oklch
oklch(90.2% 0.027 17.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#C0A8C0

Mauve · Silver · Lilac Purple

HEX
#C0A8C0
RGB
rgb(192, 168, 192)
HSL
hsl(300, 16%, 71%)
HSB
hsb(300, 13%, 75%)
CMYK
cmyk(0%, 13%, 0%, 25%)
Oklch
oklch(76.0% 0.043 326.0)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#A8A8C0

Wisteria · DarkGray · Cobalt Blue

HEX
#A8A8C0
RGB
rgb(168, 168, 192)
HSL
hsl(240, 16%, 71%)
HSB
hsb(240, 13%, 75%)
CMYK
cmyk(13%, 13%, 0%, 25%)
Oklch
oklch(73.9% 0.034 285.5)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F0F0
F0F0F0

Analogous

F0F0F0
F0F0F0
F0F0F0

Triadic

F0F0F0
F0F0F0
F0F0F0

Split-Comp.

F0F0F0
F0F0F0
F0F0F0

Tetradic

F0F0F0
F0F0F0
F0F0F0
F0F0F0

Contrast Matrix WCAG 2.1 Contrast

F0F0F0
181860
F0D8D8
C0A8C0
A8A8C0
—
13.8
AAA
1.2
Fail
1.9
Fail
2.0
Fail
13.8
AAA
—
11.6
AAA
7.2
AAA
6.7
AA
1.2
Fail
11.6
AAA
—
1.6
Fail
1.7
Fail
1.9
Fail
7.2
AAA
1.6
Fail
—
1.1
Fail
2.0
Fail
6.7
AA
1.7
Fail
1.1
Fail
—
White BG
1.1Fail
15.7AAA
1.4Fail
2.2Fail
2.3Fail
Black BG
18.4AAA
1.3Fail
15.5AAA
9.6AAA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0F0
18184F
E6E5D8
B6B5BA
A8A8BA

Deuteranopia

F0F0F0
18184A
E7E9D8
B7B9B9
A8A8B9

Tritanopia

F0F0F0
18413E
EFD8D8
BFB6B5
A8B6B5

Achromatopsia

F0F0F0
202020
DFDFDF
B2B2B2
ABABAB

Shades & Tints Shades & Tints

#F0F0F0

Dark
Light

#181860

Dark
Light

#F0D8D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f0f0;
  --color-2: #181860;
  --color-3: #f0d8d8;
  --color-4: #c0a8c0;
  --color-5: #a8a8c0;
}

SCSS

$color-1: #f0f0f0;
$color-2: #181860;
$color-3: #f0d8d8;
$color-4: #c0a8c0;
$color-5: #a8a8c0;

TAILWIND

colors: {
  'brand-1': '#f0f0f0',
  'brand-2': '#181860',
  'brand-3': '#f0d8d8',
  'brand-4': '#c0a8c0',
  'brand-5': '#a8a8c0',
}

RGB Array

[240, 240, 240], [24, 24, 96], [240, 216, 216], [192, 168, 192], [168, 168, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F0F0, #181860, #F0D8D8, #C0A8C0, #A8A8C0 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f0f0f0; --color-2: #181860; --color-3: #f0d8d8; --color-4: #c0a8c0; --color-5: #a8a8c0. 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 general-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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