← Back to Editor

#FDF9FA · #81C4F8 · #4E50B4 · #2B213C · #0C102D

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#FDF9FA

Peach Pink · Snow · Cherry Blossom

HEX
#FDF9FA
RGB
rgb(253, 249, 250)
HSL
hsl(345, 50%, 98%)
HSB
hsb(345, 2%, 99%)
CMYK
cmyk(0%, 2%, 1%, 1%)
Oklch
oklch(98.5% 0.004 360.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#81C4F8

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#81C4F8
RGB
rgb(129, 196, 248)
HSL
hsl(206, 89%, 74%)
HSB
hsb(206, 48%, 97%)
CMYK
cmyk(48%, 21%, 0%, 3%)
Oklch
oklch(79.5% 0.101 242.9)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#4E50B4

Azure · SlateBlue · Navy Blue

HEX
#4E50B4
RGB
rgb(78, 80, 180)
HSL
hsl(239, 40%, 51%)
HSB
hsb(239, 57%, 71%)
CMYK
cmyk(57%, 56%, 0%, 29%)
Oklch
oklch(48.5% 0.155 278.1)

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

#2B213C

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#2B213C
RGB
rgb(43, 33, 60)
HSL
hsl(262, 29%, 18%)
HSB
hsb(262, 45%, 24%)
CMYK
cmyk(28%, 45%, 0%, 76%)
Oklch
oklch(27.3% 0.050 300.1)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#0C102D

Indigo · Black · Deep Sea Blue

HEX
#0C102D
RGB
rgb(12, 16, 45)
HSL
hsl(233, 58%, 11%)
HSB
hsb(233, 73%, 18%)
CMYK
cmyk(73%, 64%, 0%, 82%)
Oklch
oklch(18.9% 0.058 273.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF9FA
F7FCFB

Analogous

FCF7FB
FDF9FA
FCF9F7

Triadic

FDF9FA
F9FCF7
F7F9FC

Split-Comp.

FDF9FA
F7FCF9
F7FBFC

Tetradic

FDF9FA
FBFCF7
F7FCFB
F9F7FC

Contrast Matrix WCAG 2.1 Contrast

FDF9FA
81C4F8
4E50B4
2B213C
0C102D
—
1.8
Fail
6.4
AA
14.5
AAA
17.8
AAA
1.8
Fail
—
3.6
AA Large
8.1
AAA
9.9
AAA
6.4
AA
3.6
AA Large
—
2.3
Fail
2.8
Fail
14.5
AAA
8.1
AAA
2.3
Fail
—
1.2
Fail
17.8
AAA
9.9
AAA
2.8
Fail
1.2
Fail
—
White BG
1.0Fail
1.9Fail
6.7AA
15.2AAA
18.6AAA
Black BG
20.1AAA
11.2AAA
3.1AA Large
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBFA
9E9FEB
4F4F9C
272735
0E0E26

Deuteranopia

FCFCFA
9A95E8
4F4F96
272834
0E0D24

Tritanopia

FDFAFA
84E1DF
4E8985
2B302F
0C201F

Achromatopsia

FAFAFA
B6B6B6
5B5B5B
272727
121212

Shades & Tints Shades & Tints

#FDF9FA

Dark
Light

#81C4F8

Dark
Light

#4E50B4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf9fa;
  --color-2: #81c4f8;
  --color-3: #4e50b4;
  --color-4: #2b213c;
  --color-5: #0c102d;
}

SCSS

$color-1: #fdf9fa;
$color-2: #81c4f8;
$color-3: #4e50b4;
$color-4: #2b213c;
$color-5: #0c102d;

TAILWIND

colors: {
  'brand-1': '#fdf9fa',
  'brand-2': '#81c4f8',
  'brand-3': '#4e50b4',
  'brand-4': '#2b213c',
  'brand-5': '#0c102d',
}

RGB Array

[253, 249, 250], [129, 196, 248], [78, 80, 180], [43, 33, 60], [12, 16, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FDF9FA, #81C4F8, #4E50B4, #2B213C, #0C102D is ideal for: 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: #fdf9fa; --color-2: #81c4f8; --color-3: #4e50b4; --color-4: #2b213c; --color-5: #0c102d. 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 pastel-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