← Back to Editor

#22223B · #4A4E69 · #9A8C98 · #C9ADA7 · #F2E9E4

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

#22223B

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#22223B
RGB
rgb(34, 34, 59)
HSL
hsl(240, 27%, 18%)
HSB
hsb(240, 42%, 23%)
CMYK
cmyk(42%, 42%, 0%, 77%)
Oklch
oklch(26.5% 0.046 282.8)

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

#4A4E69

Indigo · DarkSlateGray · Prussian Blue

HEX
#4A4E69
RGB
rgb(74, 78, 105)
HSL
hsl(232, 17%, 35%)
HSB
hsb(232, 30%, 41%)
CMYK
cmyk(30%, 26%, 0%, 59%)
Oklch
oklch(43.1% 0.045 277.8)

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

#9A8C98

Ash · LightSlateGray · Silver Sand

HEX
#9A8C98
RGB
rgb(154, 140, 152)
HSL
hsl(309, 6%, 58%)
HSB
hsb(309, 9%, 60%)
CMYK
cmyk(0%, 9%, 1%, 40%)
Oklch
oklch(65.6% 0.024 330.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C9ADA7

Peach Pink · Tan · Coral Red

HEX
#C9ADA7
RGB
rgb(201, 173, 167)
HSL
hsl(11, 24%, 72%)
HSB
hsb(11, 17%, 79%)
CMYK
cmyk(0%, 14%, 17%, 21%)
Oklch
oklch(77.0% 0.034 32.1)

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

#F2E9E4

Apricot · Linen · Peach Orange

HEX
#F2E9E4
RGB
rgb(242, 233, 228)
HSL
hsl(21, 35%, 92%)
HSB
hsb(21, 6%, 95%)
CMYK
cmyk(0%, 4%, 6%, 5%)
Oklch
oklch(94.0% 0.012 51.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22223B
3A3A22

Analogous

222E3A
22223B
2E223A

Triadic

22223B
3A2222
223A22

Split-Comp.

22223B
3A2E22
2E3A22

Tetradic

22223B
3A222E
3A3A22
223A2E

Contrast Matrix WCAG 2.1 Contrast

22223B
4A4E69
9A8C98
C9ADA7
F2E9E4
—
1.9
Fail
4.8
AA
7.4
AAA
12.9
AAA
1.9
Fail
—
2.5
Fail
3.9
AA Large
6.8
AA
4.8
AA
2.5
Fail
—
1.5
Fail
2.7
Fail
7.4
AAA
3.9
AA Large
1.5
Fail
—
1.8
Fail
12.9
AAA
6.8
AA
2.7
Fail
1.8
Fail
—
White BG
15.4AAA
8.1AAA
3.2AA Large
2.1Fail
1.2Fail
Black BG
1.4Fail
2.6Fail
6.6AA
10.0AAA
17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222235
4C4C62
949495
BDBDA8
EEEEE5

Deuteranopia

222234
4C4B61
959694
BFC1A9
EFEFE6

Tritanopia

22302F
4A5D5C
999392
C8AAAA
F2E6E6

Achromatopsia

252525
505050
929292
B5B5B5
EBEBEB

Shades & Tints Shades & Tints

#22223B

Dark
Light

#4A4E69

Dark
Light

#9A8C98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22223b;
  --color-2: #4a4e69;
  --color-3: #9a8c98;
  --color-4: #c9ada7;
  --color-5: #f2e9e4;
}

SCSS

$color-1: #22223b;
$color-2: #4a4e69;
$color-3: #9a8c98;
$color-4: #c9ada7;
$color-5: #f2e9e4;

TAILWIND

colors: {
  'brand-1': '#22223b',
  'brand-2': '#4a4e69',
  'brand-3': '#9a8c98',
  'brand-4': '#c9ada7',
  'brand-5': '#f2e9e4',
}

RGB Array

[34, 34, 59], [74, 78, 105], [154, 140, 152], [201, 173, 167], [242, 233, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #22223B, #4A4E69, #9A8C98, #C9ADA7, #F2E9E4 is ideal for: brand design, premium product pages, magazine layouts, 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: #22223b; --color-2: #4a4e69; --color-3: #9a8c98; --color-4: #c9ada7; --color-5: #f2e9e4. 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. 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