diff --git a/Readme.md b/Readme.md index 0a5b526..83ccbf4 100644 --- a/Readme.md +++ b/Readme.md @@ -33,6 +33,7 @@ dotfiles * Consolas font install script (`setup/consolas.sh`) * Bash4 install script (`setup/bash.sh`) * OS X, Homebrew, NPM, etc. update script (`setup/update.sh`) +* Color conversion script: convert #HEX to RGB/RGBA and HSL/HSLA * My magic project opener (`bin/opener.py`) * [Bash](https://github.com/sapegin/dotfiles/blob/master/docs/Bash.md) & [Git](https://github.com/sapegin/dotfiles/blob/master/docs/Git.md) aliases and scripts * [Mac OS X apps I use](https://github.com/sapegin/dotfiles/wiki/OS-X-Apps) diff --git a/bin/color.js b/bin/color.js new file mode 100755 index 0000000..e2a3206 --- /dev/null +++ b/bin/color.js @@ -0,0 +1,110 @@ +#!/usr/bin/env node + +/** + * HTML color converter + * Convert #hex colors to HSL/HSLA (by default) or RGB/RGBA (if `--rgb` key specified). + * + * Usage: color [--rgb] [#]dead00 [alpha] + * + * Author: Artem Sapegin, sapegin.me + * Based on https://github.com/LeaVerou/CSS.coloratum + */ + +//jshint node:true + +var format = 'hsl'; +var args = process.argv.splice(2); +if (!args.length) helpme(); + +if (args[0] == '--rgb') { + format = 'rgb'; + args = args.splice(1); +} +if (!args.length) helpme(); + +var rgb = hex2rgb(args[0]); +if (!rgb) helpme(); + +var alpha = args[1]; + +if (format == 'hsl') { + console.log(toHslString(rgb2hsl(rgb), alpha)); +} +else { + console.log(toRgbString(rgb, alpha)); +} + + +function helpme() { + console.log('Usage: color [--rgb] [#]dead00 [alpha]'); + process.exit(1); +} + +function hex2rgb(rgbString) { + // Remove leading `#` + rgbString = rgbString.replace(/^#/, ''); + + // Parse `dead00` and `f00` + var channels = []; + if (rgbString.length === 3) { + channels = rgbString.match(/([0-9a-f])/g); + channels = channels.map(function(hex) { + return hex + hex; + }); + } + else { + channels = rgbString.match(/([0-9a-f]){2}/g); + } + if (channels.length !== 3) { + return null; + } + + // Convert to integers + channels = channels.map(function(hex) { + return parseInt(hex, 16); + }); + + return channels; +} + +function rgb2hsl(rgb) { + rgb = rgb.map(function(a) { + return a / 2.55; + }); + + var hsl = []; + var max = Math.max.apply(Math, rgb); + var min = Math.min.apply(Math, rgb); + + hsl[2] = Math.round((min + max)/2); + + var d = max - min; + + if(d !== 0) { + hsl[1] = Math.round(d*100 / (100 - Math.abs(2*hsl[2] - 100))) + '%'; + + switch(max){ + case rgb[0]: hsl[0] = (rgb[1] - rgb[2]) / d + (rgb[1] < rgb[2] ? 6 : 0); break; + case rgb[1]: hsl[0] = (rgb[2] - rgb[0]) / d + 2; break; + case rgb[2]: hsl[0] = (rgb[0] - rgb[1]) / d + 4; + } + + hsl[0] = Math.round(hsl[0]*60); + } + else { + hsl[0] = 0; + hsl[1] = '0%'; + } + + hsl[2] += '%'; + + return hsl; +} + +function toRgbString(rgb, alpha) { + return 'rgb' + (alpha < 1 ? 'a' : '') + '(' + rgb.join(',') + ((alpha < 1 ? ',' + alpha : '') + ')').replace(/\b0\./, '.'); +} + +function toHslString(hsl, alpha) { + return 'hsl' + (alpha < 1 ? 'a' : '') + '(' + hsl.join(',') + ((alpha < 1 ? ',' + alpha : '') + ')').replace(/\b0\./, '.'); +} diff --git a/docs/Bash.md b/docs/Bash.md index 56ae1f7..6ab6b09 100644 --- a/docs/Bash.md +++ b/docs/Bash.md @@ -63,7 +63,7 @@ Remove screenshots from desktop. Show/hide hidden files in Finder. -## Text +## Files ### dos2unix @@ -73,6 +73,9 @@ Convert file to Unix line endings. Find files with Windows line endings (and convert them to Unix when `--force` key given). + +## Text, HTML, CSS + ### escape Escape UTF-8 characters into their 3-byte format: `£` → `\xC2\xA3`. @@ -81,6 +84,14 @@ Escape UTF-8 characters into their 3-byte format: `£` → `\xC2\xA3`. Get a character’s Unicode code point: `£` → `\x00A3`. +### hex2hsl <[#]dead00> [alpha] + +Convert #hex color to HSL/HSLA. `#dead00` → `hsl(47,99%,44%)`. + +### hex2hsl <[#]dead00> [alpha] + +Convert #hex color to RGB/RGBA. `#dead00` → `rgb(222,173,0)`. + ## Network diff --git a/includes/bash_aliases.bash b/includes/bash_aliases.bash index 28ab31b..149b379 100644 --- a/includes/bash_aliases.bash +++ b/includes/bash_aliases.bash @@ -96,6 +96,10 @@ function proj { cd "$("$HOME/dotfiles/bin/opener.py" "$HOME/Dropbox/Projects" $1 function repo { cd "$("$HOME/dotfiles/bin/opener.py" "$HOME/Dropbox/Projects" $1 -w repo $2)"; } function wptheme { cd "$("$HOME/dotfiles/bin/opener.py" "$HOME/Dropbox/Projects" $1 -w wptheme $2)"; } +# Color conversion +alias hex2hsl="color.js $1 $2" +alias hex2rgb="color.js --rgb $1 $2" + # Dotfiles help alias dot-bash="qlmanage -p "$HOME/dotfiles/docs/Bash.md"" alias dot-git="qlmanage -p "$HOME/dotfiles/docs/Git.md""