HEX, RGB and HSL Color Converter

CSS accepts colors in several notations. Designers often work in HEX while developers need RGB or HSL for calculations.

Paste a color in any of these formats and get the others instantly, with a swatch so you can check it.

Key features

• HEX (3, 4, 6 and 8 digit), RGB and HSL input
• Alpha channel support
• Color swatch preview
• Instant conversion

Example

#ff8800  =  rgb(255, 136, 0)  =  hsl(32, 100%, 50%)

How to use

1. Paste a color value.
2. See the HEX, RGB and HSL equivalents.
3. Copy the one you need.

Use cases

• Translating design tokens into CSS
• Adjusting lightness or saturation with HSL
• Checking colors from brand guidelines

In depth

HEX, RGB and HSL describe the same sRGB colors in different ways. HEX is base-16 shorthand for red, green and blue channels, each from 0 to 255, so ff8800 means 255, 136 and 0. HSL re-expresses that as hue in degrees around the color wheel, saturation as a percentage, and lightness as a percentage. Converting from RGB to HSL involves finding the largest and smallest channel, taking their average for lightness, and deriving hue from which channel dominates.

Short HEX forms double each digit, so #f80 expands to #ff8800, and the eight-digit form appends two digits for alpha, where 80 is roughly 50 percent opacity. Because HSL is rounded to whole numbers here, converting an HSL value back to RGB can differ by one step in a channel. That is harmless visually, but if you need exact brand values, store the HEX or RGB original. HSL is convenient for building tints and shades by changing only lightness.

Tips

• Keep the original HEX as your source of truth. Rounded HSL values converted back to HEX can drift by one unit, which matters when matching a brand palette exactly.
• Use HSL when you want a lighter or darker version of a color. Changing only the lightness percentage keeps the hue consistent, which is far easier than guessing new RGB numbers.
• Remember that eight-digit HEX puts alpha last, as in #RRGGBBAA. Some design tools and Android resources put it first, so check the order expected by your platform.

Related tools

• CSV to JSON Converter Convert CSV data into JSON array format instantly.
• CSV to Markdown Table Turn CSV or spreadsheet data into a Markdown table.
• Javascript Object to JSON Turn JS objects into valid JSON format online.
• Javascript Object to String Convert JS objects to URL query strings easily.
• JSON Stringify Convert JS objects or arrays into JSON strings online.
• JSON to CSV Converter Convert JSON data into CSV format for Excel or Sheets.
• JSON to TypeScript Interface Generate TypeScript interfaces from a JSON sample.
• JSON to XML Converter Convert structured JSON data into clean XML format.