← Back to Editor

#566965 · #948A71 · #CC9476 · #F2A176 · #FF7373

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

#566965

Mineral Blue · DimGray · Mint Ice

HEX
#566965
RGB
rgb(86, 105, 101)
HSL
hsl(167, 10%, 37%)
HSB
hsb(167, 18%, 41%)
CMYK
cmyk(18%, 0%, 4%, 59%)
Oklch
oklch(50.4% 0.024 181.1)

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

#948A71

Ginger · Gray · Sunflower

HEX
#948A71
RGB
rgb(148, 138, 113)
HSL
hsl(43, 14%, 51%)
HSB
hsb(43, 24%, 58%)
CMYK
cmyk(0%, 7%, 24%, 42%)
Oklch
oklch(63.5% 0.038 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CC9476

Apricot · DarkSalmon · Warm Sun

HEX
#CC9476
RGB
rgb(204, 148, 118)
HSL
hsl(21, 46%, 63%)
HSB
hsb(21, 42%, 80%)
CMYK
cmyk(0%, 27%, 42%, 20%)
Oklch
oklch(71.3% 0.080 49.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F2A176

Apricot · LightSalmon · Warm Sun

HEX
#F2A176
RGB
rgb(242, 161, 118)
HSL
hsl(21, 83%, 71%)
HSB
hsb(21, 51%, 95%)
CMYK
cmyk(0%, 33%, 51%, 5%)
Oklch
oklch(78.0% 0.113 48.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FF7373

Peach Pink · Salmon · Coral Red

HEX
#FF7373
RGB
rgb(255, 115, 115)
HSL
hsl(0, 100%, 73%)
HSB
hsb(0, 55%, 100%)
CMYK
cmyk(0%, 55%, 55%, 0%)
Oklch
oklch(72.4% 0.171 22.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

566965
685559

Analogous

55685A
566965
556268

Triadic

566965
645568
686455

Split-Comp.

566965
685562
685A55

Tetradic

566965
5A5568
685559
626855

Contrast Matrix WCAG 2.1 Contrast

566965
948A71
CC9476
F2A176
FF7373
—
1.7
Fail
2.2
Fail
2.8
Fail
2.2
Fail
1.7
Fail
—
1.3
Fail
1.7
Fail
1.3
Fail
2.2
Fail
1.3
Fail
—
1.3
Fail
1.0
Fail
2.8
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
1.3
Fail
1.0
Fail
1.3
Fail
—
White BG
5.8AA
3.4AA Large
2.6Fail
2.1Fail
2.6Fail
Black BG
3.6AA Large
6.1AA
8.1AAA
10.1AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E66
909077
B4B37D
CFCE80
C2C173

Deuteranopia

5D5C66
909179
B7BB7F
D4DA83
CBD573

Tritanopia

576767
947C7D
C98384
EE898A
F87373

Achromatopsia

636363
8A8A8A
A1A1A1
B4B4B4
9D9D9D

Shades & Tints Shades & Tints

#566965

Dark
Light

#948A71

Dark
Light

#CC9476

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #566965;
  --color-2: #948a71;
  --color-3: #cc9476;
  --color-4: #f2a176;
  --color-5: #ff7373;
}

SCSS

$color-1: #566965;
$color-2: #948a71;
$color-3: #cc9476;
$color-4: #f2a176;
$color-5: #ff7373;

TAILWIND

colors: {
  'brand-1': '#566965',
  'brand-2': '#948a71',
  'brand-3': '#cc9476',
  'brand-4': '#f2a176',
  'brand-5': '#ff7373',
}

RGB Array

[86, 105, 101], [148, 138, 113], [204, 148, 118], [242, 161, 118], [255, 115, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #566965, #948A71, #CC9476, #F2A176, #FF7373 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: #566965; --color-2: #948a71; --color-3: #cc9476; --color-4: #f2a176; --color-5: #ff7373. 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