Colors Palettes
All palettes

best ui design color shades

a collaction of best ui shades.

Brand Colors 5 colors
#A50303
#0339A5
#A50324
#A58F03
#A53403

Every color in best ui design color shades

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

26 27
#A50303
Primary
#A50303 rgb(165, 3, 3) hsl(0, 96%, 33%)
On white 8.03:1 AAA On black 2.61:1 Fails
#0339A5
Secondary
#0339A5 rgb(3, 57, 165) hsl(220, 96%, 33%)
On white 9.85:1 AAA On black 2.13:1 Fails
#A50324
Accent
#A50324 rgb(165, 3, 36) hsl(348, 96%, 33%)
On white 7.96:1 AAA On black 2.64:1 Fails
#A58F03
Background
#A58F03 rgb(165, 143, 3) hsl(52, 96%, 33%)
On white 3.22:1 AA large text On black 6.53:1 AA
#A53403
Text
#A53403 rgb(165, 52, 3) hsl(18, 96%, 33%)
On white 6.79:1 AA On black 3.09:1 AA large text

About the best ui design color shades palette

best ui design color shades has 5 colors in the Brand Colors category. Overall it reads as dark and vivid, with an average lightness of 33% and an average saturation of 96%. The hues lean warm.

The strongest text and background pair is #0339A5 with #A58F03, at a contrast ratio of 3.06: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
96%
Lightness
33%
Best contrast
3.1

Ideas for using it

  • Web design: use #A50303 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 dark 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: #A50303; /* Primary */
  --color-2: #0339A5; /* Secondary */
  --color-3: #A50324; /* Accent */
  --color-4: #A58F03; /* Background */
  --color-5: #A53403; /* Text */
}