Design tool
Tints and Shades
Enter a hex color and copy lighter and darker steps from the same hue.
Processed in your browser. The text is not sent to our servers.
How to build tints and shades
- Enter a hex color, such as #4f46c7.
- Click Build steps.
- Copy the lighter tints and the darker shades.
A tint mixes the color toward white. A shade mixes it toward black. The preview shows the steps in one strip.
Frequently asked questions
Can I paste rgb()?
Use hex, including a short form such as #fff. The color converter can turn rgb() into hex first.
Is the color uploaded?
No. The steps are calculated in your browser.
Related design tools
Keep working without leaving the site.
Color converter
Switch a color between HEX, RGB, and HSL.
Open toolContrast checker
See whether two colors pass WCAG AA and AAA.
Open toolPX and REM
Convert pixels to rem, or rem back to pixels.
Open toolCSS gradient
Build a linear or radial gradient and copy the CSS.
Open toolBox shadow
Preview a box-shadow and copy the CSS property.
Open toolBorder radius
Preview a border-radius and copy the CSS property.
Open toolAspect ratio
Simplify a width and height, or find the missing side.
Open tool