RGB, HSL, HEX, and OKLCH: Why There Are So Many Color Formats and When to Use Each

I once spent twenty minutes trying to make a color 20% lighter. The original color was #3498DB (a medium blue). I tried adding 20% to each RGB channel: 52+51=103, 152+51=203, 219+51=255. The result, #67CBFF, was lighter but also more saturated and shifted slightly toward cyan. What I wanted was the same blue, just lighter. I was modifying the wrong color model for the job. Different color formats exist because they describe color from different perspectives, and some perspectives make certain operations trivial that are nightmarish in others. RGB: how screens see color RGB (Red, Green, Blue) describes color by how much of each light primary to emit. It maps directly to hardware: every pixel on your screen is a cluster of red, green, and blue subpixels. color : rgb ( 52 , 152 , 219 ); /* functional notation */ color : #3498 DB ; /* hex notation (same color) */ color : rgb ( 20 . 4 % 59 . 6 % 85 . 9 %); /* percentage notation */ Hex notation is just RGB in base-16. #3498DB breaks down as