Color Monster

Darker

25%
#002d68
rgb(0,45,104)
15%
#0c4782
rgb(12,71,130)
5%
#25609b
rgb(37,96,155)
65%
#000002
rgb(0,0,2)
45%
#000035
rgb(0,0,53)
35%
#00144f
rgb(0,20,79)

Lighter

5%
#3f7ab5
rgb(63,122,181)
15%
#5893ce
rgb(88,147,206)
25%
#72ade8
rgb(114,173,232)
35%
#8bc6ff
rgb(139,198,255)
45%
#a5e0ff
rgb(165,224,255)
65%
#d8ffff
rgb(216,255,255)

First Gradient (top)

Light
Dark

Second Gradient (bottom)

Light
Dark
color: #d8ffff;
border: 1px solid #0c4782;
background: #5893ce;
background: -moz-linear-gradient(top,  #5893ce 0%, #326da8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5893ce), color-stop(100%, #326da8));
background: -webkit-linear-gradient(top, #5893ce 0%, #326da8 100%);
background: -o-linear-gradient(top, #5893ce 0%, #326da8 100%);
background: -ms-linear-gradient(top, #5893ce 0%, #326da8 100%);
background: linear-gradient(to bottom, #5893ce 0%, #326da8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5893ce', endColorstr='#326da8', GradientType=0);

Colors

Background Color

Choose wisely.

Gradients

The first and second colors of a gradient work best 3 to 5 shades away from each other.

Subtle with a good pop from 15% lighter to the base color.

Borders look good on gradients when they are 15% darker.

Tip: The colors of a gradient should be 15% apart.

Text Color

Text color should be at least 6 shades lighter than the base color.

Text should never be pure white on a colored background. It pops too much and is jarring.

To create a more subtle lighter text color, use 65% lighter.

Icons: 5 shades darker is great.

Shadows

Like text shouldn't be pure white, text shadows shouldn't be pure black.

Text shadows work well at 65% darker.

Inset text shadows work best at 45% darker so that they are subltle.

  • Add hover colors (reversed gradient).
  • Add calculated complementary colors.
  • Add more options for generating gradients.
  • Add easier to copy code.
  • Add buttons to generate full color schemes.