Shades & Tints Generator

Color Ramps

Generate progressive darker shades (mixed with black) and lighter tints (mixed with white) for design system color scales.

Steps:

Base Color

Vercel Blue (#0070F3)

Soft, pastel, and ambient background variants

#177DF49% White

#2E8AF518% White

#4697F627% White

#5DA4F736% White

#74B1F845% White

#8BBEFA55% White

#A2CBFB64% White

#B9D8FC73% White

#D1E5FD82% White

#E8F2FE91% White

Deep, rich, and high-contrast text or border variants

#0066DD9% Black

#005CC718% Black

#0051B127% Black

#00479B36% Black

#003D8545% Black

#00336E55% Black

#00295864% Black

#001F4273% Black

#00142C82% Black

#000A1691% Black