Color Converter

Design Tools

Convert HEX / RGB / HSL / HSV

FreePrivateInstant
HEX#6366F1
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 1)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HSVhsv(239, 59%, 95%)
CSS Nameindigo
Full guide, 4 min readHEX, RGB and HSL: three ways to write the same colour, and which to useRead the story behind this tool →
Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

Color Name FinderFind the nearest name for any HEX color
Color PickerHEX / RGB / HSL with tints
Random Color GeneratorGenerate random HEX, RGB & HSL colors
Color MixerBlend two colors and see in-betweens
Color Shades & Tints GeneratorLighter and darker shades of any color
Angle ConverterConvert degrees, radians and gradians

History

All history →

Color Converter — at a glance

Type a color in one format and instantly get it in all others: HEX, RGB, RGBA, HSL, HSLA and HSV.

HEX
#FF5733
Convert
All formats
RGB: 255, 87, 51
HSL: 11, 100%, 60%
HSV: 11, 80%, 100%

How to use it — step by step

Saves you from doing the math when moving between design tools and CSS.

1

Enter a color

Type HEX (#FF5733), RGB (255,87,51) or any supported format.

2

See everything

All equivalent formats show at once with a preview.

3

Copy

Copy the format your CSS or design tool needs.

Pro tips

Small things that make the result better.

✦Use RGBA / HSLA when you need transparency.
✦The # in HEX is optional while typing.
✦HSV is used in many design apps like Photoshop.

Quick facts

6 formatsHEX, RGB, RGBA, HSL, HSLA, HSV
Livepreview swatch
Instantno button
CSS readycopy and paste

Frequently Asked Questions

What is the “A” in RGBA?+

Alpha — it controls transparency from 0 (invisible) to 1 (solid).

Which format should I use in CSS?+

Any works. HEX is shortest, RGBA/HSLA are best when you need transparency.

Is this tool really free?+

Yes — completely free, no signup, no watermark and no usage limit.

More Free Tools

Guides you might like

All guides →
Color Contrast CheckerIs your text readable? The contrast ratio, explained
PX to REM Converterpx vs rem: why your font sizes should be allowed to scale
Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises
Number Base ConverterBinary, hex and decimal: counting in bases 2, 10 and 16