Pick colors and get HEX, RGB, HSL values
Built & maintained by Pappu Venkata Subbi Reddy, founder of Clacify
Color Picker lets you pick any color and instantly get it in every format a designer or developer actually needs: HEX (#8b5cf6), RGB, RGBA, and HSL, each with a one-click copy. Use the native color swatch or type a hex code directly, and all four formats update together in real time — no need to look up a conversion formula or paste into a separate converter. It's built for the moment you have a color picked in a design tool but need it as CSS, or you have a hex code from a brand guideline and need the RGB/HSL equivalent for a codebase that expects a different format. Everything computes locally in JavaScript the instant you change the color.
HEX-to-RGB conversion splits the 6-digit hex code into three 2-digit pairs (red, green, blue) and parses each as a base-16 number to get a 0–255 value — for example #8b5cf6 splits into 8b (139), 5c (92), f6 (246). RGB-to-HSL conversion is more involved: it finds the maximum and minimum of the three RGB values to determine lightness and saturation, then determines hue based on which channel (red, green, or blue) is dominant, expressed as a position on a 360° color wheel. All of this runs as pure arithmetic in the browser — there's no image processing or external color-matching service involved, so the values shown are the mathematically exact conversion, not an approximation.
HEX is the most common format in CSS and design tools because it's compact — a single 6-character string like #8b5cf6 encodes red, green, and blue in one token, which is why brand guidelines and Figma/Sketch files almost always specify colors this way.
RGB (and RGBA, which adds an alpha/transparency channel) is more useful in code when you need to manipulate individual channels — dimming just the blue value, or animating opacity via the alpha channel — since RGB exposes red, green, and blue as separate numbers rather than one packed string.
HSL (hue, saturation, lightness) is the format most useful for actually reasoning about color relationships: rotating the hue value produces a color wheel of matching shades, lowering saturation desaturates toward grey, and adjusting lightness alone — without touching hue or saturation — is the cleanest way to generate a consistent set of tints and shades for a design system, which is much harder to do correctly by eye-balling RGB or hex values.
This tool uses the browser's built-in <input type="color"> element rather than a custom-built color wheel. The practical benefit: it renders using your operating system's actual color picker — the same eyedropper and swatch interface you already know from other apps — which is both more familiar and, on most browsers, includes a screen eyedropper tool that lets you pick a color from anywhere on your screen, not just within the page. Building a custom picker would mean re-implementing that functionality from scratch, worse, for no real benefit over what the browser already provides for free.
Open Clacify's Color Picker, click on the color area to select your color, or type a color name or hex value. The HEX, RGB, and HSL codes appear instantly — click any value to copy it to clipboard.
HEX is a 6-digit code used in CSS/HTML (e.g. #6366f1). RGB specifies Red, Green, Blue intensity from 0–255. HSL describes Hue (0°–360°), Saturation (0–100%), and Lightness (0–100%) — making it intuitive for building color palettes and adjusting tones.