Color Picker & Converter
Pick any color — including with the screen eyedropper — and instantly convert between HEX, RGB, RGBA, HSL, HSV, and CMYK. Generate harmonies and shades, find the nearest Tailwind class, and export for CSS, SCSS, or JSON.
All Formats
#6D5DFCrgb(109, 93, 252)rgba(109, 93, 252, 1.00)hsl(246, 96%, 68%)hsla(246, 96%, 68%, 1.00)hsv(246, 63%, 99%)cmyk(57%, 63%, 0%, 1%)Nearest Tailwind Color
indigo-500#6366F1Shades & Tints
Color Harmonies
#6D5DFC#ECFC5FExport
/* CSS Custom Property */ --color-primary: #6D5DFC; --color-primary-rgb: 109, 93, 252;
CSS Color Formats, Explained
The same color can be written many ways, and each format suits a different job. HEX (#6D5DFC) is compact and the most common in CSS and design handoffs. RGB / RGBA spell out the red, green, and blue channels (0–255) and add an alpha channel for transparency. HSL / HSLA describe hue, saturation, and lightness — the easiest model for tweaking a color by hand or generating tints and shades. HSV (a.k.a. HSB) is what most design-app color wheels use, and CMYK is the print model. This tool shows every format at once and converts instantly as you change the color.
Building Palettes with Color Harmony
A good palette usually starts from one base color and a rule of harmony. Complementary colors sit opposite on the color wheel for maximum contrast; analogous colors are neighbours for a calm, cohesive look; triadic uses three evenly spaced hues for balanced vibrancy; and monochromatic stays on one hue across different lightnesses. Generate any of these here, grab an 11-step shade scale for your design tokens, then check the pairings for readability with the WCAG Contrast Checker before you ship.
Frequently Asked Questions
How do I convert HEX to RGB (and back)?
Enter or pick a color and the tool shows every format at once — HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK — each with a one-click copy button. HEX #6D5DFC, for example, is rgb(109, 93, 252). Paste an rgb() value into the HEX field and it converts the other way automatically.
What is the difference between HSL and HSV?
Both describe color by Hue (0–360°) plus two other channels. HSL uses Saturation and Lightness, where 100% lightness is always white and 50% is the "pure" color — intuitive for building tints and shades. HSV (also called HSB) uses Saturation and Value/Brightness, where 100% value is the brightest form of the color — common in design software color pickers. This tool shows both.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used for print. Screens use additive RGB; printers mix CMYK inks. The CMYK values here are a standard mathematical conversion useful for rough print planning — for color-critical print work, use your print shop's ICC profile, since exact CMYK depends on paper and press.
How do I build a color palette from one color?
Pick your base color, then use the Color Harmonies section: complementary (opposite on the wheel) for high contrast, analogous (neighbours) for calm schemes, triadic for balanced vibrancy, and monochromatic for shades of one hue. Click any swatch to make it the new base and copy its value. The Shades & Tints row gives you an 11-step scale for design tokens.
Can I pick a color from anywhere on my screen?
Yes, in Chromium-based browsers (Chrome, Edge, Brave, Opera). Click the eyedropper button next to the HEX field, then click any pixel on your screen — the tool captures its exact color. The eyedropper uses the browser's native EyeDropper API; it is hidden automatically in browsers that do not support it (currently Firefox and Safari), where you can still use the visual picker or paste a value.
Is the color picker free and private?
Yes. It is completely free with no signup, and every conversion runs entirely in your browser — no colors or images are uploaded to any server. Your recent-color history is stored locally in your browser only.