Color Converter
Convert between hex, RGB, and HSL. Use the color picker or enter values. Example: #ff0000 → rgb(255, 0, 0) and hsl(0, 100%, 50%). Copy result or copy with labels.
Convert between hex, RGB, and HSL on one page. Enter a hex color (e.g. #ff0000 or #f00), or enter R, G, and B (0–255), or H, S, and L (0–360, 0–100, 0–100). All three update together. Use the color picker box to choose a color. Copy the result or copy with labels.
Loading…
Examples
- #ff0000 → rgb(255, 0, 0) and hsl(0, 100%, 50%)
- Enter R=255, G=0, B=0 to get #ff0000
- Use the color picker box to select any color
FAQ
How do I convert #ff0000 to RGB?
#ff0000 = rgb(255, 0, 0), red. Each pair of hex digits is one channel (RR, GG, BB).
What is HSL?
HSL is Hue, Saturation, and Lightness. Hue is 0–360 (degrees), saturation and lightness are 0–100 (percent).
What is the difference between RGB and HSL?
RGB uses red, green, and blue channels (0–255 each). HSL uses hue (0–360), saturation (0–100%), and lightness (0–100%). HSL can be easier when adjusting brightness or creating color variations.
Does it support short hex (#f00)?
Yes. Three-digit hex (#f00) is expanded to six digits (#ff0000) for conversion.
How do I choose a color visually?
Use the color picker box to choose a color. The hex, RGB, and HSL values update automatically.
What is RGBA and does this tool support it?
RGBA adds an alpha (opacity) channel to RGB: rgba(255, 0, 0, 0.5) is 50% transparent red. This converter works with fully opaque colors (no alpha channel). For RGBA, append the alpha value manually after conversion.
Why is hex used for colors in web development?
Hex is compact (6 characters), case-insensitive, directly readable by browsers, and easy to copy-paste. Most design tools export colors in hex. CSS also accepts rgb() and hsl(), but hex is the most common choice in HTML and CSS files.
What are CSS named colors?
CSS defines 148 named colors like 'red', 'blue', 'cornflowerblue', and 'rebeccapurple'. They map to specific hex values: 'red' = #ff0000, 'cornflowerblue' = #6495ed. Enter the hex value in this converter to see the RGB and HSL equivalents.
How do I use HSL for CSS variables and theming?
HSL is excellent for theming because you can shift the hue and lightness independently. Define a base color as --primary-h: 220, --primary-s: 80%, --primary-l: 50%, then create variants by adjusting lightness (e.g. 30% for dark, 70% for light).
What is the oklch color space?
oklch is a modern perceptually-uniform color space in CSS Color Level 4. It uses lightness (0–1), chroma (roughly saturation), and hue (0–360). Unlike HSL, oklch ensures colors at the same lightness value appear equally bright to the human eye.
How do I check color contrast for accessibility?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use the RGB values from this converter in a contrast checker tool. White (#ffffff) on pure blue (#0000ff) has a ratio of 8.59:1, which passes.
How do browsers interpret a hex color with 8 digits like #ff0000cc?
8-digit hex colors include an alpha channel: #RRGGBBAA. The last two digits are opacity (00 = fully transparent, FF = fully opaque). #ff0000cc is red at 80% opacity (CC = 204 in decimal, 204/255 ≈ 0.8).