← Back to Editor

#F9C66E · #D68C58 · #99586D · #501239 · #B300FF

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 PostIllustrationData Visualization

Color Details Color Details

#F9C66E

Ginger · SandyBrown · Warm Sun

HEX
#F9C66E
RGB
rgb(249, 198, 110)
HSL
hsl(38, 92%, 70%)
HSB
hsb(38, 56%, 98%)
CMYK
cmyk(0%, 20%, 56%, 2%)
Oklch
oklch(85.4% 0.121 79.6)

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

#D68C58

Tangerine · SandyBrown · Warm Sun

HEX
#D68C58
RGB
rgb(214, 140, 88)
HSL
hsl(25, 61%, 59%)
HSB
hsb(25, 59%, 84%)
CMYK
cmyk(0%, 35%, 59%, 16%)
Oklch
oklch(70.5% 0.113 54.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#99586D

Dark Violet · Gray · Camellia

HEX
#99586D
RGB
rgb(153, 88, 109)
HSL
hsl(341, 27%, 47%)
HSB
hsb(341, 42%, 60%)
CMYK
cmyk(0%, 42%, 29%, 40%)
Oklch
oklch(54.1% 0.089 359.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#501239

Rose Purple · DarkSlateGray · Raspberry

HEX
#501239
RGB
rgb(80, 18, 57)
HSL
hsl(322, 63%, 19%)
HSB
hsb(322, 78%, 31%)
CMYK
cmyk(0%, 78%, 29%, 69%)
Oklch
oklch(30.3% 0.102 346.3)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#B300FF

Royal Purple · DarkViolet · Violet

HEX
#B300FF
RGB
rgb(179, 0, 255)
HSL
hsl(282, 100%, 50%)
HSB
hsb(282, 100%, 100%)
CMYK
cmyk(30%, 100%, 0%, 0%)
Oklch
oklch(59.3% 0.301 309.6)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9C66E
6CA0F9

Analogous

F97F6C
F9C66E
E6F96C

Triadic

F9C66E
6CF9C5
C56CF9

Split-Comp.

F9C66E
6CE6F9
7F6CF9

Tetradic

F9C66E
6CF97F
6CA0F9
F96CE6

Contrast Matrix WCAG 2.1 Contrast

F9C66E
D68C58
99586D
501239
B300FF
—
1.7
Fail
3.4
AA Large
9.0
AAA
3.1
AA Large
1.7
Fail
—
2.0
Fail
5.2
AA
1.8
Fail
3.4
AA Large
2.0
Fail
—
2.7
Fail
1.1
Fail
9.0
AAA
5.2
AA
2.7
Fail
—
2.9
Fail
3.1
AA Large
1.8
Fail
1.1
Fail
2.9
Fail
—
White BG
1.6Fail
2.7Fail
5.3AA
14.1AAA
4.8AA
Black BG
13.3AAA
7.8AAA
4.0AA Large
1.5Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E283
B6B565
7D7C68
353530
6564C1

Deuteranopia

E6EA88
BAC068
818667
393D2D
707DB3

Tritanopia

F69498
D26F71
966463
4D2826
AA9186

Achromatopsia

CBCBCB
9C9C9C
6E6E6E
292929
535353

Shades & Tints Shades & Tints

#F9C66E

Dark
Light

#D68C58

Dark
Light

#99586D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9c66e;
  --color-2: #d68c58;
  --color-3: #99586d;
  --color-4: #501239;
  --color-5: #b300ff;
}

SCSS

$color-1: #f9c66e;
$color-2: #d68c58;
$color-3: #99586d;
$color-4: #501239;
$color-5: #b300ff;

TAILWIND

colors: {
  'brand-1': '#f9c66e',
  'brand-2': '#d68c58',
  'brand-3': '#99586d',
  'brand-4': '#501239',
  'brand-5': '#b300ff',
}

RGB Array

[249, 198, 110], [214, 140, 88], [153, 88, 109], [80, 18, 57], [179, 0, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F9C66E, #D68C58, #99586D, #501239, #B300FF is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9c66e; --color-2: #d68c58; --color-3: #99586d; --color-4: #501239; --color-5: #b300ff. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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