100tools
AssetsBeta

Color Picker / Palette

Pick a color and generate practical tints, shades, and companion swatches.

Generated locally from HSL tints, shades, complementary, and analogous hues.

Generated palette
Tint 80
#c7d7fa
Tint 60
#86a9f4
Base
#2463eb
Shade 40
#0f3c9f
Shade 20
#0a2767
Complement
#ebac24
Analogous -30
#24c6eb
Analogous +30
#4824eb

Related Tools

HEX / RGB / HSL ConverterConvert colors between HEX, RGB, and HSL formats in the browser.AssetsColor Contrast CheckerCheck foreground and background colors against WCAG contrast ratios.AssetsGradient GeneratorBuild modern CSS gradients, mesh backgrounds, auroras, and layered effects.Assets

Frequently Asked Questions

Does this upload my colors?

No. Palette generation runs entirely in your browser and does not send color values to a server.

How are palette colors generated?

The tool converts the base color to HSL, then derives tints, shades, complementary, and analogous swatches by adjusting lightness and hue.

Can I use the generated palette directly in CSS?

Yes. Each swatch exposes a copy-ready HEX value that can be used in CSS variables, design tokens, or component styles.