← Back to Editor

#CF4731 · #DC5E46 · #C96A51 · #D6F5D4 · #71AD8E

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

#CF4731

Vermilion · Chocolate · Passion Red

HEX
#CF4731
RGB
rgb(207, 71, 49)
HSL
hsl(8, 62%, 50%)
HSB
hsb(8, 76%, 81%)
CMYK
cmyk(0%, 66%, 76%, 19%)
Oklch
oklch(58.5% 0.176 31.8)

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

#DC5E46

Vermilion · Tomato · Passion Red

HEX
#DC5E46
RGB
rgb(220, 94, 70)
HSL
hsl(10, 68%, 57%)
HSB
hsb(10, 68%, 86%)
CMYK
cmyk(0%, 57%, 68%, 14%)
Oklch
oklch(63.7% 0.163 32.6)

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

#C96A51

Crimson · Chocolate · Passion Red

HEX
#C96A51
RGB
rgb(201, 106, 81)
HSL
hsl(13, 53%, 55%)
HSB
hsb(13, 60%, 79%)
CMYK
cmyk(0%, 47%, 60%, 21%)
Oklch
oklch(62.9% 0.127 35.7)

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

#D6F5D4

Emerald · Beige · Mint Green

HEX
#D6F5D4
RGB
rgb(214, 245, 212)
HSL
hsl(116, 62%, 90%)
HSB
hsb(116, 13%, 96%)
CMYK
cmyk(13%, 0%, 13%, 4%)
Oklch
oklch(93.9% 0.055 143.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#71AD8E

Celadon · CadetBlue · Olive Green

HEX
#71AD8E
RGB
rgb(113, 173, 142)
HSL
hsl(149, 27%, 56%)
HSB
hsb(149, 35%, 68%)
CMYK
cmyk(35%, 0%, 18%, 32%)
Oklch
oklch(69.8% 0.078 161.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF4731
30B9CF

Analogous

CF306A
CF4731
CF9530

Triadic

CF4731
30CF46
4630CF

Split-Comp.

CF4731
30CF95
306ACF

Tetradic

CF4731
6ACF30
30B9CF
9530CF

Contrast Matrix WCAG 2.1 Contrast

CF4731
DC5E46
C96A51
D6F5D4
71AD8E
—
1.2
Fail
1.2
Fail
3.9
AA Large
1.8
Fail
1.2
Fail
—
1.0
Fail
3.1
AA Large
1.4
Fail
1.2
Fail
1.0
Fail
—
3.2
AA Large
1.4
Fail
3.9
AA Large
3.1
AA Large
3.2
AA Large
—
2.2
Fail
1.8
Fail
1.4
Fail
1.4
Fail
2.2
Fail
—
White BG
4.6AA
3.7AA Large
3.7AA Large
1.2Fail
2.6Fail
Black BG
4.6AA
5.7AA
5.7AA
17.9AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949336
A5A44C
A09F57
E3E4DC
8B8C96

Deuteranopia

9CA638
ADB64D
A5AD59
E2DFDE
888397

Tritanopia

C83B3B
D65051
C45C5D
D8E2E4
749B9D

Achromatopsia

6D6D6D
818181
848484
E8E8E8
989898

Shades & Tints Shades & Tints

#CF4731

Dark
Light

#DC5E46

Dark
Light

#C96A51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf4731;
  --color-2: #dc5e46;
  --color-3: #c96a51;
  --color-4: #d6f5d4;
  --color-5: #71ad8e;
}

SCSS

$color-1: #cf4731;
$color-2: #dc5e46;
$color-3: #c96a51;
$color-4: #d6f5d4;
$color-5: #71ad8e;

TAILWIND

colors: {
  'brand-1': '#cf4731',
  'brand-2': '#dc5e46',
  'brand-3': '#c96a51',
  'brand-4': '#d6f5d4',
  'brand-5': '#71ad8e',
}

RGB Array

[207, 71, 49], [220, 94, 70], [201, 106, 81], [214, 245, 212], [113, 173, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF4731, #DC5E46, #C96A51, #D6F5D4, #71AD8E 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: #cf4731; --color-2: #dc5e46; --color-3: #c96a51; --color-4: #d6f5d4; --color-5: #71ad8e. 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