Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:
Relative color syntax, e.g.
background-color: hsl(from var(--theme-primary) h s 90%);
background-color: hsl(from var(--theme-primary) h s 80%);
background-color: hsl(from var(--theme-primary) h s 70%);
CSS color-contrast, e.g.
color: color-contrast(var(--theme-primary) vs white, black);
CSS color-mix, e.g.
color: color-mix(var(--theme-primary), black 10%);
color: color-mix(var(--theme-primary), black 20%);
When embedding a GitHub Gist using a script tag, its contents gets injected into your page’s DOM. As the injected wrapper node has a .gist class, it’s perfectly possible to customize the appearance on your own site. Will Boyd walks us through it.
Will also created a repository with several pre-built themes. Simply add one of the CSS files to your page, and you’re good to go.
In CCS there are several ways to notate color values. Basically we have three options:
Using a Keyword: e.g. black
Hexadecimal Notation: e.g. #000000, #000, and #000000FF
Functional Notation: e.g. rgb(0, 0, 0), rgba(0, 0, 0, 1)(and the hsl()/hsla() variants)
The CSS Color Module Level 4 specification adds an extra variation to the Functional Notation: it allows you to separate the individual RGB (or HSL, etc.) values using spaces instead of commas, e.g. rgb(0 0 0);.
rgb(), rgba(), hsl(), and hsla() have all gained a new syntax consisting of space-separated arguments and an optional slash-separated opacity.
Above that rgba() has become an alias for rgb(), so our colors in CSS – using the Functional Notation – will soon look as follows:
The input type colour supports the list attribute, which allows you to define a preset list of options. The colours need to be defined as hexadecimal colours. They can be defined as values or text inside the option tags, but the values take precedence.
Pictured at the top of this post is how Chromium-browsers render the following snippet:
When diving you’ll notice that the colors start acting up: everything will become more washed out (and look more green/blue) from the moment you look down in the water, and everything will become darker as you descend. Colors like red go first: at a depth of 10m it looks brown. To correct this, underwater photographers like myself use red filters or software in post-production. The cleverly named “Sea-Thru” is an algorithm that can do this automatically:
Sea-thru’s image analysis factors in the physics of light absorption and scattering in the atmosphere, compared with that in the ocean, where the particles that light interacts with are much larger. Then the program effectively reverses image distortion from water pixel by pixel, restoring lost colors.
Here’s a comparison gif:
It comes with one big caveat though:
One caveat is that the process requires distance information to work.
I’m pretty sure that you’ll only need to do this once per type of water. With my own GoPro it usually takes me a dive or two to get my settings right and then I can continue on using with the same settings (at the same location and under the same conditions)
While there are an increasing number of good color palettes out there, not all of them are applicable to charts and data visualizations. Our approach to visualization color palettes is to make natural gradients that vary in both hue and brightness. By doing this, our palettes are accessible by people who are color blind, obvious for others, and works with anywhere from one to twelve data series.