Color Converter
Convert colours between HEX, RGB, HSL, and RGBA with a live preview
What is Color Converter?
Colours in web development can be expressed in many formats: the hexadecimal #RRGGBB code familiar from design tools, the RGB(red, green, blue) functional notation used in CSS, the HSL(hue, saturation, lightness) model that makes colour relationships intuitive, and RGBA and HSLA variants that add an opacity channel. Every format has its place — HEX codes are compact and universally recognised, RGB maps directly to screen hardware, and HSL makes it easy to create colour scales by adjusting lightness while keeping the same hue and saturation. The challenge is that design tools output in one format while your CSS framework expects another. Our free Color Converter instantly translates any colour between all common formats. Paste a HEX code from Figma and get back the RGB value for a CSS custom property. Enter an RGB value from an old stylesheet and get the HSL equivalent to create a consistent colour scale. See the actual colour in a live preview swatch so you can confirm you have the right shade before copying the converted value into your code.
How to Use Color Converter
- 1
Enter Any Colour Value
Type or paste a colour in any format: a HEX code (#3498db or 3498db), an RGB value (52, 152, 219), or an HSL value (204, 70%, 53%). The tool auto-detects the input format.
- 2
See All Conversions Instantly
All equivalent representations — HEX, RGB, RGBA, HSL, HSLA — are calculated and displayed simultaneously with a live colour swatch showing the actual colour.
- 3
Copy the Format You Need
Click the copy button next to whichever format your project requires. The value is copied to clipboard already formatted as valid CSS (e.g., rgb(52, 152, 219) or hsl(204, 70%, 53%)).
Use Cases
Converting Figma Design Tokens to CSS
Figma outputs brand colours as HEX codes (#2284C6). When your CSS design system uses HSL variables for generating colour scales, convert each brand colour to HSL here to extract the hue and saturation values. Then create light and dark scale variants by adjusting only the lightness percentage — keeping the hue constant maintains visual consistency across the palette.
Adding Opacity to a Brand Colour
A designer asks for a button hover background at 15% opacity of the brand colour. You have the HEX code but need an rgba() value for CSS. Convert the HEX to RGBA here and set the alpha to 0.15 — then paste the rgba() value directly into your hover state style without needing to do the mental conversion.
Matching Colours Across Tools
Email marketing tools, CMS platforms, and analytics dashboards each have their own colour input formats. When you need the exact same brand blue in a Mailchimp email template (needs HEX), a Tailwind config (needs RGB or HSL), and a Chart.js dataset (needs rgba()), convert once here and copy the appropriate format for each destination.
Features
Converts Between All CSS Colour Formats
Handles HEX (#rgb, #rrggbb, #rrggbbaa), RGB, RGBA, HSL, and HSLA — every format used in CSS and design tools.
Live Colour Preview Swatch
A colour swatch updates in real time so you can confirm the exact colour visually, not just numerically.
Outputs CSS-Ready Values
Copied values are formatted as valid CSS property values — rgb(52, 152, 219) not just the numbers — ready to paste directly into a stylesheet.
Supports Opacity / Alpha Channel
Enter alpha values for RGBA and HSLA conversions, making it easy to create semi-transparent versions of any colour.
Frequently Asked Questions
HEX (#rrggbb) encodes each colour channel as a two-digit hexadecimal number — compact and widely used in design tools and CSS. RGB (red, green, blue) expresses the same three channels as decimal numbers from 0 to 255, mapping directly to how screens mix light. HSL (hue, saturation, lightness) separates the colour's identity (hue, 0–360°) from its intensity (saturation, 0–100%) and brightness (lightness, 0–100%), making it much more intuitive for creating colour scales and palettes.
The alpha channel controls opacity, from 0 (fully transparent) to 1 (fully opaque). rgba(52, 152, 219, 0.5) renders the colour at 50% opacity, allowing background content to show through. This is how you create semi-transparent overlays, frosted glass effects, and translucent backgrounds in CSS without using the separate opacity property (which affects the entire element including its children).
An 8-digit HEX code (#rrggbbaa) includes an alpha channel as the last two hexadecimal digits. #2284C6FF is fully opaque blue (FF = 255 = 100% opacity) and #2284C680 is 50% transparent blue (80 hex = 128 decimal ≈ 50%). This format is supported in all modern browsers but may not be recognised by older tools and email clients.
HSL separates hue (the colour's position on the colour wheel, 0–360°), saturation (colour intensity, 0–100%), and lightness (brightness, 0–100%). This separation makes it easy to create consistent colour scales: keep the hue and saturation the same and vary only the lightness to produce 50, 100, 200...900 shades — exactly how Tailwind CSS and other design systems define colour palettes.
This tool focuses on numeric colour formats (HEX, RGB, HSL). CSS named colours like cornflowerblue, rebeccapurple, and tomato are defined by the CSS spec and work in browsers, but they cover only 140 specific colours. For design work requiring precise colour values, numeric formats are always preferred since they express any of the 16+ million possible colours.
Need a Professional Website?
JAIDOO EMPIRE builds fast, SEO-optimised websites for businesses worldwide. All free tools are built and maintained by our team.
Start Your Project
