RGB to HSL converter

Turn rgb() values into hsl().

CSS name: seagreen

#2E8B57

Contrast 4.2:1 on white, 4.9:1 on black

HEX
RGB
HSL
HSV
CMYK

Click any value to copy it.

Runs in your browser. Nothing uploaded.

How to convert RGB to HSL

  1. Type the RGB value into Color: rgb(46, 139, 87), or just the three numbers with commas between them.
  2. The HSL value shows on the right next to HEX, HSV and CMYK.
  3. Click the HSL value to copy it as hsl(146, 50%, 36%).

Why designers like HSL

RGB says how much red, green and blue light to mix, which is how a screen works but not how people think about color. HSL describes the same color as a hue on a 360° color wheel, a saturation from gray (0%) to full color (100%) and a lightness from black (0%) to white (100%).

That makes changes easy to reason about. To make a button color darker for its hover state you lower the lightness and leave the rest alone. To build a set of matching tints you keep the hue and saturation and step the lightness up. In RGB the same change means adjusting all three numbers at once.

Using HSL in CSS

Every current browser accepts hsl(146, 50%, 36%) and the newer space-separated form hsl(146 50% 36%). Both mean the same color. The HSL row copies the comma form, which also works in older browsers and most design tools. For the reverse direction, type an hsl() value into the color converter and copy the RGB row.