Utileno
EN한국어
LOCAL TOOL · DESIGN

Color Converter (HEX ↔ RGB ↔ HSL)

Paste a color in any CSS format and get the other formats plus a live preview.

How to use

  1. Paste or type a color: #hex (3, 4, 6 or 8 digits), rgb()/rgba(), or hsl()/hsla().
  2. The swatch previews the color, and all three formats update instantly.
  3. Copy whichever format your CSS, design tool or code needs.

Examples

Brand color to HSL

Paste #336699 to get rgb(51, 102, 153) and hsl(210, 50%, 40%) — handy when you want to tweak lightness in HSL.

Semi-transparent overlay

Paste rgba(0, 0, 0, 0.5) to get #00000080 — the 8-digit hex form of 50% black for design tools that prefer hex.

Aspect Ratio CalculatorEnter a width and height to get the ratio — and resize to any target without distortion.JSON Formatter & ValidatorFormat, validate and minify JSON without uploading it — your data stays in your browser.Ratio CalculatorSimplify a ratio to its lowest terms and scale it to any size — both directions.

FAQ

Which color formats are supported?

HEX in 3, 4, 6 or 8 digits (with or without #), rgb() and rgba() with 0–255 channels, and hsl()/hsla() with degrees and percentages. Alpha carries across all formats.

What do H, S and L mean?

Hue is the position on the color wheel (0–360°), saturation is the color intensity (0% gray to 100% vivid), and lightness runs from 0% black through 50% pure color to 100% white.

How is alpha written in hex?

As a fourth pair of hex digits: #RRGGBBAA. 80 hex is 128 of 255, i.e. about 50% opacity. The converter shows the alpha form only when the color is not fully opaque.

Why does converting back and forth change a value by 1?

HSL uses rounded percentages while RGB uses 0–255 integers, so round-trips can shift a channel by ±1 — visually identical, and normal for all color tools.