Color Format Converter

Color Picker
HEX
RGB
HSL
RGBA
HSLA

How to Use

  1. Enter a color in any format — HEX, RGB, HSL, RGBA, or HSLA — or click the color swatch to open the color picker
  2. All other format fields update automatically
  3. Adjust the Alpha (A) value in the RGBA or HSLA section to set the opacity (0 = fully transparent, 1 = fully opaque)
  4. Click Copy next to any format to copy the CSS-ready color value
  5. Use the checkerboard swatch at the top to visually confirm the color and transparency

Frequently Asked Questions

What is HEX color format?

HEX uses a six-digit hexadecimal number to represent a color, e.g. #FF5733. It is widely used in CSS and web design.

What is RGB color format?

RGB specifies a color using red, green, and blue components, each ranging from 0 to 255. Example: rgb(255, 87, 51).

What is HSL color format?

HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is often easier to intuitively adjust for designers.

What is RGBA color format?

RGBA extends RGB with an Alpha channel (0–1) that controls opacity. Example: rgba(255, 87, 51, 0.5) is 50% transparent.

What is HSLA color format?

HSLA extends HSL with an Alpha channel (0–1). Example: hsla(14, 100%, 60%, 0.5) is a semi-transparent orange.