Colors Palettes
All palettes

red dark palettes

red color palettes for designing ,web development and grafics.

Web Design 5 colors
#FF0000
#DA1010
#C22424
#AD3434
#833434

Every color in red dark palettes

HEX, RGB and HSL codes with contrast ratings. Click to copy.

7 3
#FF0000
Primary
#FF0000 rgb(255, 0, 0) hsl(0, 100%, 50%)
On white 4.00:1 AA large text On black 5.25:1 AA
#DA1010
Secondary
#DA1010 rgb(218, 16, 16) hsl(0, 86%, 46%)
On white 5.17:1 AA On black 4.06:1 AA large text
#C22424
Accent
#C22424 rgb(194, 36, 36) hsl(0, 69%, 45%)
On white 5.88:1 AA On black 3.57:1 AA large text
#AD3434
Background
#AD3434 rgb(173, 52, 52) hsl(0, 54%, 44%)
On white 6.33:1 AA On black 3.32:1 AA large text
#833434
Text
#833434 rgb(131, 52, 52) hsl(0, 43%, 36%)
On white 8.38:1 AAA On black 2.51:1 Fails

About the red dark palettes palette

red dark palettes has 5 colors in the Web Design category. Overall it reads as mid-tone and vivid, with an average lightness of 44% and an average saturation of 70%. The hues lean warm.

The strongest text and background pair is #FF0000 with #833434, at a contrast ratio of 2.10:1 (Fails). No pair in this palette reaches 4.5:1, so add a very dark or very light neutral before you set body text with it.

Color harmony

Measured from this palette's real values.

Saturation
70%
Lightness
44%
Best contrast
2.1

Ideas for using it

  • Web design: use #FF0000 for buttons and links, and keep large areas to the lighter colors.
  • Mobile apps: check each color against white and black above before you use it for text or icons.
  • Brand identity: pick one or two colors as the core and keep the rest as support.
  • Presentations: use the mid-tone colors for backgrounds and the strongest contrast pair for titles.

Use it in your project

Copy this palette as CSS variables, or export it in another format.

:root {
  --color-1: #FF0000; /* Primary */
  --color-2: #DA1010; /* Secondary */
  --color-3: #C22424; /* Accent */
  --color-4: #AD3434; /* Background */
  --color-5: #833434; /* Text */
}