← Back to Editor

#F8FFE6 · #93B82E · #CDD152 · #FF7D81 · #FF2450

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F8FFE6

Willow Green · LightYellow · Mint Green

HEX
#F8FFE6
RGB
rgb(248, 255, 230)
HSL
hsl(77, 100%, 95%)
HSB
hsb(77, 10%, 100%)
CMYK
cmyk(3%, 0%, 10%, 0%)
Oklch
oklch(98.8% 0.033 119.7)

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

#93B82E

Grass Green · DarkGoldenRod · Olive Green

HEX
#93B82E
RGB
rgb(147, 184, 46)
HSL
hsl(76, 60%, 45%)
HSB
hsb(76, 75%, 72%)
CMYK
cmyk(20%, 0%, 75%, 28%)
Oklch
oklch(73.0% 0.164 123.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#CDD152

Autumn Sage · BurlyWood · Sunflower

HEX
#CDD152
RGB
rgb(205, 209, 82)
HSL
hsl(62, 58%, 57%)
HSB
hsb(62, 61%, 82%)
CMYK
cmyk(2%, 0%, 61%, 18%)
Oklch
oklch(83.4% 0.148 110.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF7D81

Peach Pink · LightCoral · Coral Red

HEX
#FF7D81
RGB
rgb(255, 125, 129)
HSL
hsl(358, 100%, 75%)
HSB
hsb(358, 51%, 100%)
CMYK
cmyk(0%, 51%, 49%, 0%)
Oklch
oklch(74.0% 0.159 19.8)

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

#FF2450

Vermilion · Crimson · Passion Red

HEX
#FF2450
RGB
rgb(255, 36, 80)
HSL
hsl(348, 100%, 57%)
HSB
hsb(348, 86%, 100%)
CMYK
cmyk(0%, 86%, 69%, 0%)
Oklch
oklch(64.4% 0.243 18.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8FFE6
EDE5FF

Analogous

FFF9E5
F8FFE6
EBFFE5

Triadic

F8FFE6
E5F8FF
FFE5F8

Split-Comp.

F8FFE6
E5EBFF
F9E5FF

Tetradic

F8FFE6
E5FFF9
EDE5FF
FFE5EB

Contrast Matrix WCAG 2.1 Contrast

F8FFE6
93B82E
CDD152
FF7D81
FF2450
—
2.2
Fail
1.6
Fail
2.4
Fail
3.6
AA Large
2.2
Fail
—
1.4
Fail
1.1
Fail
1.6
Fail
1.6
Fail
1.4
Fail
—
1.5
Fail
2.3
Fail
2.4
Fail
1.1
Fail
1.5
Fail
—
1.5
Fail
3.6
AA Large
1.6
Fail
2.3
Fail
1.5
Fail
—
White BG
1.0Fail
2.3Fail
1.6Fail
2.5Fail
3.7AA Large
Black BG
20.4AAA
9.1AAA
12.8AAA
8.5AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBEC
A3A34F
CFCF71
C7C680
A09E45

Deuteranopia

FBFAEE
A19E57
CFCE78
CED880
ADBD43

Tritanopia

F8F1F2
956A70
CD898E
F97F7F
F43D3B

Achromatopsia

FAFAFA
9D9D9D
C1C1C1
A4A4A4
6A6A6A

Shades & Tints Shades & Tints

#F8FFE6

Dark
Light

#93B82E

Dark
Light

#CDD152

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8ffe6;
  --color-2: #93b82e;
  --color-3: #cdd152;
  --color-4: #ff7d81;
  --color-5: #ff2450;
}

SCSS

$color-1: #f8ffe6;
$color-2: #93b82e;
$color-3: #cdd152;
$color-4: #ff7d81;
$color-5: #ff2450;

TAILWIND

colors: {
  'brand-1': '#f8ffe6',
  'brand-2': '#93b82e',
  'brand-3': '#cdd152',
  'brand-4': '#ff7d81',
  'brand-5': '#ff2450',
}

RGB Array

[248, 255, 230], [147, 184, 46], [205, 209, 82], [255, 125, 129], [255, 36, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8FFE6, #93B82E, #CDD152, #FF7D81, #FF2450 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: #f8ffe6; --color-2: #93b82e; --color-3: #cdd152; --color-4: #ff7d81; --color-5: #ff2450. 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