# Pick a color
$ Harmony
$ Palette
$ How to use the color wheel
Click anywhere on the wheel to set your base color — the angle picks the hue, the distance from the center sets the saturation. Use the lightness slider underneath to brighten or darken it, or just type a hex code in directly. Then pick a harmony rule on the right and the palette updates instantly. Click any swatch to copy its hex, or grab the whole set at once.
What the harmonies mean
Complementary uses the color directly opposite on the wheel for high contrast and energy. Analogous uses neighbors for a calm, cohesive feel. Triadic spaces three colors evenly for a balanced but lively set. Split-complementary softens a complementary pairing. Square and tetradic give you four-color schemes with more range. Monochromatic and tints & shades stay on one hue, varying only lightness — great for clean, minimal UI.
Why this matters for your app
A coherent palette makes your App Store screenshots, icon and feature graphic feel like one product instead of a pile of random colors. Pick your brand color, generate a harmony, and reuse those exact hex codes across your screenshot captions, backgrounds and store assets.
$ FAQ
Is this free?
Yes — completely free, no signup, no limits. It runs entirely in your browser.
What's the difference between HSL and HSB?
Both describe hue and saturation, but the third value differs: HSL uses lightness (0% black, 100% white), while HSB uses brightness. Designers often prefer HSL for web; HSB shows up in tools like Photoshop. This wheel gives you both.
Can I start from my own brand color?
Yes. Type your hex code into the box and the wheel and palette update to match. Then choose a harmony to build around it.
How do I use the palette in my design?
Click any swatch to copy its hex, or use "Copy all hex" / "Copy as CSS vars" to grab the whole set. Paste straight into your design tool or stylesheet.