From Named Colors to HSL
Type a CSS color name into the tool above to convert it into Hue, Saturation, and Lightness. Because named colors are just aliases for specific RGB values, the tool first looks up the RGB coordinates for your word, and then calculates the HSL cylinder values from those channels.
Tweaking Standard Colors
CSS named colors are highly convenient, but they are static. If you are building a button and you want the background to be mediumseagreen, you might find that you need a slightly darker version of that exact color for the button's hover state.
You cannot write dark-mediumseagreen in CSS. Instead, you convert the named color to a format like HSL. mediumseagreen translates to hsl(147deg 50% 47%). To create your hover state, you simply copy that HSL value into your stylesheet and lower the lightness channel to 37%.
The "Gray" Quirks
When converting neutral named colors (like gray, silver, or white), you will notice the Saturation channel drops to 0%. Because there is no dominant color, the Hue angle becomes irrelevant. In CSS, a hue of 0deg is typically output for these achromatic colors by default.