Lightweight color shader/blender/converter plugin implemented for Vue 2.
The algoritmn used in this plugin was not developed by me, I am just wrapping it for Vue. Pimp Trizkit is the algoritmn author, for more information visit Programmatically Lighten or Darken a hex color (or rgb, and blend colors).
- Vue: ^2.0.0
$ npm install vue-cbsc --save
$ yarn add vue-cbsc
import Vue from 'vue';
import VueCBSC from 'vue-cbsc';
Vue.use(VueCBSC);
new Vue({
el: '#app',
mounted: function() {
let color1 = 'rgb(114,93,20)';
let color2 = 'rgb(114,93,20,0.37423)';
let color3 = '#67DAF0';
let color4 = '#5567DAF0';
let color5 = '#F3A';
let color6 = '#DF3A';
let color7 = 'rgb(75,200,112)';
let color8 = 'rgb(75,200,112,0.98631)';
// Shade (Lighten or Darken) (percentage between 0 ~ 1)
console.log(this.$cbsc.lighten(color1, 0.3)); // Output: rgb(114,93,20) + [30% Lighter] => rgb(156,142,91)
console.log(this.$cbsc.darken(color5, 0.13)); // Output: #F3A + [13% Darker] => #de2c94
// Shade with Conversion (use 'c' as your 'to' color)
console.log(this.$cbsc.blend(color2, 'c', 0.42)); // Output: rgb(114,93,20,0.37423) + [42% Lighter] + [Convert] => #5fada177
// RGB2Hex & Hex2RGB Conversion Only
console.log(this.$cbsc.convert(color6)); // Output: #DF3A + [Convert] => rgb(255,51,170,0.8667)
// Blending (percentage between -1 ~ 1)
console.log(this.$cbsc.blend(color2, color8, -0.13)); // Output: rgb(114,93,20,0.37423) + rgb(75,200,112,0.98631) + [13% Blend] => rgb(109,107,32,0.4538)
console.log(this.$cbsc.blend(color2, color7, 0.65)); // Output: rgb(114,93,20,0.37423) + rgb(75,200,112) + [65% Blend] => rgb(89,163,80,0.37423)
// Blending with Conversion (result is in the 'to' color format)
console.log(this.$cbsc.blend(color1, color3, 0.3)); // Output: rgb(114,93,20) + #67DAF0 + [30% Blend] + [Convert] => #6f8356
console.log(this.$cbsc.blend(color4, color2, -0.13)); // Output: #5567DAF0 + rgb(114,93,20,0.37423) + [13% Blend] + [Convert] => rgb(104,202,211,0.3386)
// Error Checking
console.log(this.$cbsc.lighten('#FFBAA', 0.3)); // Output: #FFBAA + [30% Lighter] => null
console.log(this.$cbsc.blend(color1, color5, 30)); // Output: rgb(114,93,20) + #F3A + [3000% Blend] => null
// A pound of salt is jibberish (Error Check Fail)
console.log(this.$cbsc.lighten('#salt', 0.3)); // #salt + [30% Lighter] => #004d4d4d
// Ripping
console.log(this.$cbsc.rip(color4)); // Output: {0: 103, 1: 218, 2: 240, 3: 0.3333}
}
})
- vue-cbsc Issues: https://github.com/arthurvasconcelos/vue-cbsc/issues