#C70D0D + #E5430B + #577555 + #44494F + #5F524F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C70D0D

Vermilion · FireBrick · Passion Red

HEX

#C70D0D

RGB

rgb(199, 13, 13)

HSL

hsl(0, 88%, 42%)

HSB

hsb(0, 93%, 78%)

CMYK

cmyk(0%, 93%, 93%, 22%)

Oklch

oklch(52.5% 0.210 28.7)

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

#E5430B

Tangerine · OrangeRed · Amber Brown

HEX

#E5430B

RGB

rgb(229, 67, 11)

HSL

hsl(15, 91%, 47%)

HSB

hsb(15, 95%, 90%)

CMYK

cmyk(0%, 71%, 95%, 10%)

Oklch

oklch(61.5% 0.206 36.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#577555

Celadon · DimGray · Forest Green

HEX

#577555

RGB

rgb(87, 117, 85)

HSL

hsl(116, 16%, 40%)

HSB

hsb(116, 27%, 46%)

CMYK

cmyk(26%, 0%, 27%, 54%)

Oklch

oklch(53.0% 0.060 143.1)

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

#44494F

Dark Cyan · DarkSlateGray · Charcoal

HEX

#44494F

RGB

rgb(68, 73, 79)

HSL

hsl(213, 7%, 29%)

HSB

hsb(213, 14%, 31%)

CMYK

cmyk(14%, 8%, 0%, 69%)

Oklch

oklch(40.3% 0.012 252.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#5F524F

Crimson · DimGray · Charcoal

HEX

#5F524F

RGB

rgb(95, 82, 79)

HSL

hsl(11, 9%, 34%)

HSB

hsb(11, 17%, 37%)

CMYK

cmyk(0%, 14%, 17%, 63%)

Oklch

oklch(45.0% 0.018 33.1)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C70D0D

0DC9C9

Analogous

C90D6B

C70D0D

C96B0D

Triadic

C70D0D

0DC90D

0D0DC9

Split-Comp.

C70D0D

0DC96B

0D6BC9

Tetradic

C70D0D

6BC90D

0DC9C9

6B0DC9

Contrast Matrix WCAG 2.1 Contrast

C70D0D	E5430B	577555	44494F	5F524F
—	1.5 Fail	1.2 Fail	1.5 Fail	1.2 Fail
1.5 Fail	—	1.3 Fail	2.2 Fail	1.8 Fail
1.2 Fail	1.3 Fail	—	1.8 Fail	1.5 Fail
1.5 Fail	2.2 Fail	1.8 Fail	—	1.2 Fail
1.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

6.0AA

4.1AA Large

5.1AA

9.1AAA

7.5AAA

Black BG

3.5AA Large

5.1AA

4.1AA Large

2.3Fail

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

76750D

9F9D19

64645D

46464E

595950

Deuteranopia

818F0D

A8B41C

62605F

46464D

5A5B50

Tritanopia

BE0D0D

DD2326

586364

444C4C

5E5050

Achromatopsia

454545

6D6D6D

686868

484848

565656

Shades & Tints Shades & Tints

#C70D0D

Dark

Light

#E5430B

Dark

Light

#577555

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c70d0d;
  --color-2: #e5430b;
  --color-3: #577555;
  --color-4: #44494f;
  --color-5: #5f524f;
}

SCSS

$color-1: #c70d0d;
$color-2: #e5430b;
$color-3: #577555;
$color-4: #44494f;
$color-5: #5f524f;

TAILWIND

colors: {
  'brand-1': '#c70d0d',
  'brand-2': '#e5430b',
  'brand-3': '#577555',
  'brand-4': '#44494f',
  'brand-5': '#5f524f',
}

RGB Array

[199, 13, 13], [229, 67, 11], [87, 117, 85], [68, 73, 79], [95, 82, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C70D0D, #E5430B, #577555, #44494F, #5F524F is ideal for: tech websites, dark mode UIs, game UIs. 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: #c70d0d; --color-2: #e5430b; --color-3: #577555; --color-4: #44494f; --color-5: #5f524f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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