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: 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%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …

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

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 …

Continue reading “Customizing GitHub Gist Embeds”

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 …

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

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 …

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

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 …

Continue reading “Color in UI Design: A (Practical) Framework”

Vibrant.js – Extract prominent colors from an image

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

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 …

Continue reading “Finding the Right Color Palettes for Data Visualizations”