Color Code Converter

What a Color Code Converter Does

A color code converter translates a single color between the three formats designers and developers use most: HEX, RGB and HSL. All three describe the exact same color on screen, just with different notation, so converting between them never changes how the color looks, only how it is written.

• HEX uses a hash followed by six hexadecimal digits in the form #RRGGBB, where each pair is a red, green or blue value from 00 to FF (0 to 255 in decimal).
• RGB lists the same three channels as decimal numbers, written rgb(R, G, B) with each value from 0 to 255.
• HSL describes color as Hue (0 to 360 degrees), Saturation (0 to 100%) and Lightness (0 to 100%), which is closer to how people think about color.

Because every web color maps cleanly between these systems, you can paste a value in one format and read it back in the others to match brand colors, fill CSS variables or fine-tune a palette.

How to Convert HEX to RGB

Converting HEX to RGB simply means reading each pair of hex digits as a base-16 number and expressing it in base-10. Hexadecimal digits run 0-9 then A-F, where A = 10 and F = 15. For a two-digit pair the formula is:

decimal = (first digit × 16) + second digit

Take #1E90FF. The red pair 1E = (1 × 16) + 14 = 30. The green pair 90 = (9 × 16) + 0 = 144. The blue pair FF = (15 × 16) + 15 = 255. So #1E90FF becomes rgb(30, 144, 255). To go the other way, divide each channel by 16; the quotient is the first hex digit and the remainder is the second.

How to Convert RGB to HSL

Converting RGB to HSL takes a few steps because HSL is not a simple per-channel mapping. First, divide each RGB channel by 255 so the values fall between 0 and 1. Then find the maximum and minimum of the three, and let the difference be delta.

• Lightness = (max + min) / 2.
• Saturation = 0 if delta is 0; otherwise delta / (1 - |2L - 1|).
• Hue depends on which channel is the maximum, then is multiplied by 60 to give degrees. If red is largest, Hue = 60 × (((G - B) / delta) mod 6); if green is largest, Hue = 60 × (((B - R) / delta) + 2); if blue is largest, Hue = 60 × (((R - G) / delta) + 4).

Finally express Saturation and Lightness as percentages. A pure gray has Saturation 0 and no meaningful hue, which is why grays look identical at any hue value.

Choosing the Right Format

Each format earns its place in a workflow. HEX is compact and the default in most design tools and CSS, making it ideal for storing or sharing exact brand colors. RGB is useful when you need numeric channels, want to add an alpha value with rgba(), or are working with image pixel data. HSL is the most intuitive for adjusting a color: nudge the lightness to make a tint or shade, or shift the hue to find a complementary color, all without guessing at hex digits.

A converter keeps these in sync so you can pick a color in whichever model feels natural and instantly get the others. When matching a value across formats, remember that HSL percentages are sometimes rounded, so converting HSL back to HEX may land on a value one or two units off the original. For exact reproduction, store the HEX or RGB value as the source of truth and treat HSL as the editing view.