Skip to developer tool
DEVELOPER TOOLKIT CSS & COLOR

HEX, RGB, HSL & HSV Color Converter

Move a color between design notation and CSS without manually calculating channels. Paste HEX, RGB or HSL input, set opacity and copy the representation your stylesheet or design system expects.

Local processing · No account required · Copy and export

Open workspace Read the guide
BUILT FOR THE DETAILS
  1. 01Add your input
  2. 02Inspect & adjust
  3. 03Use your result
Browse developer tools

Workspace

PixelOkay · Developer tools

How to use HEX, RGB, HSL & HSV Color Converter

  1. Paste a supported HEX, rgb()/rgba() or hsl()/hsla() value and apply it. You can also use the HEX field or color picker directly.
  2. Adjust opacity using the slider. The preview shows the color over a checkerboard so transparency stays visible.
  3. Read the RGB, HSL, HSV and alpha-HEX results. Copy a CSS value or the HSV components for another application.

When to use this tool

Translate a design color into the CSS notation needed by a stylesheet or component API. Check opacity and preview the result against its intended background.

Different color models describe the same sRGB color

HEX and RGB specify red, green and blue channels. HSL uses hue, saturation and lightness; HSV uses hue, saturation and value. HSL and HSV saturation are different calculations, so their numbers need not match. Alpha describes opacity separately from those color channels. Four- and eight-digit HEX include alpha as the final channel.

Worked example

Input: hsl(0, 100%, 50%)
RGB: rgba(255, 0, 0, 1.00)
HSL: hsla(0, 100%, 50%, 1.00)
HSV: 0°, 100%, 100%
Alpha HEX: #ff0000ff

Limits and output checks

Input supports sRGB HEX and numeric RGB/HSL function notation. CSS variables, named colors, relative colors, wide-gamut profiles, lab() and color() are outside this converter. Channel rounding can slightly change a round trip; use the original source color when exact precision matters.

Reference: CSS color values.

Frequently asked questions

Can I paste RGB percentages or modern CSS syntax?

Yes. Numeric or percentage RGB channels, comma or space separators and slash alpha are supported. Values outside their allowed ranges are rejected.

Why does HSL saturation differ from HSV saturation?

The models use different definitions for lightness and value. Their saturation percentages are not interchangeable.

Does alpha change the underlying HEX color?

The RGB channels remain the base color. Alpha controls how much of a background contributes when the color is composited.

Keep color channels separate from transparency

Enter a supported HEX, RGB or HSL value and inspect the other representations. Retain the original value when a precise round trip matters.

Scope of this workflow

The converter handles its documented sRGB notations, not arbitrary CSS variables or wide-gamut profiles. Alpha describes compositing rather than a new underlying RGB color.

Color Contrast Checker — WCAG AA & AAA · All developer tools · Privacy policy · Contact PixelOkay