← Back to Editor

#C0442D · #F70725 · #CF7313 · #948C56 · #6C8D73

warm

A 5-color warm 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

#C0442D

Vermilion · Sienna · Passion Red

HEX
#C0442D
RGB
rgb(192, 68, 45)
HSL
hsl(9, 62%, 46%)
HSB
hsb(9, 77%, 75%)
CMYK
cmyk(0%, 65%, 77%, 25%)
Oklch
oklch(55.6% 0.164 32.6)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#F70725

Vermilion · Crimson · Passion Red

HEX
#F70725
RGB
rgb(247, 7, 37)
HSL
hsl(353, 94%, 50%)
HSB
hsb(353, 97%, 97%)
CMYK
cmyk(0%, 97%, 85%, 3%)
Oklch
oklch(61.6% 0.248 26.0)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#CF7313

Ochre · Chocolate · Amber Brown

HEX
#CF7313
RGB
rgb(207, 115, 19)
HSL
hsl(31, 83%, 44%)
HSB
hsb(31, 91%, 81%)
CMYK
cmyk(0%, 44%, 91%, 19%)
Oklch
oklch(64.6% 0.149 58.2)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#948C56

Autumn Sage · Gray · Honey Gold

HEX
#948C56
RGB
rgb(148, 140, 86)
HSL
hsl(52, 26%, 46%)
HSB
hsb(52, 42%, 58%)
CMYK
cmyk(0%, 5%, 42%, 42%)
Oklch
oklch(63.4% 0.074 100.9)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#6C8D73

Celadon · Gray · Olive Green

HEX
#6C8D73
RGB
rgb(108, 141, 115)
HSL
hsl(133, 13%, 49%)
HSB
hsb(133, 23%, 55%)
CMYK
cmyk(23%, 0%, 18%, 45%)
Oklch
oklch(61.1% 0.054 151.0)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C0442D
2DA8BE

Analogous

BE2D5F
C0442D
BE8B2D

Triadic

C0442D
2DBE42
422DBE

Split-Comp.

C0442D
2DBE8B
2D5FBE

Tetradic

C0442D
5FBE2D
2DA8BE
8B2DBE

Contrast Matrix WCAG 2.1 Contrast

C0442D
F70725
CF7313
948C56
6C8D73
1.2
Fail
1.5
Fail
1.5
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.5
Fail
1.2
Fail
1.0
Fail
1.1
Fail
1.5
Fail
1.2
Fail
1.0
Fail
1.1
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.1
Fail
White BG
5.1AA
4.2AA Large
3.4AA Large
3.4AA Large
3.7AA Large
Black BG
4.1AA Large
5.0AA
6.1AA
6.1AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8933
8F8D1E
A7A62A
919063
7A7B79

Deuteranopia

929B34
9DAF1C
ADB330
919266
78767B

Tritanopia

BA3738
EB1817
CA3D41
946D70
6E7E7F

Achromatopsia

666666
525252
848484
888888
808080

Shades & Tints Shades & Tints

#C0442D

Dark
Light

#F70725

Dark
Light

#CF7313

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c0442d;
  --color-2: #f70725;
  --color-3: #cf7313;
  --color-4: #948c56;
  --color-5: #6c8d73;
}

SCSS

$color-1: #c0442d;
$color-2: #f70725;
$color-3: #cf7313;
$color-4: #948c56;
$color-5: #6c8d73;

TAILWIND

colors: {
  'brand-1': '#c0442d',
  'brand-2': '#f70725',
  'brand-3': '#cf7313',
  'brand-4': '#948c56',
  'brand-5': '#6c8d73',
}

RGB Array

[192, 68, 45], [247, 7, 37], [207, 115, 19], [148, 140, 86], [108, 141, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C0442D, #F70725, #CF7313, #948C56, #6C8D73 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: #c0442d; --color-2: #f70725; --color-3: #cf7313; --color-4: #948c56; --color-5: #6c8d73. 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 warm-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