#FD572D + #AEBAB6 + #F2E9E2 + #AD9E9B + #E5232E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD572D

Vermilion · Tomato · Passion Red

HEX

#FD572D

RGB

rgb(253, 87, 45)

HSL

hsl(12, 98%, 58%)

HSB

hsb(12, 82%, 99%)

CMYK

cmyk(0%, 66%, 82%, 1%)

Oklch

oklch(67.7% 0.209 34.9)

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

#AEBAB6

Jade · Silver · Pearl Gray

HEX

#AEBAB6

RGB

rgb(174, 186, 182)

HSL

hsl(160, 8%, 71%)

HSB

hsb(160, 6%, 73%)

CMYK

cmyk(6%, 0%, 2%, 27%)

Oklch

oklch(77.8% 0.014 174.0)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#F2E9E2

Apricot · Linen · Peach Orange

HEX

#F2E9E2

RGB

rgb(242, 233, 226)

HSL

hsl(26, 38%, 92%)

HSB

hsb(26, 7%, 95%)

CMYK

cmyk(0%, 4%, 7%, 5%)

Oklch

oklch(93.9% 0.014 60.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#AD9E9B

Peach Pink · DarkGray · Coral Red

HEX

#AD9E9B

RGB

rgb(173, 158, 155)

HSL

hsl(10, 10%, 64%)

HSB

hsb(10, 10%, 68%)

CMYK

cmyk(0%, 9%, 10%, 32%)

Oklch

oklch(71.1% 0.018 31.1)

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

#E5232E

Vermilion · Crimson · Passion Red

HEX

#E5232E

RGB

rgb(229, 35, 46)

HSL

hsl(357, 79%, 52%)

HSB

hsb(357, 85%, 90%)

CMYK

cmyk(0%, 85%, 80%, 10%)

Oklch

oklch(59.3% 0.224 25.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD572D

2BD3FD

Analogous

FD2B6A

FD572D

FDBE2B

Triadic

FD572D

2BFD55

552BFD

Split-Comp.

FD572D

2BFDBE

2B6AFD

Tetradic

FD572D

6AFD2B

2BD3FD

BE2BFD

Contrast Matrix WCAG 2.1 Contrast

FD572D	AEBAB6	F2E9E2	AD9E9B	E5232E
—	1.6 Fail	2.7 Fail	1.2 Fail	1.4 Fail
1.6 Fail	—	1.7 Fail	1.3 Fail	2.3 Fail
2.7 Fail	1.7 Fail	—	2.2 Fail	3.8 AA Large
1.2 Fail	1.3 Fail	2.2 Fail	—	1.8 Fail
1.4 Fail	2.3 Fail	3.8 AA Large	1.8 Fail	—

White BG

3.2AA Large

2.0Fail

1.2Fail

2.6Fail

4.6AA

Black BG

6.6AA

10.5AAA

17.5AAA

8.1AAA

4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B437

B3B3B7

EEEEE4

A7A69C

918F2B

Deuteranopia

BFCB3A

B3B2B7

EFEFE4

A7A99C

9CAB2B

Tritanopia

F53F41

AFB8B8

F2E5E5

AC9C9C

DB2929

Achromatopsia

848484

B6B6B6

EBEBEB

A2A2A2

5E5E5E

Shades & Tints Shades & Tints

#FD572D

Dark

Light

#AEBAB6

Dark

Light

#F2E9E2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd572d;
  --color-2: #aebab6;
  --color-3: #f2e9e2;
  --color-4: #ad9e9b;
  --color-5: #e5232e;
}

SCSS

$color-1: #fd572d;
$color-2: #aebab6;
$color-3: #f2e9e2;
$color-4: #ad9e9b;
$color-5: #e5232e;

TAILWIND

colors: {
  'brand-1': '#fd572d',
  'brand-2': '#aebab6',
  'brand-3': '#f2e9e2',
  'brand-4': '#ad9e9b',
  'brand-5': '#e5232e',
}

RGB Array

[253, 87, 45], [174, 186, 182], [242, 233, 226], [173, 158, 155], [229, 35, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD572D, #AEBAB6, #F2E9E2, #AD9E9B, #E5232E is ideal for: health products, baby brands, fresh-style blogs. 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: #fd572d; --color-2: #aebab6; --color-3: #f2e9e2; --color-4: #ad9e9b; --color-5: #e5232e. 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. 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