Images & Design

Color Converter

Convert any colour between HEX, RGB, HSL and CMYK. Type in any format, use the picker, set opacity, and copy CSS-ready values.

Preview

#3B82F6

HEX

Like #FF5733 or #F57. Add two more digits for transparency (#FF573380).

RGB

Red, green, blue — 0 to 255 each.

rgb(59, 130, 246)

HSL

Hue 0–360°, saturation and lightness 0–100%.

hsl(217, 91%, 60%)

CMYK

Cyan, magenta, yellow, key (black) — 0 to 100% each. For print.

cmyk(76%, 47%, 0%, 4%)

  • Four formats, one colour

    Edit HEX, RGB, HSL or CMYK and every other format updates instantly.

  • Live picker & preview

    Pick a colour visually and see it on a large swatch, including transparency.

  • Opacity support

    Set alpha once and copy rgba(), hsla() or 8-digit HEX values ready for CSS.

Free online colour converter

Designers, developers and students constantly move colours between tools — a HEX code from Figma, an RGB value for CSS, CMYK for a printed flyer. Type a value in any format above and the others update as you type.

Colour formats explained

  • HEX: the hexadecimal code used in HTML and CSS, e.g. #FF5733. The 3-digit shorthand #F57 means #FF5577, and 8-digit codes add transparency.
  • RGB: red, green and blue from 0 to 255 — how screens mix light. rgba() adds an alpha (opacity) value from 0 to 1.
  • HSL: hue (0–360°), saturation and lightness (0–100%). Easiest for making lighter, darker or muted versions of a colour.
  • CMYK: cyan, magenta, yellow and key (black) percentages used in printing. Screen-to-print conversion is approximate — ask your printer for their exact colour profile.

Tips

  • Use HEX or RGB for websites and apps; HSL when you need variations of one brand colour.
  • Use the opacity slider for overlays and shadows, then copy the rgba() or hsla() value.
  • HSL values are rounded to whole numbers, so converting back can shift RGB by one step.

Private by design. Everything runs in your browser — nothing you enter is uploaded or stored by AISeekho.

More free tools