← Back to Editor

#F5F7B5 · #EF6960 · #F74043 · #5B3242 · #2C212C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5F7B5

Fresh Green · Wheat · Lemon Cream

HEX
#F5F7B5
RGB
rgb(245, 247, 181)
HSL
hsl(62, 80%, 84%)
HSB
hsb(62, 27%, 97%)
CMYK
cmyk(1%, 0%, 27%, 3%)
Oklch
oklch(95.9% 0.084 109.3)

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

#EF6960

Peach Pink · Tomato · Coral Red

HEX
#EF6960
RGB
rgb(239, 105, 96)
HSL
hsl(4, 82%, 66%)
HSB
hsb(4, 60%, 94%)
CMYK
cmyk(0%, 56%, 60%, 6%)
Oklch
oklch(68.4% 0.167 26.3)

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

#F74043

Peach Pink · Tomato · Coral Red

HEX
#F74043
RGB
rgb(247, 64, 67)
HSL
hsl(359, 92%, 61%)
HSB
hsb(359, 74%, 97%)
CMYK
cmyk(0%, 74%, 73%, 3%)
Oklch
oklch(64.7% 0.219 25.1)

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

#5B3242

Dark Violet · DarkSlateGray · Camellia

HEX
#5B3242
RGB
rgb(91, 50, 66)
HSL
hsl(337, 29%, 28%)
HSB
hsb(337, 45%, 36%)
CMYK
cmyk(0%, 45%, 27%, 64%)
Oklch
oklch(37.4% 0.063 355.7)

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

#2C212C

Rose Purple · DarkSlateGray · Dark Purple

HEX
#2C212C
RGB
rgb(44, 33, 44)
HSL
hsl(300, 14%, 15%)
HSB
hsb(300, 25%, 17%)
CMYK
cmyk(0%, 25%, 0%, 83%)
Oklch
oklch(26.5% 0.026 326.3)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F7B5
B8B6F7

Analogous

F7D8B6
F5F7B5
D4F7B6

Triadic

F5F7B5
B6F5F7
F7B6F5

Split-Comp.

F5F7B5
B6D4F7
D8B6F7

Tetradic

F5F7B5
B6F7D8
B8B6F7
F7B6D4

Contrast Matrix WCAG 2.1 Contrast

F5F7B5
EF6960
F74043
5B3242
2C212C
—
2.7
Fail
3.3
AA Large
9.5
AAA
13.9
AAA
2.7
Fail
—
1.2
Fail
3.5
AA Large
5.0
AA
3.3
AA Large
1.2
Fail
—
2.9
Fail
4.2
AA Large
9.5
AAA
3.5
AA Large
2.9
Fail
—
1.5
Fail
13.9
AAA
5.0
AA
4.2
AA Large
1.5
Fail
—
White BG
1.1Fail
3.1AA Large
3.6AA Large
10.6AAA
15.4AAA
Black BG
18.9AAA
6.9AA
5.8AA
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6C5
B5B462
A8A642
49493E
272729

Deuteranopia

F6F6C9
BDC763
B2C042
4C4F3D
282929

Tritanopia

F5D2D4
E86464
EE4242
593B3A
2B2727

Achromatopsia

EFEFEF
909090
777777
404040
262626

Shades & Tints Shades & Tints

#F5F7B5

Dark
Light

#EF6960

Dark
Light

#F74043

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f7b5;
  --color-2: #ef6960;
  --color-3: #f74043;
  --color-4: #5b3242;
  --color-5: #2c212c;
}

SCSS

$color-1: #f5f7b5;
$color-2: #ef6960;
$color-3: #f74043;
$color-4: #5b3242;
$color-5: #2c212c;

TAILWIND

colors: {
  'brand-1': '#f5f7b5',
  'brand-2': '#ef6960',
  'brand-3': '#f74043',
  'brand-4': '#5b3242',
  'brand-5': '#2c212c',
}

RGB Array

[245, 247, 181], [239, 105, 96], [247, 64, 67], [91, 50, 66], [44, 33, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F7B5, #EF6960, #F74043, #5B3242, #2C212C is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5f7b5; --color-2: #ef6960; --color-3: #f74043; --color-4: #5b3242; --color-5: #2c212c. 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 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