Color Picker, Gradient & Palette

A free color picker, gradient maker and palette generator in one place

Choosing colours is one of those small jobs that turns into a hunt across half a dozen websites — one to read a HEX code, another to convert it to RGB, a third to build a gradient. This Color Picker brings all three jobs together. You pick a colour and instantly see its HEX, RGB and HSL values ready to copy, switch to the Gradient tab to build paste-ready CSS, or jump to the Palette tab to spin one base colour into a set of shades that actually belong together. No accounts, no installs, no watermarks.

It is built for the people who reach for colour values all day: front-end developers writing CSS, UI and product designers, brand and social-media creators, and hobbyists tinkering with a theme. Because the whole tool runs inside your browser, it works the moment the page loads and keeps working even if your connection drops mid-task — handy when you just need one quick HEX code without breaking your flow.

How to use it

1. On the Picker tab, drag inside the colour box or paste a HEX code into the text field to set your colour.
2. Read the live HEX, RGB and HSL values and tap Copy on whichever format you need.
3. Click a preset swatch for a quick common colour, or use Pick from image to upload a photo and tap anywhere on it to grab that exact pixel's colour. On supported browsers, Pick from screen lets you eyedrop a colour from anywhere on your display.
4. Switch to the Gradient tab to choose linear or radial, set two colour stops and an angle, then copy the generated background rule.
5. Open the Palette tab, pick a base colour and a harmony type, and tap any swatch to copy its HEX.

HEX, RGB and HSL — which one should you use?

All three describe the same colour, just in different shorthand. HEX (such as #5E8BFF) is the compact six-character form most designers paste into CSS and design apps. RGB spells out how much red, green and blue mix together on a 0–255 scale, which is useful when you need to nudge one channel or work with code that expects separate numbers. HSL describes a colour by hue, saturation and lightness, and it is the friendliest format for editing by eye: keep the hue fixed and lower the lightness to get a darker version of the same colour, or drop the saturation to mute it. This tool shows all three at once so you can copy whichever your project expects without doing any maths yourself.

Building gradients and palettes that look balanced

A CSS gradient is just a smooth blend between two or more colour stops. On the Gradient tab, a linear gradient runs in a straight line at the angle you set, while a radial one spreads outward from the centre like a soft spotlight. Moving each stop's position changes where one colour gives way to the next, so a hard 0%/100% split looks bold and a 30%/70% split looks softer. The Palette tab uses colour-wheel harmony to suggest combinations that sit well together: complementary pairs a colour with its opposite for high contrast, analogous picks neighbours for a calm, related look, triadic and tetradic space three or four colours evenly for variety, and monochromatic stays on one hue and walks through lighter and darker shades. Starting from harmony like this is the quickest way to avoid clashing combinations.

Accessibility and contrast — a quick note

Picking a colour you like is only half the job; text and buttons also need enough contrast to stay readable. As a rule of thumb, pair light text with a dark background or dark text with a light one, and be cautious with mid-tone colours behind small text. The HSL lightness value shown here is a handy guide — two colours with very close lightness will look low-contrast against each other no matter how different their hues are. When a design has to meet accessibility standards, confirm the final pair against a dedicated WCAG contrast check before shipping.

Your colours stay on your device

Everything happens locally in your browser. Colour values are calculated with JavaScript on your machine, and when you use Pick from image the photo is read straight into a canvas in the page — it is never uploaded to a server or stored anywhere. Nothing about your colours, images or palettes leaves your device, and there is no sign-up, so you can use the tool as often as you like without leaving a trail.