Tag Archives: color

Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()

Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:

  1. Relative color syntax, e.g.

    .bg-primary-100 {
  background-color: hsl(from var(--theme-primary) h s 90%);
}
.bg-primary-200 {
  background-color: hsl(from var(--theme-primary) h s 80%);
}
.bg-primary-300 {
  background-color: hsl(from var(--theme-primary) h s 70%);
}
...

  2. CSS color-contrast, e.g.

    .text-contrast-primary {
  color: color-contrast(var(--theme-primary) vs white, black);
}

  3. CSS color-mix, e.g.

    .text-primary-dark {
  color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
  color: color-mix(var(--theme-primary), black 20%);
}

All three features are part of the the CSS Color Module Level 5 spec and are a very welcome addition.

Create a color theme with these upcoming CSS features →

Customizing GitHub Gist Embeds

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.

@import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/848d6580/stylesheets/monokai.css');

Customizing GitHub Gists →
Gist Syntax Themes →

Colors in CSS: Hello Space-Separated Functional Color Notations

In CCS there are several ways to notate color values. Basically we have three options:

  1. Using a Keyword: e.g. black
  2. Hexadecimal Notation: e.g. #000000, #000, and #000000FF
  3. 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:

/* Before: Comma-Separated Functional Color Notation */
div {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 1);
}

/* After: Space-Separated Functional Color Notation */
div {
  color: rgb(0 0 0);
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / 100%);
}

~

You should start writing your colors using this new syntax today, as:

  1. The syntax is already supported by all major browsers.
  2. New color functions – such as lab(), lch() and color() – will only support the space-separated syntax

Your preprocessor can take care of older browsers such as IE11 😉

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Limit the colors to choose from in <input type=”color”> with <datalist>

Christian Heilman:

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:

<input type="color" list="presets"></label>
<datalist id="presets">
  <option value="#cccccc">Grey</option>
  <option value="#ffffff">White</option>
  <option value="#6699cc">Blue</option>
</datalist>

In his article he continues with dynamically adjust the colors to choose from, based on the color palette of an uploaded image.

UPDATE 2020-04-27: Turns out it’s also possible to limit the options for datepickers and range sliders: datalist experiment. (via)

Limiting input type=”color” to a certain palette (from an image) →

Automatically correct color distortion in underwater photos with “Sea-thru”

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)

Scientific American: Sea-thru Brings Clarity to Underwater Photos →

Color in UI Design: A (Practical) Framework

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.

Color in UI Design: A (Practical) Framework →

Vibrant.js – Extract prominent colors from an image

vibrantjs

Usage is simple:

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.

Vibrant.js →

Finding the Right Color Palettes for Data Visualizations

1-wgvwormxteQ6jdT4De63Hg

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.

Finding the Right Color Palettes for Data Visualizations →