Color Code Converter

HEX, RGB, RGBA, and HSL, with a live preview

Color Preview

HEX

RGB

HSL

RGBA

Color Code Converter guide

Designers hand over colors in HEX, CSS uses rgb() and hsl(), and design tools show all of them. This converter takes a color in any common format and gives you the others instantly, with a live preview swatch.

What you can paste

  • HEX: #3b82f6, the short form #38f, or with transparency, #3b82f680.
  • RGB and RGBA: rgb(59, 130, 246) or rgba(59, 130, 246, 0.5).
  • HSL and HSLA: hsl(217, 91%, 60%).
  • CSS color names: blue, tomato, rebeccapurple, and the rest of the named colors.

The formats

  • HEX writes red, green, and blue as two hex digits each. It is the most common format in design handoffs.
  • RGB gives the same three channels as numbers from 0 to 255.
  • RGBA adds alpha, the opacity, from 0 (transparent) to 1 (solid).
  • HSL describes hue as an angle on the color wheel, plus saturation and lightness as percentages. It is the easiest to adjust by hand: lower the lightness for a darker shade.
#3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)

Tips

  • HSL values are rounded to whole numbers, so converting HSL back can shift a HEX value slightly. Keep the original HEX as your source of truth.
  • When a color has transparency, the HEX output includes it as two extra digits.

Frequently asked questions

What does the Color Code Converter do?
The Color Code Converter instantly converts colors between different formats including HEX, RGB, HSL, and RGBA. Simply enter a color in any format and see all conversions in real-time with a visual preview.
What color formats are supported?
The tool supports HEX (#RRGGBB or #RGB), RGB (red, green, blue), RGBA (RGB with alpha/transparency), HSL (hue, saturation, lightness), HSLA, and even CSS color names like 'red', 'blue', or 'rebeccapurple'.
How do I use the Color Code Converter?
Enter any valid color in the input field (like #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), or 'blue'). The tool will automatically convert it to all supported formats and display a color preview.
When would I use different color formats?
Use HEX for HTML/CSS and design tools, RGB/RGBA for JavaScript and when you need transparency, HSL for intuitive color adjustments (easier to modify brightness/saturation), and color names for quick prototyping.