Color palette generator

How it works

Every swatch is a straight mix of the base colour with either white or black, done per channel with the same formula: new channel equals the base channel multiplied by one minus the mix amount, plus the target channel multiplied by the mix amount, rounded to a whole number. Two tints use white at 50% and 25%, the third swatch is the base untouched, and two shades use black at 25% and 50%. Because only the distance to white or black changes, the hue stays in the same family and the swatches step evenly in lightness, which is what a palette needs. Three-digit hex is expanded first, and values outside 0 to 255 cannot occur because the mix is clamped.

Worked example

For #336699 the channels are 51, 102 and 153. The 50% tint gives 51 × 0.5 + 255 × 0.5 = 153, 178.5 and 204, which rounds to #99B3CC. The 25% tint gives #668CB3, the base is #336699, the 25% shade gives #264D73 and the 50% shade gives #1A334D. Each swatch also reports its rgb values, for example rgb(153, 179, 204) for the first tint.

Questions and answers