Pick any colour and instantly convert between HEX, RGB, RGBA, HSL, HSLA, HSV and CSS named colours — copy any format with one click.
Use the visual colour picker or type a value directly — HEX, RGB, HSL or a CSS colour name. All formats update instantly.
All six colour formats update instantly: HEX, RGB, RGBA, HSL, HSLA, HSV and the closest CSS named colour.
Click the Copy button next to any format to copy it to your clipboard — paste directly into your CSS, Tailwind config or design tool.
The tool converts between six CSS colour formats: HEX (#rrggbb), RGB (rgb(r,g,b) 0-255), RGBA (rgba with alpha 0-1), HSL (hsl(h,s%,l%) with hue 0-360), HSLA (hsla with alpha channel), and HSV/HSB (used in design tools like Photoshop and Figma). It also identifies the closest CSS named colour from the 148 standard named colours.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are both cylindrical colour models but differ in brightness handling. In HSL a lightness of 50% is the pure chromatic colour and 100% is white. In HSV a value of 100% can be a fully saturated colour. CSS uses HSL natively. Design tools like Photoshop typically display HSV by default.
Yes — click the EyeDropper button to activate the native browser eyedropper (supported in Chrome 95+, Edge 95+). Move the cursor over any pixel on screen — including other tabs, application windows and your desktop — and click to sample that colour. It loads immediately into all conversion fields.
Yes — 8-digit HEX codes (#rrggbbaa) are supported. The last two digits represent the alpha channel from 00 (fully transparent) to FF (fully opaque). When you enter an 8-digit HEX the alpha value is extracted and populated in the RGBA and HSLA alpha fields automatically.
Yes — the Colour Shades panel generates a 10-step scale from lightest tint to darkest shade by adjusting HSL lightness. Each shade can be copied individually. This is useful for building design token colour palettes following the same convention as Tailwind CSS (100 lightest through 900 darkest).
Tailwind colours have specific HEX values. Type the HEX value directly into the HEX input field — for example Tailwind blue-500 is #3b82f6. The tool immediately shows RGB (59, 130, 246), HSL (217, 91%, 60%) and all other format equivalents ready to copy.
The alpha channel controls transparency — 0 is fully transparent, 1 is fully opaque. Adjust the Opacity slider to change the alpha value. The colour swatch updates to show the result with transparency over a checkered background. Use RGBA or HSLA output formats for transparent colours in overlays, shadows and backgrounds.
The tool finds the closest match from all 148 standard CSS named colours (aliceblue, dodgerblue, tomato etc.) by calculating the Euclidean distance in RGB colour space between your selected colour and every named colour. The closest match is shown in the CSS Name field. This is useful for recognising familiar colour names close to your design values.
Yes — type the HSL value directly into the HSL input field in the format hsl(H, S%, L%) for example hsl(210, 80%, 60%). The tool converts it to all other formats and updates the visual picker. You can also enter just the three numbers. All input fields accept both CSS function notation and raw numeric values.
No — all colour processing and conversion happens entirely in your browser using JavaScript. No values, sessions or usage data are transmitted to any server. The tool works completely offline after the page loads and stores nothing in localStorage or cookies.
