Skip to content

Lightweight color shader/blender/converter plugin implemented for Vue 2.

License

Notifications You must be signed in to change notification settings

arthurvasconcelos/vue-cbsc

Repository files navigation

Vue Color Blender/Shader/Converter

Lightweight color shader/blender/converter plugin implemented for Vue 2.

dependencies Status devDependencies Status peerDependencies Status

Latest GH Latest Release Total GH Latest Release Downloads Commits since latest GH release GH Forks GH Starts GH Watchers

NPM Latest Package Release NPM Package Downloads License Compatible Node Version

bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

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 stackProgrammatically 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

import Vue from 'vue';
import VueCBSC from 'vue-cbsc';

Vue.use(VueCBSC);

Usage Edit Vue CBSC Example

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}
    }
})

Contributing

forthebadge

Live Long and Prosper