#ff005a

= Red: 255
Green: 0
Blue: 90

HTML 3.2 colors

• #rrggbb Confusing and cryptic >:(
• Color names Mostly useless :'(

CSS 1 - 2.1 colors

• rgb() Better, but still confusing :/
• #rgb Shorter, but still confusing :/
• orange named color Are you kidding me?!

Simple JS “class” for RGB colors

function Color(rgba) {
	if (!(this instanceof Color)) return new Color(rgba);
	
	this.rgba = rgba || [0,0,0,1];
};

Color.prototype = {
	get rgb () { return this.rgba.slice(0,3) },
	set rgb(arr) {
		this.rgba = arr.concat(this.alpha);
	}
	
	get alpha () { return this.rgba[3] },
	set alpha (a) { this.rgba[3] = a }
}

var magenta = new Color([255, 0, 127, 1]);

var magenta = new Color();
magenta.rgb = [255, 0, 127];

// Example method
Color.prototype.invert = function () {
	this.rgb = this.rgb.map(function(c) {
		return 255 - c;
	});
};

Multiply

multiply: function(dest) {
	this.rgb = this.rgb.map(function(c,i) {
		return 255 * (this.rgb[i]/255) *
		             (dest.rgb[i]/255);
	});
}

var red = Color([255,0,0]),
    blue = Color([0,0,255]);
red.multiply(blue); // -> black

A color space has

Perceptual uniformity

when the perceptual similarity of two colors
is measured by the distance between them.

RGB is not perceptually uniform.

Neither is HSL, as it’s just a transformation of RGB.

Lightness != luminance

el.style.background = color;
el.style.color = color.lightness > 50?
                   'black' : 'white';

get lightness () {
	var max = Math.max.apply(Math, this.rgb),
	    min = Math.min.apply(Math, this.rgb);
		
	return Math.round((min + max)/2.55/2);
}

Relative luminance

get luminance () { // Formula from WCAG 2.0
	var rgb = this.rgb.map(function(c){
		c /= 255; // to 0-1 range
		return c < .03928 ? 
		         c / 12.92 : 
		         Math.pow((c+.055)/1.055, 2.4);
	});
	
	return 21.26 * rgb[0] + // red
	       71.52 * rgb[1] + // green
	        7.22 * rgb[2];  // blue
}

Color contrast

Color.prototype.contrast = function(color) {
	var l1 = this.luminance;
	var l2 = color.luminance;
	var ret = (l1 + .05) / (l2 + .05);
	
	return ret < 1? 1 / ret : ret;
};

CSS Color Level 3 additions

• hsl() Better, but not great :/
• rgba() and hsla() Badly needed :)
• MOAR Color names Mostly useless :'(
• currentColor Cool, but limited :)

gray() with SASS

@function gray($l, $alpha: 1) {
  @return rgba($l, $l, $l, $alpha);
}

background: gray(50%); /* → #7f7f7f */
background: gray(255, .2); 
       /* → rgba(255, 255, 255, 0.2); */

hwb() with SASS

@function hwb($hue, $w, $b) {
	$base: hsl($hue, 100%, 50%);
  
	@return $base * (1 - ($w + $b)/100%)
	        + 255*$w/100%;
}

body {
  background: hwb(335, 20%, 20%); // #cc3372
}

hwb() with SASS

@function hwb($hue, $w, $b) {
	$base: hsl($hue, 100%, 50%);
  
 @if ($w + $b > 100%) {
	$factor: 100%/($w + $b);
	$w: $w * $factor;
	$b: $b * $factor;
}
  
	@return $base * (1 - ($w + $b)/100%)
	        + 255*$w/100%;
}

color() adjusters

tint & shade in SASS

@function tint($color, $amount) {
	@return mix(white, $color, $amount);
}
@function shade($color, $amount) {
	@return mix(black, $color, $amount);
}

background: tint(red, 10%); /* → #ff1919 */
background: shade(red, 10%); /* → #e50000 */

Note: tint() & shade() are already included in Bourbon

CSS Color Level 4 (Tentative!!)

• gray()
• #rgba and #rrggbbaa
• hwb()
• color()
• named hues and <angle> in hsl()
• rgb() and hsl() will accept alpha values