← Back to Editor

#FD7E82 · #E7BFB5 · #FFFFFF · #C5181D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FD7E82

Peach Pink · LightCoral · Coral Red

HEX
#FD7E82
RGB
rgb(253, 126, 130)
HSL
hsl(358, 97%, 74%)
HSB
hsb(358, 50%, 99%)
CMYK
cmyk(0%, 50%, 49%, 1%)
Oklch
oklch(73.9% 0.155 19.6)

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

#E7BFB5

Peach Pink · LightPink · Cherry Blossom

HEX
#E7BFB5
RGB
rgb(231, 191, 181)
HSL
hsl(12, 51%, 81%)
HSB
hsb(12, 22%, 91%)
CMYK
cmyk(0%, 17%, 22%, 9%)
Oklch
oklch(83.7% 0.048 34.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#C5181D

Vermilion · FireBrick · Passion Red

HEX
#C5181D
RGB
rgb(197, 24, 29)
HSL
hsl(358, 78%, 43%)
HSB
hsb(358, 88%, 77%)
CMYK
cmyk(0%, 88%, 85%, 23%)
Oklch
oklch(52.6% 0.203 27.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD7E82
7CFDF9

Analogous

FD7CC1
FD7E82
FDB87C

Triadic

FD7E82
81FD7C
7C81FD

Split-Comp.

FD7E82
7CFDB8
7CC1FD

Tetradic

FD7E82
C1FD7C
7CFDF9
B87CFD

Contrast Matrix WCAG 2.1 Contrast

FD7E82
E7BFB5
FFFFFF
C5181D
—
1.5
Fail
2.5
Fail
2.4
Fail
1.5
Fail
—
1.7
Fail
3.6
AA Large
2.5
Fail
1.7
Fail
—
6.0
AA
2.4
Fail
3.6
AA Large
6.0
AA
—
White BG
2.5Fail
1.7Fail
1.0Fail
6.0AA
Black BG
8.5AAA
12.5AAA
21.0AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C581
D6D5B7
FFFFFF
7A791C

Deuteranopia

CDD781
D8DBB8
FFFFFF
84911B

Tritanopia

F78080
E5B9BA
FFFFFF
BC1B1B

Achromatopsia

A4A4A4
CACACA
FFFFFF
4C4C4C

Shades & Tints Shades & Tints

#FD7E82

Dark
Light

#E7BFB5

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd7e82;
  --color-2: #e7bfb5;
  --color-3: #ffffff;
  --color-4: #c5181d;
}

SCSS

$color-1: #fd7e82;
$color-2: #e7bfb5;
$color-3: #ffffff;
$color-4: #c5181d;

TAILWIND

colors: {
  'brand-1': '#fd7e82',
  'brand-2': '#e7bfb5',
  'brand-3': '#ffffff',
  'brand-4': '#c5181d',
}

RGB Array

[253, 126, 130], [231, 191, 181], [255, 255, 255], [197, 24, 29]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #FD7E82, #E7BFB5, #FFFFFF, #C5181D is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fd7e82; --color-2: #e7bfb5; --color-3: #ffffff; --color-4: #c5181d. 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 4-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