How to Convert HEX Color Codes to RGB and HSL Values for CSS
Learn how to turn a HEX color into matching RGB and HSL strings, preview it live, and copy CSS-ready values straight into a stylesheet.
Color Converter (HEX/RGB/HSL)
Introduction
Design files usually hand over colors as HEX codes, but CSS work often calls for rgb() or hsl() notation, especially when adjusting lightness or adding transparency. The Color Converter takes a single HEX value and returns the equivalent RGB and HSL strings, with a live swatch and one-click copy buttons. All conversion math runs in the browser.
Step-by-Step Instructions
- Type or paste a HEX value into the HEX Color Code field (3-digit shorthand like #f0f or full 6-digit codes both work).
- Alternatively, click the color swatch picker beside the field to choose a color visually; the HEX field updates to match.
- Read the HEX Code, RGB Color and HSL Color cards, which recalculate as soon as the input changes.
- Check the HSL card when adjusting tone, since hue, saturation and lightness are easier to tweak than raw channel numbers.
- Click Copy Value under any card to copy that exact string (for example rgb(99, 102, 241)) to the clipboard.
Key Use Cases
- Design handoff: Convert a HEX swatch from a mockup into the rgb() string a component library expects.
- Theme variables: Build hsl() based CSS custom properties so lightness can be adjusted per state.
- Quick visual check: Paste an unfamiliar HEX code and confirm the color before using it in a style.
Frequently Asked Questions
Which input formats does the converter accept?
The input is HEX only, with or without the leading hash, in 3-digit or 6-digit form. Shorthand codes are expanded by doubling each digit, so #abc is treated as #aabbcc. Anything that is not a valid 3 or 6 digit hexadecimal value shows Invalid HEX in the RGB and HSL cards.
Does it convert to HSV or CMYK as well?
No. The current tool outputs HEX, RGB and HSL only. HSL values are rounded to whole numbers for hue (0 to 360) and percentages for saturation and lightness.
Why does the color picker not change when a short code is typed?
The native picker only reflects the text field when the value is a full 7-character code such as #6366f1. Shorthand values still convert correctly in the result cards; only the picker swatch falls back to its default until a 6-digit code is entered.