Color Tools
✓ Link copiedAn all-in-one color toolkit that runs entirely in your browser. Pick any color and instantly see its HEX, RGB, and HSL values, each copyable in one click. Build linear and radial CSS gradients with adjustable angle and unlimited color stops, preview them live, and copy ready-to-paste CSS. Generate harmonious palettes from any base color — tonal shades plus complementary, analogous, triadic, and tetradic harmonies. Free, fast, and completely private: every conversion and computation happens on your device and nothing is ever uploaded.
Color picker
Gradient builder
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Palette
Shades
Color harmony
How to use
Use the color picker or type a hex value to set your base color and read off its HEX, RGB, and HSL forms — click any value to copy it. In the gradient builder, choose linear or radial, drag the angle, add or remove color stops, and copy the generated CSS from the live preview. In the palette section, set how many shades you want and choose a harmony (complementary, analogous, triadic, or tetradic); click any swatch to copy its hex.
Frequently asked questions
- Is the color tool free?
- Yes. It's completely free, needs no sign-up, and runs entirely in your browser.
- How are HEX, RGB, and HSL related?
- They're three ways to describe the same sRGB color. HEX and RGB both encode red, green, and blue channels (HEX in base-16, RGB in 0–255 decimals), while HSL describes the color by hue, saturation, and lightness, which is often more intuitive for picking shades and harmonies. This tool converts between all three live.
- What are color harmonies?
- Harmonies are sets of colors with pleasing relationships on the color wheel. Complementary uses the opposite hue (180°), analogous uses neighbors (±30°), triadic spaces three hues evenly (120°), and tetradic uses four hues (90° apart). They're a quick way to build a balanced palette from one base color.