← Back to Editor

#FF003C · #CF234B · #AD475F · #996873 · #857578

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

#FF003C

Vermilion · Crimson · Passion Red

HEX
#FF003C
RGB
rgb(255, 0, 60)
HSL
hsl(346, 100%, 50%)
HSB
hsb(346, 100%, 100%)
CMYK
cmyk(0%, 100%, 76%, 0%)
Oklch
oklch(63.2% 0.254 21.8)

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

#CF234B

Vermilion · Crimson · Passion Red

HEX
#CF234B
RGB
rgb(207, 35, 75)
HSL
hsl(346, 71%, 47%)
HSB
hsb(346, 83%, 81%)
CMYK
cmyk(0%, 83%, 64%, 19%)
Oklch
oklch(55.7% 0.203 15.2)

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

#AD475F

Crimson · Sienna · Passion Red

HEX
#AD475F
RGB
rgb(173, 71, 95)
HSL
hsl(346, 42%, 48%)
HSB
hsb(346, 59%, 68%)
CMYK
cmyk(0%, 59%, 45%, 32%)
Oklch
oklch(53.9% 0.135 8.2)

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

#996873

Crimson · Gray · Passion Red

HEX
#996873
RGB
rgb(153, 104, 115)
HSL
hsl(347, 19%, 50%)
HSB
hsb(347, 32%, 60%)
CMYK
cmyk(0%, 32%, 25%, 40%)
Oklch
oklch(57.2% 0.065 4.6)

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

#857578

Ink Gray · Gray · Warm Gray

HEX
#857578
RGB
rgb(133, 117, 120)
HSL
hsl(349, 6%, 49%)
HSB
hsb(349, 12%, 52%)
CMYK
cmyk(0%, 12%, 10%, 48%)
Oklch
oklch(57.8% 0.020 5.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF003C
00FFC3

Analogous

FF00BB
FF003C
FF4400

Triadic

FF003C
3CFF00
003CFF

Split-Comp.

FF003C
00FF44
00BBFF

Tetradic

FF003C
BBFF00
00FFC3
4400FF

Contrast Matrix WCAG 2.1 Contrast

FF003C
CF234B
AD475F
996873
857578
—
1.3
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.0
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
White BG
3.9AA Large
5.3AA
5.5AA
4.6AA
4.4AA Large
Black BG
5.3AA
4.0AA Large
3.8AA Large
4.6AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

918E2D
858341
818059
848370
7E7E77

Deuteranopia

9FB32A
8F9B3F
878E58
878A70
7F8077

Tritanopia

F22220
C63A38
A85554
976E6E
847777

Achromatopsia

535353
5B5B5B
686868
787878
7A7A7A

Shades & Tints Shades & Tints

#FF003C

Dark
Light

#CF234B

Dark
Light

#AD475F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff003c;
  --color-2: #cf234b;
  --color-3: #ad475f;
  --color-4: #996873;
  --color-5: #857578;
}

SCSS

$color-1: #ff003c;
$color-2: #cf234b;
$color-3: #ad475f;
$color-4: #996873;
$color-5: #857578;

TAILWIND

colors: {
  'brand-1': '#ff003c',
  'brand-2': '#cf234b',
  'brand-3': '#ad475f',
  'brand-4': '#996873',
  'brand-5': '#857578',
}

RGB Array

[255, 0, 60], [207, 35, 75], [173, 71, 95], [153, 104, 115], [133, 117, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF003C, #CF234B, #AD475F, #996873, #857578 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: #ff003c; --color-2: #cf234b; --color-3: #ad475f; --color-4: #996873; --color-5: #857578. 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