Color Picker with Shades

Choosing a color for your brand means also choosing its shades

Elegir un color para tu marca significa también elegir sus tonos

When choosing a color for brand, you can't just keep the color you want, you must also consider its shades. Shades help you to define other objects in your view that tell the user that its related to your brand without being monochromatic.

For example: you have a red brand, but maybe the buttons should be a little darker than the color you chose, o maybe you want to use shadow and borders for your cards, they can have the same color feel but you need to make a clear separation between both.

Typically, shades are numbered from 100 to 900, in one-hundred increments. Just like font weights.

When you choose a traditional swatch, doesn't matter what color you choose, it will show the shade list having a color in position 500 the one with the the same hue but not the same luminosity, that's really a good practice.

However, usually when using CSS, color shades are typically chosen using lighten or darken which change the luminosity of the color you chose.

This example uses your selected color as the 500 shade, and makes a linear interpolation between it and the 0 luminosity value for one side, and another interpolation towards the 100% luminosity value on the other side.

This can help you be sure that you have a range of colors, no matter how bright or dark it is, but it also can make you shift you preferences to select a color that can be more "balanced" in terms of shades.