Color Palette Generator

What this palette includes

Starting from your base color, the tool blends it toward white to create three progressively lighter tints (useful for hover states, backgrounds, and subtle highlights) and toward black to create three progressively darker shades (useful for text, borders, and pressed states). It also calculates a complementary color by rotating the base color's hue 180 degrees around the color wheel — a common starting point for accent colors that contrast cleanly with the base.

Frequently asked questions

Can I use these colors directly in CSS?

Yes — click "Copy CSS variables" to get a ready-to-paste :root block with each color as a named custom property, so you can reference them as var(--color-tint-40) and so on throughout your stylesheet.

Why does the complementary color use hue rotation instead of just inverting RGB?

Inverting RGB values often produces a muddy or unintuitive result. Rotating hue by 180 degrees in HSL space keeps the same saturation and lightness character as the base color, producing a complement that actually looks related to it on a color wheel.

Is my color sent anywhere?

No — all the color math runs locally in your browser.