This content originally appeared on DEV Community and was authored by Siddharth
I prefer hsl over rgb. It's really impossible to get colors manually using rgb (unless you have some paint and a palette near you). hsl(h, s, l)/hsla(h, s, l, a) is really easy to understand.
-
h- Hue: The hue. It's the only thing you actually need to know. Think of it like a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360. -
s- Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color). -
l- Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. -
a- Alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.
You can hand-manipulate any of those four values and have a decent idea of what's going to take place. Change the hue to take a journey around the color wheel. Change the saturation to get deeper or more muted hues. Change the lightness to essentially mix in black or white.
You may know what rgb(0, 0, 0) and rgb(255, 0, 0) is, but creating a sea blue and going a bit darker or getting a deep yellow isn't exactly math.
hsl is also easy to manipulate with JavaScript. You could create a color scheme from a hue by adjusting the saturation and lightness.
This content originally appeared on DEV Community and was authored by Siddharth
Siddharth | Sciencx (2021-06-03T09:16:39+00:00) Why `hsl` is better. Retrieved from https://www.scien.cx/2021/06/03/why-hsl-is-better/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.