Select Page

Category: color

Re: Pleasing Color Palettes

There are so many tools out there to help you pick colors. I totally get it! It’s hard! When colors are done well, it’s like magic. It adds a level of polish to a design that can really set it apart. Let’s look at some, then talk about this idea some more. Here’s one I just saw called Color Koala: It spits out five colors at ya and you’re off to the races. Hue will give you some too. There’s a billion more, and they vary in approach and features, of course. Here’s a handful:

Read More

Converting Color Spaces in JavaScript

A challenge I faced in building an image “emojifier” was that I needed to change the color spaces of values obtained using getImageData() from RGB to HSL. I used arrays of emojis arranged by brightness and saturation, and they were HSL-based for the best matches of average pixel colors with the emojis. In this article, we’ll study functions that will be useful for converting both opaque and alpha-enabled color values. Modern browsers currently support the color spaces RGB(A), hex, and HSL(A). The functions and notations for these are rgb(), rgba(), #rgb/#rrggbb, #rgba/#rrggbbaa, hsl(), and hsla(). Browsers have always supported...

Read More

What do you name color variables?

What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?I’ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. ☹️ — Lea Verou (@LeaVerou) October 14, 2018 I remember the very first time I tried Sass on a project. The first thing I wanted to do was variablize my colors. From my naming-things-in-HTML skillz, I knew to avoid classes like .header-blue-left-bottom because the color and position of that element...

Read More

HSL() / HSLa() is great for programmatic color control

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it. Hue: Think of 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. Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color). Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. 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 sense of what is going to happen. Change the hue to take a trip around the color wheel. Change the saturation to get deeper or more muted colors. Change the lightness to essentially mix in black or white. You might have some mental chops with rgb(), knowing that rgb(255, 0, 0) is clearly red or rgb(0, 0, 0) is black, but manipulating those to get to a light purple or starting with a forest green and getting a little lighter isn’t exactly mental math. You might...

Read More

V6: Color

This is a lovely little post by Rob Weychert about color theory, hierarchy and how to implement those colors in a design system. It’s particularly interesting hearing what Rob has to say on HSL, which is an alternative way of setting the color of an element in CSS: For color adjustment, HSL brings a level of granular control to the process that other color systems lack. And for implementation, Sass lets me assign color values to variables, which make system-wide iteration quick and painless. Direct Link to Article — Permalink V6: Color is a post from CSS-Tricks...

Read More