Vue Color Blender/Shader/Converter
Lightweight color shader/blender/converter plugin implemented for Vue 2.
Disclaimer
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).
Requirements
- Vue: ^2.0.0
Install
$ npm install vue-cbsc --save $ yarn add vue-cbsc
Configuration
;; Vue;
Usage
el: '#app' { 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; // Output: rgb(114,93,20) + [30% Lighter] => rgb(156,142,91) console; // Output: #F3A + [13% Darker] => #de2c94 // Shade with Conversion (use 'c' as your 'to' color) console; // Output: rgb(114,93,20,0.37423) + [42% Lighter] + [Convert] => #5fada177 // RGB2Hex & Hex2RGB Conversion Only console; // Output: #DF3A + [Convert] => rgb(255,51,170,0.8667) // Blending (percentage between -1 ~ 1) console; // Output: rgb(114,93,20,0.37423) + rgb(75,200,112,0.98631) + [13% Blend] => rgb(109,107,32,0.4538) console; // 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; // Output: rgb(114,93,20) + #67DAF0 + [30% Blend] + [Convert] => #6f8356 console; // Output: #5567DAF0 + rgb(114,93,20,0.37423) + [13% Blend] + [Convert] => rgb(104,202,211,0.3386) // Error Checking console; // Output: #FFBAA + [30% Lighter] => null console; // Output: rgb(114,93,20) + #F3A + [3000% Blend] => null // A pound of salt is jibberish (Error Check Fail) console; // #salt + [30% Lighter] => #004d4d4d // Ripping console; // Output: {0: 103, 1: 218, 2: 240, 3: 0.3333} }
Contributing
- vue-cbsc Issues: https://github.com/arthurvasconcelos/vue-cbsc/issues