Discover more from hrbrmstr's Daily Drop

A digest of all the interesting data, packages, blogs and papers covering lots of programming languages, CLI utilities, cybersecurity, data visualization, data science, web-scraping and more!

Drop #304 (2023-07-27): In Living Color

Oklachroma; Huemint; SpecularCSS

boB Rudis

Jul 27, 2023

Today’s Drop is hyper-focused on color. It's also the start of an experiment!

To try to make these editions as useful as possible to the widest audience, I'm introducing a new top-level section that contains an AI-generated, super-short summary and primary resource link of each section. This is primarily for the “just give me the links, boB” folks (I know you're out there!). I'll include the AI tool used for the summary each time.

If so inspired, def Drop a comment with any feedback on this (i.e., is it useful? should I scrap it?).

In other news: WEBR v0.2.0-rc0 IS OUT!

TL;DR (Written by AI; GPT-4)

Oklachroma (OKLCH): A CSS color notation offering improved color manipulation, wide-gamut P3 color support, and better readability. It is compatible with CSS, SVG, HTML and certain JavaScript libraries.
Huemint: AI-powered tool that generates context-specific color palettes and identifies suitable background, foreground, and accent colors.
SpecularCSS: An open-source CSS framework providing attractive material styling options with five types: Flat, Chalk, Plastic, Glass, and Metal.

Oklachroma

OKLCH is a “new” color notation introduced in CSS Color Module Level 4 that uses lightness, chroma, and hue values closer to how we humans perceive color. This innovative color notation offers several advantages over traditional color notations like RGB and HSL, making it an ideal choice for web designers, developers, and folks involved in data visualization. I scare quoted “new” since this notation has been around a bit, but it's finally taking off now that virtually every browser supports it.

There are two information resources that I found super helpful in groking how OKLCH works:

and I'll summarize said groking here, but 100% encourage folks to check those out. The resource first bullet is tailor-made for quick consumption, but I think y'all will 💙 the deeper prose dive of the second one.

OKLCH TL;DR (stolen from the first resource):

In oklch(L C H) or oklch(L C H / a) each item corresponds as follows:

L is perceived lightness (0%-100%). “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl().
C is chroma, from gray to the most saturated color.
H is the hue angle (0-360).
a is opacity (0-1 or 0-100%).

From digesting these (and a few other) resources, here are the core advantages of OKLCH:

better color manipulation and modification: OKLCH allows for more predictable results when manipulating and modifying colors compared to other color notations.
wide-gamut P3 color support: OKLCH can be used to specify wide-gamut P3 colors for newer displays that can show more colors.

Before continuing with a summary list, I'm holding myself to the “explain wonk technical things” rule I've mentioned a few times in previous Drops.
The general term “gamut” refers to complete range or scope of something. I suspect every reader knows this, but it's good to start with the general definition.
“Gamut”, in the context of color representation in digital displays and printing, is the entire range of colors that a device like a computer monitor or a printer can produce, or that a camera can capture. Different devices can produce or capture different ranges of colors, so they have different gamuts.
One reason why some color pickers have a crayon box selector is that it provides a skeuomorphic analogy for selecting from a constrained gamut. i.e., A small box of crayons might only have 8 different colors (so, a small gamut). A bigger box might have 64 different colors (i.e., a larger gamut).
“Wide-gamut” is a term used to describe devices or color spaces that can represent a larger range of colors than standard devices or color spaces. The goal of a wide-gamut device is to show or print colors that are closer to what we see in real life.
To go back to the crayon box analogy, a “wide-gamut” box of crayons would have hundreds or even thousands of different colors, letting you draw pictures that are more detailed and more vibrant than with a smaller box.
Why does this matter? In photography, design, digital art, data visualization, and similar fields, a wider gamut can allow for more precise and vibrant colors, making images more lifelike and more accurately representing the artist's intent.
Now, back to the list…

improved readability: OKLCH has better readability compared to hex or RGB notations since its values correspond to lightness, chroma, and hue that humans can intuitively understand. The second resource has a wonderful walkthrough of this that I won't steal, so please check it out!
consistent lightness value: OKLCH has a predicted lightness value that remains consistent across hue axes, making it suitable for accessibility and color modifications.
design system palette generation: OKLCH can be used to generate an entire design system palette in CSS with consistent contrast and accessibility.
native color manipulation: CSS Color Module Level 5 will work best with OKLCH due to its predictable lightness.
fallback support: Some OKLCH color combinations may not be displayable on current monitors, but browsers will render the closest supported color.
compatibility: OKLCH can be used to specify colors in CSS, SVG, and HTML. Polyfills exist only for CSS.
javascript libraries: Libraries like Color.js and culori can be used to manipulate colors in the OKLCH space in JavaScript. Thomas Lin Pedersen's farver package lets R folks work with OKLCH as well.

You can play with the OKLCH color space, and convert between spaces via this pretty cool online tool.

Given that folks seem to want to pronounce OKLH as Oklachroma, I had no choice but to ask Llama-2-70b to whip up what the chorus line from “Oklahoma” might look like for this handy color function:

OOOOOO-klachroma — Where the colors blend in perfect harmony.
A world of hues, a world of shades, In this CSS model, all are displayed!

Not bad!

The section header is a 3D view of the OKLCH color model.

I don't think I'm the only one who finds it challenging to select the “perfect” color palette for a given project/task. Thankfully, there are a plethora of palette generators out there, but that's all they do: generate colors. We still need to figure out how and where to use them.

Huemint is an attempt to help with this “how”. It's an AI-powered color palette generator that uses machine learning to create unique and context-specific color schemes for whatever it is we're applying a color scheme to. It “intelligently” determines which colors are meant to be the background, foreground, or accent colors, providing more precise and intuitive color choices.

The site offers a variety of design templates, so you'll get to see how any given generated palette will look in, say, a logo mockup, website, or illustration. You can even upload an image to it, say a data visualization you've made in R with ggplot2 — and it will identify the colors and let you cycle through generated palettes. Note that this doesn't work as well as the built-in use-cases, but it may be useful for some folks.

The section header is a view of the Huemint workspace.

I did and will likely not see the pink-filled movie that has been the talk of the intertubes for the past few months. While it may have created a pink paint shortage, it also seems to have inspired some folks to apply some design elements from the “Barbie ecosystem” to web development.

SpecularCSS (GH) is an open-source CSS framework that allows developers to add attractive material styling to their websites. Fundamentally, it's based on a physical lighting model and written in (ugh) SASS, and aims to make it easy for developers to integrate the resultant CSS into their projects and create spectacular-looking websites.

SpecularCSS offers five material types for creating user interface elements:

For detailed documentation on how to use SpecularCSS, you can visit the official docs website. It provides comprehensive information on how to integrate SpecularCSS into your project and create stunning UI elements using the available material types.

FIN

I believe I’ve used up my Drop “pink” quota for the year with this edition. ☮