#797A6F + #BD0205 + #4E4F48 + #780103 + #282925 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#797A6F

Ink Gray · Gray · Warm Gray

HEX

#797A6F

RGB

rgb(121, 122, 111)

HSL

hsl(65, 5%, 46%)

HSB

hsb(65, 9%, 48%)

CMYK

cmyk(1%, 0%, 9%, 52%)

Oklch

oklch(57.5% 0.016 111.1)

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

#BD0205

Vermilion · FireBrick · Wine Red

HEX

#BD0205

RGB

rgb(189, 2, 5)

HSL

hsl(359, 98%, 37%)

HSB

hsb(359, 99%, 74%)

CMYK

cmyk(0%, 99%, 97%, 26%)

Oklch

oklch(50.2% 0.205 28.8)

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

#4E4F48

Dark Cyan · DarkSlateGray · Charcoal

HEX

#4E4F48

RGB

rgb(78, 79, 72)

HSL

hsl(69, 5%, 30%)

HSB

hsb(69, 9%, 31%)

CMYK

cmyk(1%, 0%, 9%, 69%)

Oklch

oklch(42.4% 0.011 113.5)

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

#780103

Vermilion · Maroon · Wine Red

HEX

#780103

RGB

rgb(120, 1, 3)

HSL

hsl(359, 98%, 24%)

HSB

hsb(359, 99%, 47%)

CMYK

cmyk(0%, 99%, 98%, 53%)

Oklch

oklch(36.0% 0.147 28.5)

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

#282925

Ink Black · DarkSlateGray · Dark Stone

HEX

#282925

RGB

rgb(40, 41, 37)

HSL

hsl(75, 5%, 15%)

HSB

hsb(75, 10%, 16%)

CMYK

cmyk(2%, 0%, 10%, 84%)

Oklch

oklch(27.8% 0.007 118.3)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

797A6F

706F7B

Analogous

7B766F

797A6F

747B6F

Triadic

797A6F

6F7A7B

7B6F7A

Split-Comp.

797A6F

6F747B

766F7B

Tetradic

797A6F

6F7B76

706F7B

7B6F74

Contrast Matrix WCAG 2.1 Contrast

797A6F	BD0205	4E4F48	780103	282925
—	1.5 Fail	1.9 Fail	2.7 Fail	3.4 AA Large
1.5 Fail	—	1.3 Fail	1.8 Fail	2.2 Fail
1.9 Fail	1.3 Fail	—	1.4 Fail	1.8 Fail
2.7 Fail	1.8 Fail	1.4 Fail	—	1.3 Fail
3.4 AA Large	2.2 Fail	1.8 Fail	1.3 Fail	—

White BG

4.4AA Large

6.6AA

8.3AAA

11.6AAA

14.6AAA

Black BG

4.8AA

3.2AA Large

2.5Fail

1.8Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

797972

6C6A04

4E4E4A

444303

282826

Deuteranopia

797972

778504

4E4E4A

4B5402

282826

Tritanopia

797474

B40404

4E4B4B

720202

282727

Achromatopsia

787878

3A3A3A

4E4E4E

252525

282828

Shades & Tints Shades & Tints

#797A6F

Dark

Light

#BD0205

Dark

Light

#4E4F48

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #797a6f;
  --color-2: #bd0205;
  --color-3: #4e4f48;
  --color-4: #780103;
  --color-5: #282925;
}

SCSS

$color-1: #797a6f;
$color-2: #bd0205;
$color-3: #4e4f48;
$color-4: #780103;
$color-5: #282925;

TAILWIND

colors: {
  'brand-1': '#797a6f',
  'brand-2': '#bd0205',
  'brand-3': '#4e4f48',
  'brand-4': '#780103',
  'brand-5': '#282925',
}

RGB Array

[121, 122, 111], [189, 2, 5], [78, 79, 72], [120, 1, 3], [40, 41, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #797A6F, #BD0205, #4E4F48, #780103, #282925 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: #797a6f; --color-2: #bd0205; --color-3: #4e4f48; --color-4: #780103; --color-5: #282925. 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 cool-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