Add color.tint and color.shade operations

chroma-light.js

@@ -926,6 +926,22 @@
         }
     };
 
+    Color_1.prototype.shade = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'black', f ].concat( rest ));
+    };
+
+    Color_1.prototype.tint = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'white', f ].concat( rest ));
+    };
+
     var sqrt = Math.sqrt;
     var pow$2 = Math.pow;
 
@@ -978,6 +994,8 @@
 
 
 
+
+
     // interpolators
 
 

chroma.js

@@ -1962,6 +1962,22 @@
         }
     };
 
+    Color_1.prototype.shade = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'black', f ].concat( rest ));
+    };
+
+    Color_1.prototype.tint = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'white', f ].concat( rest ));
+    };
+
     var rgb$1 = function (col1, col2, f) {
         var xyz0 = col1._rgb;
         var xyz1 = col2._rgb;
@@ -3183,6 +3199,8 @@
 
 
 
+
+
     // interpolators
 
 

docs/index.html

@@ -234,6 +234,29 @@ <h4 id="-value-1-">(value=1)</h4>
 chroma(&#39;hotpink&#39;).desaturate(2);
 chroma(&#39;hotpink&#39;).desaturate(3);
 </code></pre>
+<h3 id="color-mix">color.mix</h3>
+<h4 id="-targetcolor-ratio-0-5-">(targetcolor, ratio=0.5)</h4>
+<p>Mix this color with a target color. The mix <em>ratio</em> is a value between 0 and 1.<br>This is the same as <code>chroma.mix</code> but with the first parameter already set.<br>As such, the color space used can be adjusted.</p>
+<pre><code class="lang-js">chroma(&#39;hotpink&#39;).mix(&#39;blue&#39;);
+chroma(&#39;hotpink&#39;).mix(&#39;blue&#39;, 0.25);
+chroma(&#39;hotpink&#39;).mix(&#39;blue&#39;, 0.75);
+</code></pre>
+<h3 id="color-shade">color.shade</h3>
+<h4 id="-ratio-0-5-">(ratio=0.5)</h4>
+<p>Produce a shade of the color.<br>This is syntactic sugar for <code>color.mix</code> with a target color of black.</p>
+<pre><code class="lang-js">chroma(&#39;hotpink&#39;).shade();
+chroma(&#39;hotpink&#39;).shade(0.25);
+chroma(&#39;hotpink&#39;).shade(0.75);
+chroma(&#39;hotpink&#39;).shade(1);
+</code></pre>
+<h3 id="color-tint">color.tint</h3>
+<h4 id="-ratio-0-5-">(ratio=0.5)</h4>
+<p>Produce a tint of the color.<br>This is syntactic sugar for <code>color.mix</code> with a target color of white.</p>
+<pre><code class="lang-js">chroma(&#39;hotpink&#39;).tint();
+chroma(&#39;hotpink&#39;).tint(0.25);
+chroma(&#39;hotpink&#39;).tint(0.75);
+chroma(&#39;hotpink&#39;).tint(1);
+</code></pre>
 <h3 id="color-set">color.set</h3>
 <h4 id="-channel-value-">(channel, value)</h4>
 <p>Changes a single channel and returns the result a new <code>chroma</code> object.</p>

docs/libs/chroma-light.js

@@ -926,6 +926,22 @@
         }
     };
 
+    Color_1.prototype.shade = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'black', f ].concat( rest ));
+    };
+
+    Color_1.prototype.tint = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'white', f ].concat( rest ));
+    };
+
     var sqrt = Math.sqrt;
     var pow$2 = Math.pow;
 
@@ -978,6 +994,8 @@
 
 
 
+
+
     // interpolators
 
 

docs/libs/chroma.js

@@ -1962,6 +1962,22 @@
         }
     };
 
+    Color_1.prototype.shade = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'black', f ].concat( rest ));
+    };
+
+    Color_1.prototype.tint = function(f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 1;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+    	return mix.apply(void 0, [ this, 'white', f ].concat( rest ));
+    };
+
     var rgb$1 = function (col1, col2, f) {
         var xyz0 = col1._rgb;
         var xyz1 = col2._rgb;
@@ -3183,6 +3199,8 @@
 
 
 
+
+
     // interpolators
 
 

docs/src/index.md

@@ -373,6 +373,45 @@ chroma('hotpink').desaturate(2);
 chroma('hotpink').desaturate(3);
 ```
 
+### color.mix
+#### (targetcolor, ratio=0.5)
+
+Mix this color with a target color. The mix *ratio* is a value between 0 and 1.
+This is the same as `chroma.mix` but with the first parameter already set.
+As such, the color space used can be adjusted.
+
+```js
+chroma('hotpink').mix('blue');
+chroma('hotpink').mix('blue', 0.25);
+chroma('hotpink').mix('blue', 0.75);
+```
+
+### color.shade
+#### (ratio=0.5)
+
+Produce a shade of the color.
+This is syntactic sugar for `color.mix` with a target color of black.
+
+```js
+chroma('hotpink').shade();
+chroma('hotpink').shade(0.25);
+chroma('hotpink').shade(0.75);
+chroma('hotpink').shade(1);
+```
+
+### color.tint
+#### (ratio=0.5)
+
+Produce a tint of the color.
+This is syntactic sugar for `color.mix` with a target color of white.
+
+```js
+chroma('hotpink').tint();
+chroma('hotpink').tint(0.25);
+chroma('hotpink').tint(0.75);
+chroma('hotpink').tint(1);
+```
+
 
 ### color.set
 #### (channel, value)

index-light.js

@@ -16,6 +16,8 @@ require('./src/ops/darken');
 require('./src/ops/get');
 require('./src/ops/mix');
 require('./src/ops/set');
+require('./src/ops/shade');
+require('./src/ops/tint');
 
 // interpolators
 require('./src/interpolator/lrgb');

index.js

@@ -29,6 +29,8 @@ require('./src/ops/mix');
 require('./src/ops/premultiply');
 require('./src/ops/saturate');
 require('./src/ops/set');
+require('./src/ops/shade');
+require('./src/ops/tint');
 
 // interpolators
 require('./src/interpolator/rgb');

src/ops/shade.js

@@ -0,0 +1,6 @@
+const Color = require('../Color');
+const mix = require('../generator/mix');
+
+Color.prototype.shade = function(f=0.5, ...rest) {
+	return mix(this, 'black', f, ...rest);
+}

src/ops/tint.js

@@ -0,0 +1,6 @@
+const Color = require('../Color');
+const mix = require('../generator/mix');
+
+Color.prototype.tint = function(f=0.5, ...rest) {
+	return mix(this, 'white', f, ...rest);
+}

test/manipulate.test.js

@@ -21,7 +21,13 @@ vows
             'saturate'(topic) { return assert.equal(topic.saturate().hex(), '#ff0000'); },
             'desaturate'(topic) { return assert.equal(topic.desaturate().hex(), '#ee3a20'); },
             'desaturate more'(topic) { return assert.equal(topic.desaturate(2).hex(), '#db5136'); },
-            'desaturate too much'(topic) { return assert.equal(topic.desaturate(400).hex(), '#7f7f7f'); }
+            'desaturate too much'(topic) { return assert.equal(topic.desaturate(400).hex(), '#7f7f7f'); },
+            'shade'(topic) { return assert.equal(topic.shade().hex(), '#b40000'); },
+            'shade more'(topic) { return assert.equal(topic.shade(0.75).hex(), '#800000'); },
+            'shade too much'(topic) { return assert.equal(topic.shade(1.5).hex(), '#000000'); },
+            'tint'(topic) { return assert.equal(topic.tint().hex(), '#ffb4b4'); },
+            'tint more'(topic) { return assert.equal(topic.tint(0.75).hex(), '#ffdddd'); },
+            'tint too much'(topic) { return assert.equal(topic.tint(1.5).hex(), '#ffffff'); }
         },
 
         'premultiply': {