AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Simple gradient css backgrounds4/6/2024 ![]() Need to use one of these gradients in your design app – e.g. (Also: I’m often asked about the difference between HSB and HSL) Also, notice the pink “band” in the HSL gradient above – that’s essentially a little spike in brightness caused by artifacts of using a non-perceptual color system. Nonethless, sometimes it’s worth seeing both. HSL (hue-saturation-lightness): HSB and HSL will often be very similar, particularly in bright gradients.HSB is a fantastic color system for designers, and I’ve written a comprehensive guide to HSB. In particular, if your LCH gradient has an ugly brown-yellow in it, try checking out the HSB version. HSB (hue-saturation-brightness): While not perceptually uniform, sometimes HSB will offer a more interesting (and vivid) take on a gradient between two stops.(Note: the perceptually uniform nature of LCH also makes it great for data visualization color palettes) If you were to view the gradient in grayscale, you’d see only a smooth transition from a lighter to a darker gray – preventing the awful “banding” that you’ll see in some hand-picked gradients. ![]() LCH (luminance-chroma-hue): The default choice of this tool, LCH is an amazing color system that not only creates beautiful, rich gradients across a wide range of hues, but does so in a perceptually smooth way.Design apps, online gradient tools, and even CSS all fail in this regard – so I made this tool! Color Gradients in LCH, HSB, and HSLĬurrently, you can create gradients in 3 different color systems in this tool, which yield slightly different results. This avoids the line of gray that goes through the center of every color space. Or, to be more accurate/geeky: we interpolate the gradient in a hue-based color system, such as LCH, HSB, or HSL (not RGB) □. Put simply: to get a gradient that avoids the dreaded gray dead zone ☠️, you don’t draw a straight line from A to B, you draw a biiiig curve. Why is this worth a ridiculously ominous emoji? Because it means your gradients look like this: Color geeks: this is a slight approximation, since we’re squishing a cross-section of a cube into a circle. When you try to create gradients across a wide range of hues, you often will see a gray dead zone ☠️™ in the middle of your gradient. Why this gradient generator is better than others
0 Comments
Read More
Leave a Reply. |