Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support to parse color from rgb[a] string format #22

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,23 @@ const invert = require('invert-color');
// ES2015, JSNext
import invert from 'invert-color';
// TypeScript
import invert, { RGB, RgbArray, HexColor, BlackWhite } from 'invert-color';
import invert, { RGB, RgbArray, RgbString, HexColor, BlackWhite } from 'invert-color';
```
For UMD in browser, use `lib/invert.min.js`.
See [other exports](https://github.com/onury/invert-color/tree/master/lib).

### `invert(color[, bw])`

- **`color`** : `String|Array|Object`
Color in HEX string, RGB array or RGB object to be inverted.
Color to be inverted in following formats:

* HEX string: '#ff0'
* RGB string with alpha channel supported: 'rgb(100,100,100)' or 'rgba(255, 255, 0, 0.2)'
* RGB array
* RGB object

See the example bellow for more detail.

- **`bw`** : `Boolean|Object`
Optional. A boolean value indicating whether the output should be amplified to black (`#000000`) or white (`#ffffff`), according to the luminance of the original color. You can set custom black/white values (and/or luminance threshold) by passing an object.

Expand All @@ -47,6 +55,10 @@ Optional. A boolean value indicating whether the output should be amplified to b
invert('#000') // —> #ffffff
invert('#282b35') // —> #d7d4ca

// as rgb string
invert('rgb(0,0,0)') // —> 'rgb(255,255,255)'
invert('rgba(0,0,0,0.3)') // —> 'rgba(255,255,255,0.3)'

// input color as RGB array or object
invert([69, 191, 189]) // —> #ba4042
invert({ r: 249, g: 119, b: 121 }) // —> #068886
Expand Down
55 changes: 51 additions & 4 deletions lib/cjs/invert.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,57 @@ function invertToBW(color, bw, asArr) {
*/
function invert(color, bw) {
if (bw === void 0) { bw = false; }
color = toRgbArray(color);
if (bw)
return invertToBW(color, bw);
return '#' + color.map(function (c) { return padz((255 - c).toString(16)); }).join('');
var isRgbString = false;
var isRgbaString = false;
if (typeof color === 'string' && color.startsWith('rgb')) {
if (color.startsWith('rgba')) {
isRgbaString = true;
}
else {
isRgbString = true;
}
}
if (isRgbString) {
var matches = color.match(/rgb\(([0-9 ]+),([0-9 ]+),([0-9 ]+)\)/);
if (matches) {
var rgbArr = [
parseInt(matches[1]),
parseInt(matches[2]),
parseInt(matches[3]),
];
rgbArr = bw
? invertToBW(rgbArr, bw, true)
: rgbArr.map(function (c) { return 255 - c; });
return "rgb(" + rgbArr.join(',') + ")";
}
else {
throw new Error('Invalid rgb color string: ' + color);
}
}
else if (isRgbaString) {
var matches = color.match(/rgba\(([0-9 ]+),([0-9 ]+),([0-9 ]+),([0-9. ]+)\)/);
if (matches) {
var rgbArr = [
parseInt(matches[1]),
parseInt(matches[2]),
parseInt(matches[3]),
];
var alphaChannel = matches[4].replace(/\s/g, '');
rgbArr = bw
? invertToBW(rgbArr, bw, true)
: rgbArr.map(function (c) { return 255 - c; });
return "rgba(" + rgbArr.join(',') + "," + alphaChannel + ")";
}
else {
throw new Error('Invalid rgba color string: ' + color);
}
}
else {
color = toRgbArray(color);
if (bw)
return invertToBW(color, bw);
return '#' + color.map(function (c) { return padz((255 - c).toString(16)); }).join('');
}
}
/**
* Utility methods to generate inverted version of a color.
Expand Down
55 changes: 51 additions & 4 deletions lib/esm/invert.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,57 @@ function invertToBW(color, bw, asArr) {
* @returns {HexColor} - Hexadecimal representation of the inverted color.
*/
function invert(color, bw = false) {
color = toRgbArray(color);
if (bw)
return invertToBW(color, bw);
return '#' + color.map(c => padz((255 - c).toString(16))).join('');
let isRgbString = false;
let isRgbaString = false;
if (typeof color === 'string' && color.startsWith('rgb')) {
if (color.startsWith('rgba')) {
isRgbaString = true;
}
else {
isRgbString = true;
}
}
if (isRgbString) {
const matches = color.match(/rgb\(([0-9 ]+),([0-9 ]+),([0-9 ]+)\)/);
if (matches) {
let rgbArr = [
parseInt(matches[1]),
parseInt(matches[2]),
parseInt(matches[3]),
];
rgbArr = bw
? invertToBW(rgbArr, bw, true)
: rgbArr.map(c => 255 - c);
return `rgb(${rgbArr.join(',')})`;
}
else {
throw new Error('Invalid rgb color string: ' + color);
}
}
else if (isRgbaString) {
const matches = color.match(/rgba\(([0-9 ]+),([0-9 ]+),([0-9 ]+),([0-9. ]+)\)/);
if (matches) {
let rgbArr = [
parseInt(matches[1]),
parseInt(matches[2]),
parseInt(matches[3]),
];
const alphaChannel = matches[4].replace(/\s/g, '');
rgbArr = bw
? invertToBW(rgbArr, bw, true)
: rgbArr.map(c => 255 - c);
return `rgba(${rgbArr.join(',')},${alphaChannel})`;
}
else {
throw new Error('Invalid rgba color string: ' + color);
}
}
else {
color = toRgbArray(color);
if (bw)
return invertToBW(color, bw);
return '#' + color.map(c => padz((255 - c).toString(16))).join('');
}
}
/**
* Utility methods to generate inverted version of a color.
Expand Down
3 changes: 2 additions & 1 deletion lib/invert.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,11 @@ export declare type RgbArray = [number, number, number];
* Hexadecimal representation of a color.
*/
export declare type HexColor = string;
export declare type RgbString = string;
/**
* Color represented as hexadecimal value or as RGB object or list.
*/
export declare type Color = RGB | RgbArray | HexColor;
export declare type Color = RGB | RgbArray | RgbString | HexColor;
/**
* Interface for defining black and white colors; used to amplify the contrast
* of the color inversion.
Expand Down
55 changes: 51 additions & 4 deletions lib/invert.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/invert.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/invert.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/invert.min.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading