← Back to Editor

#A1A1A1 · #407382 · #118796 · #8F948D · #FF5E79

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 PostIllustration

Color Details Color Details

#A1A1A1

Ash · DarkGray · Silver Sand

HEX
#A1A1A1
RGB
rgb(161, 161, 161)
HSL
hsl(0, 0%, 63%)
HSB
hsb(0, 0%, 63%)
CMYK
cmyk(0%, 0%, 0%, 37%)
Oklch
oklch(70.9% 0.000 89.9)

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

#407382

Slate Blue · DimGray · Mint Ice

HEX
#407382
RGB
rgb(64, 115, 130)
HSL
hsl(194, 34%, 38%)
HSB
hsb(194, 51%, 51%)
CMYK
cmyk(51%, 12%, 0%, 49%)
Oklch
oklch(52.6% 0.060 218.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#118796

Lake Blue · Teal · Mint Ice

HEX
#118796
RGB
rgb(17, 135, 150)
HSL
hsl(187, 80%, 33%)
HSB
hsb(187, 89%, 59%)
CMYK
cmyk(89%, 10%, 0%, 41%)
Oklch
oklch(57.2% 0.095 208.9)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8F948D

Ash · Gray · Silver Sand

HEX
#8F948D
RGB
rgb(143, 148, 141)
HSL
hsl(103, 3%, 57%)
HSB
hsb(103, 5%, 58%)
CMYK
cmyk(3%, 0%, 5%, 42%)
Oklch
oklch(66.0% 0.012 136.6)

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

#FF5E79

Peach Pink · Salmon · Coral Red

HEX
#FF5E79
RGB
rgb(255, 94, 121)
HSL
hsl(350, 100%, 68%)
HSB
hsb(350, 63%, 100%)
CMYK
cmyk(0%, 63%, 53%, 0%)
Oklch
oklch(69.9% 0.195 13.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1A1A1
A1A1A1

Analogous

A1A1A1
A1A1A1
A1A1A1

Triadic

A1A1A1
A1A1A1
A1A1A1

Split-Comp.

A1A1A1
A1A1A1
A1A1A1

Tetradic

A1A1A1
A1A1A1
A1A1A1
A1A1A1

Contrast Matrix WCAG 2.1 Contrast

A1A1A1
407382
118796
8F948D
FF5E79
—
2.0
Fail
1.6
Fail
1.2
Fail
1.1
Fail
2.0
Fail
—
1.2
Fail
1.7
Fail
1.8
Fail
1.6
Fail
1.2
Fail
—
1.4
Fail
1.4
Fail
1.2
Fail
1.7
Fail
1.4
Fail
—
1.1
Fail
1.1
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
White BG
2.6Fail
5.3AA
4.3AA Large
3.1AA Large
2.9Fail
Black BG
8.1AAA
4.0AA Large
4.9AA
6.8AA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A1A1
56577E
444592
91918F
B9B872

Deuteranopia

A1A1A1
534F7E
3D3492
91918F
C3CF71

Tritanopia

A1A1A1
437C7B
17908F
8F9090
F76D6C

Achromatopsia

A1A1A1
656565
656565
929292
919191

Shades & Tints Shades & Tints

#A1A1A1

Dark
Light

#407382

Dark
Light

#118796

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1a1a1;
  --color-2: #407382;
  --color-3: #118796;
  --color-4: #8f948d;
  --color-5: #ff5e79;
}

SCSS

$color-1: #a1a1a1;
$color-2: #407382;
$color-3: #118796;
$color-4: #8f948d;
$color-5: #ff5e79;

TAILWIND

colors: {
  'brand-1': '#a1a1a1',
  'brand-2': '#407382',
  'brand-3': '#118796',
  'brand-4': '#8f948d',
  'brand-5': '#ff5e79',
}

RGB Array

[161, 161, 161], [64, 115, 130], [17, 135, 150], [143, 148, 141], [255, 94, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #A1A1A1, #407382, #118796, #8F948D, #FF5E79 is ideal for: corporate websites, product showcases, portfolios. 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: #a1a1a1; --color-2: #407382; --color-3: #118796; --color-4: #8f948d; --color-5: #ff5e79. 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. 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