Color Shades Generator
Generate tints and shades from a base color.
Steps5
Tints (lighter)
#2bf4fe
#55f6fe
#80f9ff
#aafbff
#d5fdff
Base
#00f2fe
Shades (darker)
#00cad4
#00a1a9
#00797f
#005155
#00282a
Tints and shades explained
A tint is a color mixed toward white, and a shade is mixed toward black. Starting from your base color, this tool blends evenly toward each extreme to produce a balanced palette — perfect for hover states, backgrounds, borders, and full design systems built around one brand color. The math is a straight linear interpolation in RGB, computed instantly in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.