← Back to Editor

#F75F6F · #D5685A · #CC987A · #BCB482 · #D3C68A

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F75F6F

Peach Pink · Salmon · Coral Red

HEX
#F75F6F
RGB
rgb(247, 95, 111)
HSL
hsl(354, 90%, 67%)
HSB
hsb(354, 62%, 97%)
CMYK
cmyk(0%, 62%, 55%, 3%)
Oklch
oklch(68.6% 0.186 17.3)

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

#D5685A

Crimson · Tomato · Passion Red

HEX
#D5685A
RGB
rgb(213, 104, 90)
HSL
hsl(7, 59%, 59%)
HSB
hsb(7, 58%, 84%)
CMYK
cmyk(0%, 51%, 58%, 16%)
Oklch
oklch(64.4% 0.140 29.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#CC987A

Apricot · DarkSalmon · Warm Sun

HEX
#CC987A
RGB
rgb(204, 152, 122)
HSL
hsl(22, 45%, 64%)
HSB
hsb(22, 40%, 80%)
CMYK
cmyk(0%, 25%, 40%, 20%)
Oklch
oklch(72.2% 0.075 51.1)

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

#BCB482

Fresh Green · Tan · Sunflower

HEX
#BCB482
RGB
rgb(188, 180, 130)
HSL
hsl(52, 30%, 62%)
HSB
hsb(52, 31%, 74%)
CMYK
cmyk(0%, 4%, 31%, 26%)
Oklch
oklch(76.4% 0.068 100.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D3C68A

Ginger · BurlyWood · Sunflower

HEX
#D3C68A
RGB
rgb(211, 198, 138)
HSL
hsl(49, 45%, 68%)
HSB
hsb(49, 35%, 83%)
CMYK
cmyk(0%, 6%, 35%, 17%)
Oklch
oklch(82.3% 0.080 97.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F75F6F
5FF7E7

Analogous

F75FBA
F75F6F
F79C5F

Triadic

F75F6F
6EF75F
5F6EF7

Split-Comp.

F75F6F
5FF79C
5FBAF7

Tetradic

F75F6F
BAF75F
5FF7E7
9C5FF7

Contrast Matrix WCAG 2.1 Contrast

F75F6F
D5685A
CC987A
BCB482
D3C68A
—
1.1
Fail
1.2
Fail
1.5
Fail
1.8
Fail
1.1
Fail
—
1.4
Fail
1.7
Fail
2.1
Fail
1.2
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.5
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
White BG
3.1AA Large
3.5AA Large
2.5Fail
2.1Fail
1.7Fail
Black BG
6.8AA
6.0AA
8.3AAA
10.0AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B46B
A6A55D
B5B581
B9B88E
CDCD99

Deuteranopia

BEC96A
ACB45E
B9BC83
B9BA91
CECF9C

Tritanopia

EF6867
D06061
C98788
BC989A
D2A4A7

Achromatopsia

8E8E8E
878787
A4A4A4
B1B1B1
C3C3C3

Shades & Tints Shades & Tints

#F75F6F

Dark
Light

#D5685A

Dark
Light

#CC987A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f75f6f;
  --color-2: #d5685a;
  --color-3: #cc987a;
  --color-4: #bcb482;
  --color-5: #d3c68a;
}

SCSS

$color-1: #f75f6f;
$color-2: #d5685a;
$color-3: #cc987a;
$color-4: #bcb482;
$color-5: #d3c68a;

TAILWIND

colors: {
  'brand-1': '#f75f6f',
  'brand-2': '#d5685a',
  'brand-3': '#cc987a',
  'brand-4': '#bcb482',
  'brand-5': '#d3c68a',
}

RGB Array

[247, 95, 111], [213, 104, 90], [204, 152, 122], [188, 180, 130], [211, 198, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F75F6F, #D5685A, #CC987A, #BCB482, #D3C68A 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: #f75f6f; --color-2: #d5685a; --color-3: #cc987a; --color-4: #bcb482; --color-5: #d3c68a. 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