← Back to Editor

#F35750 · #FFEAA6 · #FFF5D6 · #D1D5CC · #687D98

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F35750

Peach Pink · Tomato · Coral Red

HEX
#F35750
RGB
rgb(243, 87, 80)
HSL
hsl(3, 87%, 63%)
HSB
hsb(3, 67%, 95%)
CMYK
cmyk(0%, 64%, 67%, 5%)
Oklch
oklch(66.5% 0.193 26.3)

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

#FFEAA6

Goose Yellow · Wheat · Lemon Cream

HEX
#FFEAA6
RGB
rgb(255, 234, 166)
HSL
hsl(46, 100%, 83%)
HSB
hsb(46, 35%, 100%)
CMYK
cmyk(0%, 8%, 35%, 0%)
Oklch
oklch(93.8% 0.089 93.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FFF5D6

Goose Yellow · Beige · Lemon Cream

HEX
#FFF5D6
RGB
rgb(255, 245, 214)
HSL
hsl(45, 100%, 92%)
HSB
hsb(45, 16%, 100%)
CMYK
cmyk(0%, 4%, 16%, 0%)
Oklch
oklch(97.0% 0.042 92.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D1D5CC

Willow Green · LightGray · Mint Green

HEX
#D1D5CC
RGB
rgb(209, 213, 204)
HSL
hsl(87, 10%, 82%)
HSB
hsb(87, 4%, 84%)
CMYK
cmyk(2%, 0%, 4%, 16%)
Oklch
oklch(86.7% 0.013 126.4)

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

#687D98

Indigo · SlateGray · Navy Blue

HEX
#687D98
RGB
rgb(104, 125, 152)
HSL
hsl(214, 19%, 50%)
HSB
hsb(214, 32%, 60%)
CMYK
cmyk(32%, 18%, 0%, 40%)
Oklch
oklch(58.3% 0.048 254.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F35750
4FEBF3

Analogous

F34F98
F35750
F3A94F

Triadic

F35750
4FF357
574FF3

Split-Comp.

F35750
4FF3A9
4F98F3

Tetradic

F35750
98F34F
4FEBF3
A94FF3

Contrast Matrix WCAG 2.1 Contrast

F35750
FFEAA6
FFF5D6
D1D5CC
687D98
—
2.8
Fail
3.1
AA Large
2.2
Fail
1.3
Fail
2.8
Fail
—
1.1
Fail
1.2
Fail
3.5
AA Large
3.1
AA Large
1.1
Fail
—
1.4
Fail
3.9
AA Large
2.2
Fail
1.2
Fail
1.4
Fail
—
2.8
Fail
1.3
Fail
3.5
AA Large
3.9
AA Large
2.8
Fail
—
White BG
3.3AA Large
1.2Fail
1.1Fail
1.5Fail
4.2AA Large
Black BG
6.3AA
17.6AAA
19.3AAA
14.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE52
F6F6B6
FBFBDE
D3D3CE
717191

Deuteranopia

B9C452
F7F9BA
FBFCDF
D3D2CF
706E90

Tritanopia

EB5353
FEC3C6
FFE3E5
D1D0D0
698C8B

Achromatopsia

858585
E9E9E9
F4F4F4
D3D3D3
7A7A7A

Shades & Tints Shades & Tints

#F35750

Dark
Light

#FFEAA6

Dark
Light

#FFF5D6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f35750;
  --color-2: #ffeaa6;
  --color-3: #fff5d6;
  --color-4: #d1d5cc;
  --color-5: #687d98;
}

SCSS

$color-1: #f35750;
$color-2: #ffeaa6;
$color-3: #fff5d6;
$color-4: #d1d5cc;
$color-5: #687d98;

TAILWIND

colors: {
  'brand-1': '#f35750',
  'brand-2': '#ffeaa6',
  'brand-3': '#fff5d6',
  'brand-4': '#d1d5cc',
  'brand-5': '#687d98',
}

RGB Array

[243, 87, 80], [255, 234, 166], [255, 245, 214], [209, 213, 204], [104, 125, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F35750, #FFEAA6, #FFF5D6, #D1D5CC, #687D98 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #f35750; --color-2: #ffeaa6; --color-3: #fff5d6; --color-4: #d1d5cc; --color-5: #687d98. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 general-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