Handitab

Color Converter

Convert a color between HEX, RGB, and HSL notation, including alpha values, by entering any CSS color code and copying the others.

About Color Converter

HEX, RGB, and HSL are three notations for the same sRGB colors. HEX writes the red, green, and blue channels as two hexadecimal digits each, RGB writes them as numbers from 0 to 255, and HSL describes hue in degrees with saturation and lightness in percent. This tool parses any of the three, including alpha, and prints all of them. HSL values are rounded to whole numbers, so converting back can differ by one step.

Also known as: HEX to RGB, HEX to RGB Converter, HEX to RGB Calculator.

How to use Color Converter

  1. Fill in "Color".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Color Converter

How do you convert HEX to RGB by hand?

Split the six digits into three pairs and convert each pair from base 16 to base 10. For #059669, the pair 05 is 5, 96 is 150, and 69 is 105, which gives rgb(5, 150, 105).

What do the last two digits of an 8-digit HEX color mean?

They are the alpha channel, from 00 (fully transparent) to FF (fully opaque). For example, 80 is 128 out of 255, or about 50 percent opacity. A 4-digit code is the shorthand form.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Color MixerMix two colors in any ratio from 0 to 100 percent and get the blended color as HEX, RGB, and HSL codes, calculated channel by channel.Color PickerPick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.Color Shades GeneratorGenerate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.