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 separate 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)
Erik D. Kennedy goes into detail on how to pick color variations for your designs:
Element states for example are variations on a single color, let’s take “blue”. The result isn’t best described as “a palette of 3 blues”. It’s one blue with variations.
But this begs the question: how do you actually modify a color to get good variations?
We’ll get there, but I want you to understand this stuff from the ground-up.
Spoiler: It’s not a matter of adding some white or black to the mix. It’s something entirely different.
var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
for (var swatch in swatches)
if (swatches.hasOwnProperty(swatch) && swatches[swatch])
console.log(swatch, swatches[swatch].getHex())
Works by reading in the image, placing it onto a <canvas> element, and then getting all pixel information from that canvas.
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.
So what color is “Oldlace” exactly? Is “FireBrick” red-ish, yellow-ish, or something in between? How green is “MediumSpringGreen”? Named Colours is a fun game to test your knowledge / to find out:
Set the color of the text to the opposite of the background – eg. rgb(255,0,0) becomes rgb(0,255,255) – and then use mix-blend-mode: difference; to make it all work.
Crayon.css is a list of css variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor, being it Stylus, Sass or Less.