Color Converter
Convert between HEX, RGB and HSL. Pick colors directly with the color picker.
Inputs are not collected. Usage measurement requires your consent.
Done
Color Converter
Next time, open this tool from My Tools. Only the tool list is saved in this browser, not your inputs or results.
⌥DPress Option+D anytime to toggle My Tools instantly
How to use
- 1
Enter color
Enter a color in HEX, RGB or HSL format.
- 2
Auto convert
Values are converted to the other formats automatically.
- 3
Copy
Copy the value in the format you need.
Features
- Convert between HEX, RGB and HSL
- Pick colors intuitively with the color picker
- Supports 3-digit shorthand HEX
- Copy each format with one click
Use cases
Web design colors
Convert HEX values from design tools into RGB or HSL for CSS.
Keep brand colors consistent
Convert brand colors across formats for web, print and documents.
Between design tools
Resolve format differences between design tools instantly.
Details
In web design and UI implementation, colors are specified in HEX (#ff0000), RGB (rgb(255, 0, 0)) and HSL (hsl(0, 100%, 50%)) formats. Different tools require different formats, so conversion is a frequent need.
You can also pick colors directly from the color picker. The selected color is instantly converted to all three formats, each copyable with one click.
HSL describes colors by hue, saturation and lightness, making it ideal for adjusting hues or creating shades and tints of the same hue.
FAQ
Can I convert shorthand HEX (#f00)?
Yes. Three-digit shorthand HEX is automatically expanded and converted.
Does it support alpha values?
Currently only opaque colors are supported. RGBA and HSLA are not supported.
Can I use color names like "red"?
Currently only HEX, RGB and HSL formats are supported.
How do I convert a HEX color code to RGB?
Enter a HEX value and it converts to RGB and HSL automatically.
Related guide
GuideHEX, RGB and HSL Conversion: Formats, Alpha and Rounding
Convert HEX, RGB and HSL with worked values. Check shorthand HEX, integer HSL rounding, alpha compositing and the tool’s supported input formats.
GuideChoose a Color Palette: Complementary, Analogous and Triadic Workflows
Compare four palette schemes, actual generated color counts and HEX copying. Assign background, text and action roles, then check contrast on the finished screen.
GuideWCAG 2.2 Contrast Ratios: Thresholds, Transparent Backgrounds and Checks
Choose the WCAG 2.2 threshold for text or UI, measure actual foreground and background colors, and avoid rounded-ratio and translucent-background mistakes.
Related Tools
Color Palette Generator
Generate complementary, analogous, triadic and monochrome palettes. View HEX, RGB and HSL values and copy HEX codes for your designs.
Contrast Checker
Calculate the contrast ratio between text and background colors and check WCAG conformance (AA, AAA) instantly — for readable, accessible color combinations.
Image Palette Extractor
Upload an image and extract its dominant colors as a palette. Choose 4, 6 or 8 colors and copy HEX or RGB codes with one click. Everything runs locally in your browser.
Image Compressor
Compress image files and compare the result as you adjust quality and dimensions for websites or social media.
All processing happens in your browser. Your files are never uploaded.
Verified: Color input, conversion and copy behavior are maintained as regression flows
Did you know?
The human eye is most sensitive to differences in green.