Color converter
Convert any color between HEX, RGB and HSL. Pick a color, type a value, or tweak the sliders, and everything updates.
Color Converter: HEX to RGB to HSL, Plus Contrast Checker
Designers, developers and creators constantly switch between color formats. A website might use HEX, a design tool might show RGB and a stylesheet might use HSL. This free color converter translates between HEX, RGB and HSL instantly, and also checks text contrast and shows lighter and darker shades.
Why you need a HEX to RGB converter
- You have a color code in one format but need another.
- Converting by hand is slow and error-prone.
- You’re not sure whether text will be readable on a background.
- You want matching lighter or darker shades of the same color.
Common problems when looking for a HEX to RGB converter
- Many converters only handle one direction.
- Some are buried in complex design suites.
- Few include a contrast check for accessibility.
- Short HEX codes like #fff are not always accepted.
- Copying values correctly takes several steps.
How this free HEX to RGB converter solves the problem
- Convert between HEX, RGB and HSL as you type.
- Pick colors visually with a color picker.
- Copy any value with one click.
- See the contrast ratio on white and black, with a pass or fail note.
- Explore a row of shades in the same hue and click to use one.
Do’s and don’ts of using a HEX to RGB converter
Do
- Aim for a contrast ratio of at least 4.5:1 for normal text.
- Use HSL to adjust lightness while keeping the same hue.
- Copy the format your project needs, such as rgb() for CSS.
- Save your brand colors in all three formats.
Don’t
- Don’t rely on color alone to convey meaning.
- Don’t put light gray text on a white background.
- Don’t mix up RGB order, which is red, green, blue.
- Don’t forget that screens and prints show colors differently.
Tips for working with color codes
- Use darker shades of your brand color for text and lighter ones for backgrounds.
- HEX codes with six digits are the most widely supported.
- Check contrast for buttons and links as well as headings.
- Test your palette in dark mode as well as light mode.
- Keep a small, consistent palette of five or six colors.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX is a six-digit code, RGB gives red, green and blue amounts from 0 to 255, and HSL gives hue, saturation and lightness, which is easier to adjust by hand.
What does the contrast ratio mean?
It shows how readable text is on the color. A ratio of 4.5 or higher passes the common WCAG AA standard for normal text.
Can I type a short HEX code like #fff?
Yes. Three-digit codes are expanded automatically.
How to use the color converter
- Pick a color with the picker, or type a HEX, RGB or HSL value.
- The other formats update instantly.
- Copy the value you need with its Copy button.
- Check the contrast panel to see if text is readable on that color.