Utilix
Developer Tools

Color Converter

Convert colors between HEX, RGB, RGBA, HSL, and HSLA. Live preview, eyedropper.

  • HEX#6366f1
  • RGBrgb(99, 102, 241)
  • HSLhsl(239, 84%, 67%)
  • RGB valuesr=99, g=102, b=241, a=1
  • HSL valuesh=239°, s=84%, l=67%, a=1

Files processed in your browser

Your files never leave your device. No upload, no servers.

About Color Converter

Color Converter swaps between the four web color formats — HEX, RGB(A), HSL(A) — with a live preview swatch. Paste any color in any format and get all the equivalents at once. Useful for translating Figma colors into CSS, picking values for a design system, debugging where a color's opacity went, and quick palette work. Each color format has its own strengths. HEX (e.g. #3B82F6) is the most compact and is by far the most common in CSS. RGB(A) (e.g. rgba(59, 130, 246, 0.5)) makes alpha and individual channels easy to read and is the natural format for image processing. HSL(A) (e.g. hsl(217, 91%, 60%)) describes colors in terms of hue, saturation, and lightness — the same way a designer thinks about a color when they're tweaking it. The converter shows all three so you can use whichever notation makes the next change easiest.

How Color Converter works

  1. Pick a color from the native color picker, or type/paste any HEX, RGB(A), or HSL(A) string.
  2. The tool parses the input and computes the other formats simultaneously.
  3. A live swatch shows the resulting color, including transparency for RGBA/HSLA.
  4. Copy any equivalent format with one click for use in CSS, design tools, or code.
  5. Adjust hue, saturation, or alpha incrementally to find the exact color you want.

When to use Color Converter

  • Translate Figma RGB color values into CSS-friendly HEX or HSL.
  • Pick consistent hue/saturation values across a design system by working in HSL.
  • Debug why a color is appearing transparent — check the alpha channel in RGBA.
  • Convert hex codes from a brand guideline to RGBA when you need to add opacity.
  • Generate CSS-ready color values from a screenshot using the eyedropper.
  • Find a color's hue, then tweak saturation/lightness to derive a hover or disabled state.

Why choose Utilix Color Converter

  • All three web color formats in one place — no switching between hex2rgb and rgb2hsl tabs.
  • Native browser eyedropper for picking colors directly from your screen (Chrome/Edge).
  • Live swatch shows you exactly what the color looks like, including transparency.
  • Free, no signup, no waiting for the page to load between conversions.
  • Local-only — works offline and never sends your color values anywhere.

Frequently asked questions