Color Converter

HEX, RGB, and HSL: Three Views of One Color

Every color you see on a screen is really just three numbers: how much red, how much green, and how much blue light the pixel emits. HEX, RGB, and HSL are three different ways of writing those numbers down. They describe the same colors, so nothing is lost when you convert between them. You are only changing the notation, not the color.

A HEX code is nothing more than RGB written in base 16. HSL is the odd one out: instead of red, green, and blue amounts, it remaps the color into hue, saturation, and lightness, a cylindrical arrangement that people tend to find far more intuitive when they want to nudge a color rather than define it from scratch. Want a slightly lighter version of a blue? In HSL you bump the lightness a few percent and leave the hue alone. In raw RGB that same tweak means juggling three values at once.

How a HEX code is built

A six digit HEX code carries two hex digits per channel, in red, green, blue order. Two hex digits cover 00 to FF, which is 0 to 255 in decimal, exactly the range each RGB channel uses. So HEX and RGB are not just related, they are the same numbers in a different base.

Worked example: converting #2563EB

Split the code into three pairs, then convert each pair from base 16 to decimal:

When to Reach for Each Model

None of the three is better than the others, they just suit different jobs. Reach for HEX in CSS and design handoff, where a single compact token like #2563EB is easy to paste into a stylesheet or drop into a Figma swatch. Reach for RGB when you are writing code that manipulates pixels, such as a canvas fillStyle, image processing, or anywhere you need the raw channel numbers to do arithmetic on them.

Reach for HSL when you are adjusting colors programmatically. Building a hover state that is ten percent darker, generating a palette of tints from one base color, or spinning the hue around the wheel are all trivial in HSL and awkward in the other two. Because these tools convert instantly, a common workflow is to design in HEX, then flip to HSL to generate the variations you need.

Adding transparency with alpha

Each model has a version that carries an alpha (opacity) channel. HEX gains two more digits to become an eight digit code, where the last pair is the alpha from 00 (transparent) to FF (opaque). RGB becomes rgba() with a fourth value from 0 to 1, and HSL becomes hsla() the same way. So rgba(37, 99, 235, 0.5) is that same blue at half opacity.

Named Color Reference

CSS ships with a set of keyword colors you can write by name instead of a code. They map to exact HEX and RGB values, so the table below is handy when you want to sanity check a conversion or reach for a familiar color without opening a picker.