The Color Converter translates one color across the three formats the web uses —HEX, RGB and HSL— all at once. Type the color in any of them (or pick it with the color picker) and you instantly get its exact equivalents, with a preview and a button to copy each value. Everything happens in your browser: nothing is uploaded to any server.

1. Type a color in the “Color” field in #rrggbb, rgb(r,g,b) or hsl(h,s%,l%) format.
2. Or click the color swatch on the left to pick it visually with your system's picker.
3. The result appears on its own after a short pause: the preview and the three equivalent values.
4. Click the copy icon next to any value to send it to the clipboard.
5. If the format is not recognized, the field turns red with a hint of the valid formats.

HEX (hexadecimal) is the standard format for CSS and web design. It starts with # and carries three pairs of hexadecimal digits (0-9, a-f) for red, green and blue, each pair from 00 to ff (0 to 255 in decimal). Example: #1a2b3c. It also accepts the 3-digit shorthand #abc, which expands by doubling each digit (#abc equals #aabbcc). The # is optional when typing.

RGB describes the color by its three components of light: Red, Green and Blue, each from 0 to 255. It is written rgb(r,g,b). Example: rgb(26, 43, 60). It is the additive model of screens: rgb(0,0,0) is black and rgb(255,255,255) is white.

HSL describes the color in a way that is more intuitive for the eye: Hue (0-360° on the color wheel: 0 red, 120 green, 240 blue), Saturation (0-100%, from gray to pure color) and Lightness (0-100%, from black to white). It is written hsl(h,s%,l%). Example: hsl(210, 40%, 17%). It is ideal for lightening, darkening or desaturating a color without changing its hue. The % symbol is optional when typing.

To the left of the field there is a native color picker from your system: click it to pick a color with your browser's wheel or palette and the field fills in on its own in HEX format. The preview box above the results shows the final color as-is, so you can check at a glance that it is the one you want.

Each value —HEX, RGB and HSL— has a copy icon on its right. When you click it, the full, already-formatted value (e.g. rgb(26, 43, 60)) goes to the clipboard and the icon shows a ✓ for a moment as confirmation.

In the toolbar you have Reset (clears the field), Export (downloads a .json with the color and its equivalents) and Import (restores a saved color). Also, the last color you typed is remembered automatically and reappears the next time you open the tool.