← Back to Editor

#F3FED6 · #CEE5AF · #F5C549 · #FF810B · #99355B

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

#F3FED6

Willow Green · Beige · Mint Green

HEX
#F3FED6
RGB
rgb(243, 254, 214)
HSL
hsl(77, 95%, 92%)
HSB
hsb(77, 16%, 100%)
CMYK
cmyk(4%, 0%, 16%, 0%)
Oklch
oklch(97.9% 0.053 119.9)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#CEE5AF

Willow Green · Wheat · Apple Green

HEX
#CEE5AF
RGB
rgb(206, 229, 175)
HSL
hsl(86, 51%, 79%)
HSB
hsb(86, 24%, 90%)
CMYK
cmyk(10%, 0%, 24%, 10%)
Oklch
oklch(89.1% 0.076 126.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#F5C549

Ginger · SandyBrown · Sunflower

HEX
#F5C549
RGB
rgb(245, 197, 73)
HSL
hsl(43, 90%, 62%)
HSB
hsb(43, 70%, 96%)
CMYK
cmyk(0%, 20%, 70%, 4%)
Oklch
oklch(84.4% 0.147 87.1)

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

#FF810B

Tangerine · Orange · Warm Sun

HEX
#FF810B
RGB
rgb(255, 129, 11)
HSL
hsl(29, 100%, 52%)
HSB
hsb(29, 96%, 100%)
CMYK
cmyk(0%, 49%, 96%, 0%)
Oklch
oklch(73.4% 0.184 52.9)

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

#99355B

Dark Violet · Brown · Camellia

HEX
#99355B
RGB
rgb(153, 53, 91)
HSL
hsl(337, 49%, 40%)
HSB
hsb(337, 65%, 60%)
CMYK
cmyk(0%, 65%, 41%, 40%)
Oklch
oklch(48.3% 0.138 0.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3FED6
E2D7FE

Analogous

FEF6D7
F3FED6
E0FED7

Triadic

F3FED6
D7F3FE
FED7F3

Split-Comp.

F3FED6
D7E0FE
F6D7FE

Tetradic

F3FED6
D7FEF6
E2D7FE
FED7E0

Contrast Matrix WCAG 2.1 Contrast

F3FED6
CEE5AF
F5C549
FF810B
99355B
—
1.3
Fail
1.5
Fail
2.4
Fail
6.6
AA
1.3
Fail
—
1.2
Fail
1.8
Fail
5.1
AA
1.5
Fail
1.2
Fail
—
1.5
Fail
4.3
AA Large
2.4
Fail
1.8
Fail
1.5
Fail
—
2.8
Fail
6.6
AA
5.1
AA
4.3
AA Large
2.8
Fail
—
White BG
1.1Fail
1.4Fail
1.6Fail
2.5Fail
7.0AA
Black BG
20.0AAA
15.5AAA
13.0AAA
8.4AAA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8E0
D8D8BC
E0E067
C8C728
6E6D52

Deuteranopia

F7F6E2
D7D5BF
E3E76E
D0D92E
747B50

Tritanopia

F4E7E9
CFC6C9
F37F84
F93E43
944B49

Achromatopsia

F6F6F6
D8D8D8
C5C5C5
999999
575757

Shades & Tints Shades & Tints

#F3FED6

Dark
Light

#CEE5AF

Dark
Light

#F5C549

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3fed6;
  --color-2: #cee5af;
  --color-3: #f5c549;
  --color-4: #ff810b;
  --color-5: #99355b;
}

SCSS

$color-1: #f3fed6;
$color-2: #cee5af;
$color-3: #f5c549;
$color-4: #ff810b;
$color-5: #99355b;

TAILWIND

colors: {
  'brand-1': '#f3fed6',
  'brand-2': '#cee5af',
  'brand-3': '#f5c549',
  'brand-4': '#ff810b',
  'brand-5': '#99355b',
}

RGB Array

[243, 254, 214], [206, 229, 175], [245, 197, 73], [255, 129, 11], [153, 53, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F3FED6, #CEE5AF, #F5C549, #FF810B, #99355B 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: #f3fed6; --color-2: #cee5af; --color-3: #f5c549; --color-4: #ff810b; --color-5: #99355b. 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