🌈 Colors
This month's IndieWeb Carnival host is Marisabel Munoz and her chosen theme is colors:
I want to hear about your colors:
- What shade lives in your bones?
- When has color saved you?
- Do you dream in technicolor or monochrome?
- What colors define your homeland? Your life?
- Any meaning color might have in your life!
Having recently designed this site, and with continued tinkering, I've been thinking about colors a lot lately. Let's dive in!
What shade lives in your bones?
Well, violet, obviously!
Violet lives at one end of the visible spectrum, and I've always been drawn to things that dwell on an edge. I came up with the name "VioletPixel" when I was reading about colors and learned that RGB displays can't actually produce violet light. Due to the way our eyes perceive color, a combination of blue and red tricks us into seeing violet, so that's what displays do: they combine a mix of blue and red to make something that looks violet to us.
To produce actual violet, a display would need a violet-emitting component alongside the red, green, and blue sub pixels. A violet pixel, if you will.
Runner up: magenta. Where violet is a real color that exists on the visible spectrum, magenta is a fake, an invention of our physiology. Magenta is what our brains came up with to represent a combination of the two opposite ends of the visible spectrum, which makes it an extra-spectral color that only exists in our imagination.
I find this stuff fascinating!
When has color saved you?
Most recently, with the design of this site.
I wanted this place to feel fun, interesting, and human, but my initial designs all felt too bland, too serious. The revelation came when I realized I could leverage the CSS oklch() color function to play with colors in ways that weren't practical on the web until recently.
The oklch() function uses the Oklab color space, which is designed for human perceptual uniformity. The function takes lightness, chroma, and hue values, and because of that perceptual uniformity, I don't have to worry about the perceived brightness of a color changing just because the hue changed.
With other color models and functions that aren't perceptibly uniform, like RGB and HSL, changing one component means the resulting color might be perceived differently than you intend. A change to hue, for example, will change the color, but may also change the perceived brightness as well (green hues in RGB/HSL are perceived as brighter than blue hues, for example).
Those color spaces made it impractical to do things like pick an arbitrary color component without throwing something else off. For a long time that's what we had to use, though. Now, with oklch() having baseline compatibility, a lot of doors have suddenly flung open.
On this site, I've defined various CSS variables for lightness, chroma, and hue which are used to define the colors for things like text, backgrounds, and other bits. The fun part is, for every post, I define a different hue. For link posts, I usually use a color picker to get the predominant hue from the thing I'm linking to, so there's a bit of a through line from my post to the site I'm sending you to. For other posts, I usually select a hue based on vibes, or I grab a hue from the emoji I select for the post.
With oklch(), I can rest assured knowing the perceived brightness and saturation of the colors in each post remain perceptually uniform; only the hue will change. Thus, each post has a bit of character, the site as a whole is a bit of a rainbow, and it all happens with minimal extra effort while maintaining accessibility and aesthetic beauty.
Do you dream in technicolor or monochrome?
I dream in color, insofar as I can remember dreams where color played an important role.
One thing I can't do, or can barely do, is see things in my mind's eye. It seems most people can, and it might be something I can train myself to do with a technique called image streaming, but I haven't gotten around to trying it yet.
What colors define your homeland? Your life?
I grew up in the desert of Phoenix, Arizona, so lots of tans, browns, and some desaturated greens. And, of course, the pale blue of the cloudless skies. The harsh sun bleaches everything; vivid hues are quickly transformed into faded ghosts of their former selves.
I'm over it.
Give me the rich, lush greens of a landscape full of life! Give me the deep, dark grays and blues of a cloudy sky! Give me the varied palette of paints and finishes and materials that have a chance to thrive in the absence of unrelenting UV rays!
(We're planning to move to the Pacific Northwest soon.)
Any meaning color might have in your life!
Color is a wonderful thing. A feast for the eyes. A playground for designers. A representation of diversity for minorities. A celebration of the gift of sight.
I often think of color as a visual soundtrack. Just as the music in a movie swells, flows, and encourages us to feel more deeply, so too can color.
Every time I get the opportunity to conduct the orchestra of the rainbow, I consider it both a delight and a privilege.