Color Converter

About Color Formats

HEX is the most common format for the web. A six-digit code like #1a73e8 encodes red, green, and blue channels as two hexadecimal digits each (00–FF).

RGB expresses the same channels as decimal numbers (0–255), making it easier to adjust values programmatically: rgb(26, 115, 232).

HSL stands for Hue, Saturation, Lightness — a human-readable model. Hue is 0–360°, saturation and lightness are percentages: hsl(214, 82%, 51%). HSL is ideal for generating color scales by varying lightness.

One Color, Worked Through

Take #1a73e8. Each pair of hex digits is one channel: 1a = 26, 73 = 115, e8 = 232, so the RGB value is rgb(26, 115, 232).

For HSL, scale the channels to 0–1 and find the largest (0.910, blue) and smallest (0.102, red):

• Lightness = (max + min) / 2 = 0.506 → 51%
• Saturation = (max − min) / (2 − max − min) = 0.817 → 82% (this form applies when lightness is above 50%)
• Hue: blue is the largest channel, so hue = 60 × ((R − G) / (max − min) + 4) = 214.1 → 214

The tool shows hsl(214, 82%, 51%). The formulas are the ones in CSS Color Module Level 4.

Second Example: From an RGB Value

Paste rgb(255, 87, 51) into the RGB field. The tool fills in #ff5733 and hsl(11, 100%, 60%). Now type hsl(11, 100%, 60%) into the HSL field: the HEX field changes to #ff5833, one step off in the green channel, because the true hue is 10.6° and the true lightness 60.0%, and the rounded 11° moves green from 87 to 88. The same thing happens with the short form: #f53 expands to #ff5533, which is a different color from #ff5733 and reads as hsl(10, 100%, 60%).

Two exact cases are useful for checking any converter: CSS green is #008000 = rgb(0, 128, 0) = hsl(120, 100%, 25%), and white is hsl(0, 0%, 100%) whatever the hue.

What the Fields Accept

• HEX: 3 or 6 digits, with or without #, any letter case. The other fields update once you have typed 3 or 6 digits; while you type 4 or 5 digits they keep the last color, and more than 6 digits is rejected.
• RGB: the comma form rgb(r, g, b) with whole numbers from 0 to 255; nothing but an alpha value and ) may follow, apart from a final ;. rgba(...) is read, but the fourth value is dropped. Percentages (rgb(10%, 45%, 91%)), decimals and the space-separated form are rejected.
• Function names are read in any letter case, so RGB(26, 115, 232) works.
• HSL: the comma form hsl(h, s%, l%); decimals are allowed and the % signs are optional. A hue above 360 wraps around the circle (hsl(480, 100%, 25%) is the same green as 120), and saturation or lightness outside 0–100% is clamped, as CSS Color 4 §7 specifies. Angle units such as 214deg and negative hues are rejected.

A rejected value, such as rgb(26 115 232), shows Invalid color format in the status line and empties the other two fields, so Copy cannot pick up an old or wrong value.

Text after a complete value is not ignored: rgb(26, 115, 232)abc shows Invalid color format: remove the extra text after the color values. An alpha value, the closing parenthesis and spaces are the only things allowed after the three numbers, so a value you are still typing, such as rgb(26, 115, 232, converts as soon as the third number is there.

A value copied from a stylesheet may keep its ; or sit in quotes; both are removed before reading, so rgb(26, 115, 232); gives #1a73e8 and hsl(214, 82%, 51%).

Full-width input is read through NFKC normalization first, as in the other color tools on this site, so ＃１Ａ７３Ｅ８ converts to rgb(26, 115, 232) and hsl(214, 82%, 51%). When you leave the field, its text is replaced by the ASCII form (#1A73E8), so Copy gives a value you can paste into CSS.

The space-separated syntax rgb(26 115 232 / 50%) is valid CSS and works in Chrome 65, Firefox 52 and Safari 12.1 and later (MDN browser compat data), but this tool does not parse it. For that syntax, oklch(), and colors picked from an image or the screen, use the color picker; to build a scheme around one color, use the color palette generator.

Limits

• No transparency. 8-digit hex (#1a73e880) is rejected, and the alpha in rgba(26, 115, 232, 0.5) is ignored.
• HSL is rounded to whole numbers. Typing hsl(214, 82%, 51%) gives #1c74e9, not #1a73e8, because the rounded values no longer point at the exact original color. Keep the HEX value as the source of truth.
• Three formats only: HEX (3 or 6 digits; #abc expands to #aabbcc), RGB, and HSL. HSB/HSV, HWB, and OKLCH are not supported.