← Back to Editor

#D95350 · #A18A9C · #CC3F45 · #87707A · #F53905

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

#D95350

Vermilion · Tomato · Passion Red

HEX
#D95350
RGB
rgb(217, 83, 80)
HSL
hsl(1, 64%, 58%)
HSB
hsb(1, 63%, 85%)
CMYK
cmyk(0%, 62%, 63%, 15%)
Oklch
oklch(61.9% 0.169 24.6)

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

#A18A9C

Rose Purple · DarkGray · Violet

HEX
#A18A9C
RGB
rgb(161, 138, 156)
HSL
hsl(313, 11%, 59%)
HSB
hsb(313, 14%, 63%)
CMYK
cmyk(0%, 14%, 3%, 37%)
Oklch
oklch(66.0% 0.038 333.5)

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

#CC3F45

Crimson · Crimson · Passion Red

HEX
#CC3F45
RGB
rgb(204, 63, 69)
HSL
hsl(357, 58%, 52%)
HSB
hsb(357, 69%, 80%)
CMYK
cmyk(0%, 69%, 66%, 20%)
Oklch
oklch(57.4% 0.177 22.5)

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

#87707A

Dark Violet · Gray · Warm Gray

HEX
#87707A
RGB
rgb(135, 112, 122)
HSL
hsl(334, 9%, 48%)
HSB
hsb(334, 17%, 53%)
CMYK
cmyk(0%, 17%, 10%, 47%)
Oklch
oklch(57.0% 0.032 350.2)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#F53905

Vermilion · OrangeRed · Passion Red

HEX
#F53905
RGB
rgb(245, 57, 5)
HSL
hsl(13, 96%, 49%)
HSB
hsb(13, 98%, 96%)
CMYK
cmyk(0%, 77%, 98%, 4%)
Oklch
oklch(63.3% 0.228 33.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D95350
4FD6D8

Analogous

D84F92
D95350
D8964F

Triadic

D95350
4FD852
524FD8

Split-Comp.

D95350
4FD896
4F92D8

Tetradic

D95350
92D84F
4FD6D8
964FD8

Contrast Matrix WCAG 2.1 Contrast

D95350
A18A9C
CC3F45
87707A
F53905
—
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.3
Fail
—
1.5
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.1
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.2
Fail
—
White BG
4.0AA Large
3.2AA Large
4.8AA
4.5AA
3.8AA Large
Black BG
5.3AA
6.6AA
4.4AA Large
4.6AA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9E51
979798
8F8E44
7D7D78
A4A212

Deuteranopia

A7B151
989A97
97A243
7E8077
AFBD15

Tritanopia

D25151
A09493
C54242
867675
EC1C1E

Achromatopsia

7B7B7B
939393
6A6A6A
787878
6B6B6B

Shades & Tints Shades & Tints

#D95350

Dark
Light

#A18A9C

Dark
Light

#CC3F45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d95350;
  --color-2: #a18a9c;
  --color-3: #cc3f45;
  --color-4: #87707a;
  --color-5: #f53905;
}

SCSS

$color-1: #d95350;
$color-2: #a18a9c;
$color-3: #cc3f45;
$color-4: #87707a;
$color-5: #f53905;

TAILWIND

colors: {
  'brand-1': '#d95350',
  'brand-2': '#a18a9c',
  'brand-3': '#cc3f45',
  'brand-4': '#87707a',
  'brand-5': '#f53905',
}

RGB Array

[217, 83, 80], [161, 138, 156], [204, 63, 69], [135, 112, 122], [245, 57, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D95350, #A18A9C, #CC3F45, #87707A, #F53905 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: #d95350; --color-2: #a18a9c; --color-3: #cc3f45; --color-4: #87707a; --color-5: #f53905. 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