A rather geeky/technical weblog, est. 2001, by Bramus
<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>“
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””
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”
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 →
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”
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 →
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 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 →
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 …
Continue reading “randomColor – A color generator for JavaScript”