← Back to Editor

#F44D72 · #E56C65 · #C6A94B · #BEBC54 · #D39995

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 Library

Color Details Color Details

#F44D72

Peach Pink · Tomato · Coral Red

HEX
#F44D72
RGB
rgb(244, 77, 114)
HSL
hsl(347, 88%, 63%)
HSB
hsb(347, 68%, 96%)
CMYK
cmyk(0%, 68%, 53%, 4%)
Oklch
oklch(66.2% 0.203 11.7)

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

#E56C65

Peach Pink · Salmon · Coral Red

HEX
#E56C65
RGB
rgb(229, 108, 101)
HSL
hsl(3, 71%, 65%)
HSB
hsb(3, 56%, 90%)
CMYK
cmyk(0%, 53%, 56%, 10%)
Oklch
oklch(67.4% 0.152 25.3)

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

#C6A94B

Ginger · GoldenRod · Sunflower

HEX
#C6A94B
RGB
rgb(198, 169, 75)
HSL
hsl(46, 52%, 54%)
HSB
hsb(46, 62%, 78%)
CMYK
cmyk(0%, 15%, 62%, 22%)
Oklch
oklch(74.2% 0.118 92.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BEBC54

Autumn Sage · Tan · Sunflower

HEX
#BEBC54
RGB
rgb(190, 188, 84)
HSL
hsl(59, 45%, 54%)
HSB
hsb(59, 56%, 75%)
CMYK
cmyk(0%, 1%, 56%, 25%)
Oklch
oklch(77.6% 0.127 108.0)

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

#D39995

Peach Pink · Tan · Coral Red

HEX
#D39995
RGB
rgb(211, 153, 149)
HSL
hsl(4, 41%, 71%)
HSB
hsb(4, 29%, 83%)
CMYK
cmyk(0%, 27%, 29%, 17%)
Oklch
oklch(73.7% 0.070 23.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F44D72
4EF4D0

Analogous

F44EC5
F44D72
F47D4E

Triadic

F44D72
72F44E
4E72F4

Split-Comp.

F44D72
4EF47D
4EC5F4

Tetradic

F44D72
C5F44E
4EF4D0
7D4EF4

Contrast Matrix WCAG 2.1 Contrast

F44D72
E56C65
C6A94B
BEBC54
D39995
—
1.1
Fail
1.5
Fail
1.7
Fail
1.4
Fail
1.1
Fail
—
1.4
Fail
1.6
Fail
1.3
Fail
1.5
Fail
1.4
Fail
—
1.1
Fail
1.0
Fail
1.7
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
White BG
3.4AA Large
3.2AA Large
2.3Fail
2.0Fail
2.4Fail
Black BG
6.2AA
6.7AA
9.2AAA
10.5AAA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAA69
B1B067
B9B962
BDBD6D
BAB996

Deuteranopia

B5C267
B8C167
BBBD67
BDBD73
BDC296

Tritanopia

EC6260
DF6868
C57478
BE8185
D09797

Achromatopsia

838383
8F8F8F
A7A7A7
B1B1B1
AAAAAA

Shades & Tints Shades & Tints

#F44D72

Dark
Light

#E56C65

Dark
Light

#C6A94B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f44d72;
  --color-2: #e56c65;
  --color-3: #c6a94b;
  --color-4: #bebc54;
  --color-5: #d39995;
}

SCSS

$color-1: #f44d72;
$color-2: #e56c65;
$color-3: #c6a94b;
$color-4: #bebc54;
$color-5: #d39995;

TAILWIND

colors: {
  'brand-1': '#f44d72',
  'brand-2': '#e56c65',
  'brand-3': '#c6a94b',
  'brand-4': '#bebc54',
  'brand-5': '#d39995',
}

RGB Array

[244, 77, 114], [229, 108, 101], [198, 169, 75], [190, 188, 84], [211, 153, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F44D72, #E56C65, #C6A94B, #BEBC54, #D39995 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: #f44d72; --color-2: #e56c65; --color-3: #c6a94b; --color-4: #bebc54; --color-5: #d39995. 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