Tools

Color converter

Convert a color between HEX, RGB(A), and HSL(A) in one step. Paste any value or pick one with the swatch, then copy the format you need. The HEX ↔ RGB ↔ HSL math runs entirely in your browser. Nothing is uploaded, so it is safe for brand and internal palettes.

Enter a colour

Type a HEX, RGB(A), or HSL(A) value, or pick one with the swatch. Everything is converted in your browser. Nothing is uploaded.

Try

HEX

#1e90ff

RGB

rgb(30, 144, 255)

HSL

hsl(210, 100%, 56%)

HEX, RGB, and HSL: what is the difference?

HEX is a six-digit hexadecimal shorthand for RGB: two digits each for red, green, and blue (an optional seventh and eighth digit add alpha). It is compact and the default in most design tools and CSS.

RGB lists the same three channels as decimal values from 0 to 255, with an optional alpha from 0 to 1. It maps directly to how screens emit light, so it is lossless with HEX.

HSL describes a color by hue (0 to 360°), saturation, and lightness (both percentages). It is easier to reason about when you want a lighter or more muted variant of the same hue, which is why it is popular for building color scales and themes.

Frequently asked questions

Which color formats does this tool support?: Input can be HEX (#rgb, #rrggbb, or #rrggbbaa), RGB and RGBA, e.g. rgb(30, 144, 255) or rgba(30, 144, 255, 0.5), and HSL and HSLA, e.g. hsl(210, 100%, 56%). Legacy comma syntax and modern space-separated syntax both work. Each is converted to the equivalent HEX, RGB, and HSL strings.
Does it handle alpha / transparency?: Yes. Four- and eight-digit hex, rgba(), and hsla() all carry an alpha channel. When alpha is below 1 the output uses the #rrggbbaa, rgba(), and hsla() forms, and the swatch is shown over a checkerboard so partial transparency is visible.
Why do HSL values sometimes shift by one when I round-trip a color?: HEX, RGB, and HSL do not map one-to-one. HSL is derived from 8-bit RGB and rounded to whole degrees and percentages, so converting HSL to RGB and back can differ by a unit. This tool rounds consistently and treats RGB as the source of truth for lossless HEX and RGB output.
Is my color data sent anywhere?: No. All parsing and math run entirely in your browser with plain JavaScript and Web APIs. There are no network requests and no analytics on your input, so it is safe to use with brand or internal palette values.
Can I use the native color picker?: Yes. Click the swatch to open your operating system color picker; the text field updates to the chosen HEX. Type into the text field and the swatch and picker follow along.