Home Color converter

Color converter

#RGB doubles each digit into #RRGGBB. #ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). The color stays in this browser.

Why this exists

A design and a stylesheet write the same color as #ff0000, rgb(255, 0, 0), or hsl(0, 100%, 50%).

Stretching short #abc to six digits and then rounding HSL to whole numbers can move a channel by 1.

  1. 01How to use it

    Edit HEX, RGB, or HSL and the other two fields and the swatch follow.

    The swatch paints that hex as its background. Copy puts the hex, rgb(), and hsl() lines on the clipboard.

    Closing the tab clears the color. This page does not read an alpha channel.

  2. 02What you get

    #ff0000, #00ff00, and #0000ff are hsl(0, 100%, 50%), hsl(120, 100%, 50%), and hsl(240, 100%, 50%), and each returns to the same hex.

    #fff is #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%). #000000 is hsl(0, 0%, 0%).

    Entered#ff0000

    #ff0000 rgb(255, 0, 0) · hsl(0, 100%, 50%)
    #00ff00 rgb(0, 255, 0) · hsl(120, 100%, 50%)
    #0000ff rgb(0, 0, 255) · hsl(240, 100%, 50%)
    #abc #aabbcc · back to #a9bacb

  3. 03Worth knowing

    Hue 360 is the same as 0. hsl(360, 100%, 50%) is #ff0000.

    Gray #808080 has saturation 0, so the hue comes out as 0. Lightness 50% returns to 128, 128, 128.

    A channel outside its range, or a decimal, shows an error for that field and the last color is not copied.

    This conversion is sRGB on a screen. It does not produce print CMYK.

Questions

QIs #f00 the same as #ff0000?
AYes. Each digit is written twice, which makes #ff0000.
QDoes HSL from #abc return the same hex?
ANo. hsl(210, 25%, 73%) comes back as #a9bacb.
QCan an 8-digit hex be read?
ANo. Only #RGB and #RRGGBB are read.
QIs the color saved?
ANo. It stays in this browser and is not sent to a server.

How this page works it out

This page turns HEX, RGB, and HSL into the same sRGB color. #RRGGBB writes red, green, and blue as two digits. #ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). #00ff00 is hue 120, and #0000ff is hue 240. #RGB doubles each digit. #abc becomes #aabbcc, which is rgb(170, 187, 204) and hsl(210, 25%, 73%).

HSL uses the same conversion as CSS, and the screen rounds hue, saturation, and lightness to whole numbers. Going back through those whole numbers can move a channel by 1. hsl(210, 25%, 73%) from #abc returns #a9bacb. #808080 is rgb(128, 128, 128) and hsl(0, 0%, 50%), and it returns to #808080. Hue 360 is the same as 0, so hsl(360, 100%, 50%) is #ff0000.

Each RGB channel is a whole number from 0 to 255. Saturation and lightness run from 0 to 100. An 8-digit hex and a decimal are not read. A value outside its range shows an error for that field, and the last color is not copied. This conversion is sRGB on a screen and does not produce print CMYK. The color stays in this browser and is not sent to a server.

  • # color
  • # hex
  • # rgb
  • # hsl