← Back to Editor

#F0F090 · #90C090 · #48A890 · #F07878 · #D84860

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F0F090

Fresh Green · Khaki · Sunflower

HEX
#F0F090
RGB
rgb(240, 240, 144)
HSL
hsl(60, 76%, 75%)
HSB
hsb(60, 40%, 94%)
CMYK
cmyk(0%, 0%, 40%, 6%)
Oklch
oklch(93.5% 0.119 108.5)

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

#90C090

Celadon · DarkSeaGreen · Apple Green

HEX
#90C090
RGB
rgb(144, 192, 144)
HSL
hsl(120, 28%, 66%)
HSB
hsb(120, 25%, 75%)
CMYK
cmyk(25%, 0%, 25%, 25%)
Oklch
oklch(76.1% 0.085 144.7)

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

#48A890

Mineral Blue · CadetBlue · Mint Ice

HEX
#48A890
RGB
rgb(72, 168, 144)
HSL
hsl(165, 40%, 47%)
HSB
hsb(165, 57%, 66%)
CMYK
cmyk(57%, 0%, 14%, 34%)
Oklch
oklch(66.7% 0.098 174.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F07878

Peach Pink · LightCoral · Coral Red

HEX
#F07878
RGB
rgb(240, 120, 120)
HSL
hsl(0, 80%, 71%)
HSB
hsb(0, 50%, 94%)
CMYK
cmyk(0%, 50%, 50%, 6%)
Oklch
oklch(71.1% 0.148 21.5)

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

#D84860

Vermilion · Tomato · Passion Red

HEX
#D84860
RGB
rgb(216, 72, 96)
HSL
hsl(350, 65%, 56%)
HSB
hsb(350, 67%, 85%)
CMYK
cmyk(0%, 67%, 56%, 15%)
Oklch
oklch(60.8% 0.179 14.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F090
8F8FF0

Analogous

F0BF8F
F0F090
BFF08F

Triadic

F0F090
8FF0F0
F08FF0

Split-Comp.

F0F090
8FBFF0
BF8FF0

Tetradic

F0F090
8FF0BF
8F8FF0
F08FBF

Contrast Matrix WCAG 2.1 Contrast

F0F090
90C090
48A890
F07878
D84860
—
1.7
Fail
2.4
Fail
2.3
Fail
3.5
AA Large
1.7
Fail
—
1.4
Fail
1.3
Fail
2.0
Fail
2.4
Fail
1.4
Fail
—
1.1
Fail
1.5
Fail
2.3
Fail
1.3
Fail
1.1
Fail
—
1.5
Fail
3.5
AA Large
2.0
Fail
1.5
Fail
1.5
Fail
—
White BG
1.2Fail
2.1Fail
2.9Fail
2.7Fail
4.2AA Large
Black BG
17.6AAA
10.1AAA
7.3AAA
7.7AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0A7
A5A59C
727296
BCBB78
9A985A

Deuteranopia

F0F0AD
A29E9E
6C6597
C3CC78
A2AD59

Tritanopia

F0BABE
92A5A7
4D9A9B
EA7878
D15655

Achromatopsia

E5E5E5
ACACAC
898989
9C9C9C
767676

Shades & Tints Shades & Tints

#F0F090

Dark
Light

#90C090

Dark
Light

#48A890

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f090;
  --color-2: #90c090;
  --color-3: #48a890;
  --color-4: #f07878;
  --color-5: #d84860;
}

SCSS

$color-1: #f0f090;
$color-2: #90c090;
$color-3: #48a890;
$color-4: #f07878;
$color-5: #d84860;

TAILWIND

colors: {
  'brand-1': '#f0f090',
  'brand-2': '#90c090',
  'brand-3': '#48a890',
  'brand-4': '#f07878',
  'brand-5': '#d84860',
}

RGB Array

[240, 240, 144], [144, 192, 144], [72, 168, 144], [240, 120, 120], [216, 72, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F090, #90C090, #48A890, #F07878, #D84860 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: #f0f090; --color-2: #90c090; --color-3: #48a890; --color-4: #f07878; --color-5: #d84860. 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 general-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