← Back to Editor

#F0F6B9 · #E71515 · #585C45 · #067661 · #17CEAC

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

#F0F6B9

Fresh Green · Wheat · Lemon Cream

HEX
#F0F6B9
RGB
rgb(240, 246, 185)
HSL
hsl(66, 77%, 85%)
HSB
hsb(66, 25%, 96%)
CMYK
cmyk(2%, 0%, 25%, 4%)
Oklch
oklch(95.4% 0.079 112.5)

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

#E71515

Vermilion · Red · Passion Red

HEX
#E71515
RGB
rgb(231, 21, 21)
HSL
hsl(0, 83%, 49%)
HSB
hsb(0, 91%, 91%)
CMYK
cmyk(0%, 91%, 91%, 9%)
Oklch
oklch(58.8% 0.233 28.5)

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

#585C45

Grass Green · DarkOliveGreen · Forest Green

HEX
#585C45
RGB
rgb(88, 92, 69)
HSL
hsl(70, 14%, 32%)
HSB
hsb(70, 25%, 36%)
CMYK
cmyk(4%, 0%, 25%, 64%)
Oklch
oklch(46.4% 0.036 115.8)

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

#067661

Mineral Blue · Teal · Peacock Green

HEX
#067661
RGB
rgb(6, 118, 97)
HSL
hsl(169, 90%, 24%)
HSB
hsb(169, 95%, 46%)
CMYK
cmyk(95%, 0%, 18%, 54%)
Oklch
oklch(50.6% 0.094 174.3)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#17CEAC

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#17CEAC
RGB
rgb(23, 206, 172)
HSL
hsl(169, 80%, 45%)
HSB
hsb(169, 89%, 81%)
CMYK
cmyk(89%, 0%, 17%, 19%)
Oklch
oklch(76.1% 0.141 174.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F6B9
C1BBF6

Analogous

F6DFBB
F0F6B9
D3F6BB

Triadic

F0F6B9
BBF0F6
F6BBF0

Split-Comp.

F0F6B9
BBD3F6
DFBBF6

Tetradic

F0F6B9
BBF6DF
C1BBF6
F6BBD3

Contrast Matrix WCAG 2.1 Contrast

F0F6B9
E71515
585C45
067661
17CEAC
—
4.1
AA Large
6.1
AA
4.9
AA
1.8
Fail
4.1
AA Large
—
1.5
Fail
1.2
Fail
2.3
Fail
6.1
AA
1.5
Fail
—
1.2
Fail
3.5
AA Large
4.9
AA
1.2
Fail
1.2
Fail
—
2.8
Fail
1.8
Fail
2.3
Fail
3.5
AA Large
2.8
Fail
—
White BG
1.1Fail
4.7AA
6.9AA
5.6AA
2.0Fail
Black BG
18.6AAA
4.5AA
3.0AA Large
3.8AA Large
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3C8
8C8A15
5A5A4B
363866
6668B4

Deuteranopia

F2F2CB
98A815
5A594C
302867
5C4EB6

Tritanopia

F0D3D6
DD1515
584F50
0C6A6B
20BBBC

Achromatopsia

EDEDED
545454
585858
525252
939393

Shades & Tints Shades & Tints

#F0F6B9

Dark
Light

#E71515

Dark
Light

#585C45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f6b9;
  --color-2: #e71515;
  --color-3: #585c45;
  --color-4: #067661;
  --color-5: #17ceac;
}

SCSS

$color-1: #f0f6b9;
$color-2: #e71515;
$color-3: #585c45;
$color-4: #067661;
$color-5: #17ceac;

TAILWIND

colors: {
  'brand-1': '#f0f6b9',
  'brand-2': '#e71515',
  'brand-3': '#585c45',
  'brand-4': '#067661',
  'brand-5': '#17ceac',
}

RGB Array

[240, 246, 185], [231, 21, 21], [88, 92, 69], [6, 118, 97], [23, 206, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F6B9, #E71515, #585C45, #067661, #17CEAC 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: #f0f6b9; --color-2: #e71515; --color-3: #585c45; --color-4: #067661; --color-5: #17ceac. 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 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