Color Converter
Convert colors between HEX, RGB, HSL, RGBA, and HSLA formats with live preview. Includes alpha channel and color picker. Free, instant, no signup.
What is Color Converter?
Convert colours between HEX, RGB, RGBA, HSL, and HSLA formats with a live preview swatch and HSL sliders for fine-tuning. Paste a designer's HEX value and instantly see RGB and HSL equivalents - handy for translating Figma colours into CSS variables, building systematic light and dark variations, and designing accessible overlays with alpha. Copy any format with one click, including a ready-to-paste CSS variable snippet for your design system. Free, with no signup, no limits, and the alpha checkerboard preview shows transparency clearly.
How It Works
Using Color Converter in 3 Steps
Pick or Type a Colour
Use the native colour picker, paste a HEX value, or tweak R/G/B/A inputs. Every other format (RGB, HSL, RGBA, HSLA) updates instantly.
Adjust HSL Sliders
Drag hue, saturation, and lightness sliders to fine-tune the colour. The live preview swatch shows alpha against a checkerboard background.
Copy Any Format
Click Copy on the format you need - HEX, RGB(A), HSL(A), or a ready-to-paste CSS variable snippet.
Use Cases
Who Uses Color Converter?
Frontend Developers
Convert designer-supplied HEX colours to HSL for systematic light/dark variations, or to RGBA for overlays and shadows.
UI / UX Designers
Translate values between Figma, Sketch, and CSS without leaving the browser - keep HSL for colour systems and HEX for handoff.
Brand & Marketing Teams
Match brand colours across email templates, social graphics, and ad creatives by exporting consistent HEX/RGB values.
FAQ
Color Converter — Frequently Asked Questions
Everything you need to know before you start.
Which colour formats does this tool support?
HEX (3, 4, 6, 8 digit), RGB, RGBA, HSL, HSLA, and a CSS variable snippet. Edit any field and the others update instantly.
How does the alpha channel work in HEX?
8-digit HEX adds two extra hex characters at the end representing alpha (00 = fully transparent, FF = fully opaque). For example, #3B82F680 is the standard blue at 50% opacity.
Why does HSL hue go from 0-360?
Hue is measured as a position on the colour wheel in degrees. 0° is red, 120° is green, 240° is blue, and the wheel wraps back to red at 360°.
Is my colour data stored anywhere?
No. The converter runs entirely in your browser. Nothing is uploaded.
More Free Tools
Related Tools
This tool is free. Need something custom built?
These tools are made and kept free by a full-stack developer who ships production web apps, internal tools, AI features, and SEO for founders and teams worldwide. If you need a custom tool, an automation, or a complete website or web app, get a free quote in 24 hours.