← Back to Editor

#970017 · #9C3645 · #AB6453 · #B08D6B · #959C9D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#970017

Vermilion · DarkRed · Wine Red

HEX
#970017
RGB
rgb(151, 0, 23)
HSL
hsl(351, 100%, 30%)
HSB
hsb(351, 100%, 59%)
CMYK
cmyk(0%, 100%, 85%, 41%)
Oklch
oklch(42.6% 0.173 24.5)

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

#9C3645

Crimson · Brown · Passion Red

HEX
#9C3645
RGB
rgb(156, 54, 69)
HSL
hsl(351, 49%, 41%)
HSB
hsb(351, 65%, 61%)
CMYK
cmyk(0%, 65%, 56%, 39%)
Oklch
oklch(48.3% 0.136 15.1)

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

#AB6453

Crimson · Sienna · Passion Red

HEX
#AB6453
RGB
rgb(171, 100, 83)
HSL
hsl(12, 35%, 50%)
HSB
hsb(12, 51%, 67%)
CMYK
cmyk(0%, 42%, 51%, 33%)
Oklch
oklch(57.9% 0.096 34.3)

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

#B08D6B

Ginger · Gray · Warm Sun

HEX
#B08D6B
RGB
rgb(176, 141, 107)
HSL
hsl(30, 30%, 55%)
HSB
hsb(30, 39%, 69%)
CMYK
cmyk(0%, 20%, 39%, 31%)
Oklch
oklch(66.8% 0.064 65.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#959C9D

Ash · DarkGray · Silver Sand

HEX
#959C9D
RGB
rgb(149, 156, 157)
HSL
hsl(187, 4%, 60%)
HSB
hsb(187, 5%, 62%)
CMYK
cmyk(5%, 1%, 0%, 38%)
Oklch
oklch(68.7% 0.008 207.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

970017
009982

Analogous

990063
970017
993600

Triadic

970017
179900
001799

Split-Comp.

970017
009936
006399

Tetradic

970017
639900
009982
360099

Contrast Matrix WCAG 2.1 Contrast

970017
9C3645
AB6453
B08D6B
959C9D
—
1.3
Fail
2.0
Fail
2.9
Fail
3.2
AA Large
1.3
Fail
—
1.5
Fail
2.3
Fail
2.5
Fail
2.0
Fail
1.5
Fail
—
1.5
Fail
1.6
Fail
2.9
Fail
2.3
Fail
1.5
Fail
—
1.1
Fail
3.2
AA Large
2.5
Fail
1.6
Fail
1.1
Fail
—
White BG
9.0AAA
6.9AA
4.5AA Large
3.1AA Large
2.8Fail
Black BG
2.3Fail
3.0AA Large
4.7AA
6.9AA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565411
706F41
8C8C57
A1A173
98989D

Deuteranopia

5E6A10
767D41
909658
A3A675
98979D

Tritanopia

8F0D0C
973F3E
A75A5B
AE7A7B
959D9D

Achromatopsia

303030
565656
777777
949494
9A9A9A

Shades & Tints Shades & Tints

#970017

Dark
Light

#9C3645

Dark
Light

#AB6453

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #970017;
  --color-2: #9c3645;
  --color-3: #ab6453;
  --color-4: #b08d6b;
  --color-5: #959c9d;
}

SCSS

$color-1: #970017;
$color-2: #9c3645;
$color-3: #ab6453;
$color-4: #b08d6b;
$color-5: #959c9d;

TAILWIND

colors: {
  'brand-1': '#970017',
  'brand-2': '#9c3645',
  'brand-3': '#ab6453',
  'brand-4': '#b08d6b',
  'brand-5': '#959c9d',
}

RGB Array

[151, 0, 23], [156, 54, 69], [171, 100, 83], [176, 141, 107], [149, 156, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #970017, #9C3645, #AB6453, #B08D6B, #959C9D 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: #970017; --color-2: #9c3645; --color-3: #ab6453; --color-4: #b08d6b; --color-5: #959c9d. 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