Color Converter

Trending 🔥

Convert colors between HEX, RGB, HSL

Developer Tools

How to Use Color Converter

  1. 1Pick a color using the color picker or type a value in any format
  2. 2All other formats update instantly
  3. 3Click Copy next to any format

About Color Converter

Color Converter instantly converts colors between all common CSS formats — HEX, RGB, RGBA, HSL, and HSLA. Enter a value in any supported format and all other representations update instantly, along with a visual color preview.

Designers and front-end developers regularly need to translate between color formats: design tools export HEX, CSS properties prefer RGBA for transparency, and HSL is ideal for programmatic color manipulation. This tool eliminates the manual math and removes a common source of conversion errors.

All conversion runs entirely in your browser with no server required. A visual color picker lets you select any color and immediately get all its format representations.

Key Features of Color Converter

  • Convert between HEX, RGB, RGBA, HSL, and HSLA instantly
  • Enter any format and all others update simultaneously
  • Visual color preview swatch updates in real time
  • Browser color picker for interactive color selection
  • Supports both 3-digit (#RGB) and 6-digit (#RRGGBB) HEX formats
  • Handles alpha/transparency channel in RGBA and HSLA
  • One-click copy for each color format
  • Works entirely in-browser — no server requests

Supported Formats

Input Formats

HEX (#RRGGBB, #RGB)RGB (rgb(r, g, b))RGBA (rgba(r, g, b, a))HSL (hsl(h, s%, l%))HSLA (hsla(h, s%, l%, a))

Output Formats

HEXRGBRGBAHSLHSLA

Enter a value in any format and all other formats update instantly. Named CSS colors (like "cornflowerblue") are not currently supported as input.

Examples

Convert a Figma HEX color to HSL for CSS

Translate a design tool HEX value to HSL for use in CSS custom properties.

Input

#3B82F6

Output

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)

Add transparency to an RGB color

Get the RGBA equivalent of a solid color with 50% opacity for a semi-transparent overlay.

Input

rgb(0, 0, 0) with alpha 0.5

Output

RGBA: rgba(0, 0, 0, 0.5) | HEX with alpha: #00000080

Common Use Cases

  • Translating HEX colors from design tools (Figma, Sketch) into CSS RGB or HSL values
  • Converting solid colors to RGBA for semi-transparent overlays
  • Using HSL values for programmatic lightening and darkening in CSS
  • Bridging color formats between front-end code and back-end APIs
  • Verifying that different format representations of a color are equivalent
  • Quickly checking the RGB values of a HEX color in a design spec

Troubleshooting

HEX value produces a different color than expected

Solution

HEX values must be exactly 3 or 6 hexadecimal digits after the #. #FF0 (3-digit) and #FF0000 (6-digit) are both valid red.

HSL hue value is out of range

Solution

HSL hue is a value from 0 to 360 degrees. Saturation and lightness are percentages (0–100%).

Alpha value in RGBA/HSLA is not working

Solution

Alpha is a value from 0 (fully transparent) to 1 (fully opaque). Use a decimal between 0 and 1, not a percentage.

Frequently Asked Questions

What color formats are supported?

HEX (#RRGGBB and #RGB), RGB, RGBA, HSL, and HSLA. Enter any format and all others are calculated instantly.

What is the difference between RGB and HSL?

RGB defines colors as intensities of red, green, and blue light. HSL defines colors by hue (0–360°), saturation (0–100%), and lightness (0–100%).

When should I use RGBA instead of HEX?

Use RGBA when you need transparency (alpha channel). RGBA is the most universally compatible format for transparent colors in CSS.

What does the alpha value in RGBA represent?

Alpha represents opacity: 0 is fully transparent, 1 is fully opaque. Values like 0.5 give 50% transparency.

Can I convert CSS named colors like "cornflowerblue"?

Named CSS colors are not currently supported as input. Find the HEX value from a CSS reference and enter it to convert.

Is there a difference between HEX shorthand (#RGB) and full HEX (#RRGGBB)?

#RGB is shorthand where each digit is doubled. #F80 equals #FF8800. Shorthand is only valid when both digits of each pair are identical.

Is my data sent to a server?

No. All conversions are performed locally in your browser using JavaScript math.

Can I use this to find the HSL lightness of a color?

Yes. Enter the HEX or RGB value and the HSL output shows the lightness percentage.