Colors Palettes
All palettes

Maroon

Beautiful Maroon color palette.

UI Design 5 colors
#830018
#670013
#AE2C53
#EB4C6F
#A00626

Every color in Maroon

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

263 33
#830018
Primary
#830018 rgb(131, 0, 24) hsl(349, 100%, 26%)
On white 10.62:1 AAA On black 1.98:1 Fails
#670013
Secondary
#670013 rgb(103, 0, 19) hsl(349, 100%, 20%)
On white 13.24:1 AAA On black 1.59:1 Fails
#AE2C53
Accent
#AE2C53 rgb(174, 44, 83) hsl(342, 60%, 43%)
On white 6.39:1 AA On black 3.28:1 AA large text
#EB4C6F
Background
#EB4C6F rgb(235, 76, 111) hsl(347, 80%, 61%)
On white 3.62:1 AA large text On black 5.80:1 AA
#A00626
Text
#A00626 rgb(160, 6, 38) hsl(348, 93%, 33%)
On white 8.24:1 AAA On black 2.55:1 Fails

About the Maroon palette

Maroon has 5 colors in the UI Design category. Overall it reads as mid-tone and vivid, with an average lightness of 37% and an average saturation of 87%. The hues lean warm.

The strongest text and background pair is #670013 with #EB4C6F, at a contrast ratio of 3.65:1 (AA large text). 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
87%
Lightness
37%
Best contrast
3.7

Ideas for using it

  • Web design: use #830018 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: #830018; /* Primary */
  --color-2: #670013; /* Secondary */
  --color-3: #AE2C53; /* Accent */
  --color-4: #EB4C6F; /* Background */
  --color-5: #A00626; /* Text */
}