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 […]
Tag Archives: color
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 […]
CSS Color Names Game
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: Named Colours → Related: Crayon.css – Because colors have a name →
CSS Text Color as the Inverse Background Color
Check out this Pen! 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. Reverse Text Color Based on Background Color Automatically in CSS →
Crayon.css – Because colors have a name
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. Crayon.css →
Computer Color is Broken
randomColor – A color generator for JavaScript
There are lots of clever one-liners for generating random colors: ‘#’+Math.floor(Math.random()*16777215).toString(16); Unfortunately, this code naturally produces lots of greys and browns and murky greens. randomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art. The result pictured […]
Adaptive Backgrounds
A jQuery plugin for extracting dominant colors from images and applying it to its parent Just set a data-* attribute on an img, and call the plugin: <img src="/image.jpg" data-adaptive-background="1"> jQuery(document).ready(function($) { $.adaptiveBackground.run() }); Adaptive Backgrounds →
Colorpeek
Colorpeek is a tiny web app for quickly seeing and sharing CSS colors. The additional Chrome extension can parse colors from three different sources: selections, images, and websites Colorpeek →Colorpeek for Chrome →