If you pass an invalid color into invert you get

Uncaught TypeError: Cannot read property 'r' of null

which is hard to interpret, and doesn't give you much clue that the error is occurring in this package.

I'd be happy to contribute a PR if you're likely to merge it.

In bootstrap 4 we have a variable called $yiq-contrasted-threshold: were has a value of 150 by default and this variable ajusts the threshold to decide if the color should be black or white in components. Is there something similar to this?

I thought something like this:

invert('#d9534f', { threshold: 155 }); // #ffffff

And congrats for this awesome project! Thank you very much!

I got the error:

Invalid HEX color: "rgba(0,0,0,0.2)"

After read the source code, I see this program has not supported to parse the color string from rgb

invertColor('#ffffff', true)

the output also '#ffffff'

Is it currently possible to adjust when a given color will flip to black or white when e.g. doing:

invert('#f46e76', true) // produces black and want to produce white

If you pass in #7f7f7f you get back #7f7f7f if bw is false.

IMO it's best to always use bw.

import invert from 'invert-color';

let _channels = [0, 0, 0];

let _new = invert.asRGB(_channels); //error

expected: This should work, as per:

https://github.com/onury/invert-color/blob/cd183934b67e4536e4e3f8a618067fb861fd63e2/lib/invert.d.ts

/**
 *  RGB list (array) type with red, green and blue components.
 */
export declare type RgbArray = [number, number, number];
...
export declare type Color = RGB | RgbArray | HexColor;

observed:

TS2345: Argument of type 'number[]' is not assignable to parameter of type 'Color'.
  Type 'number[]' is not assignable to type 'RgbArray'.
    Target requires 3 element(s) but source may have fewer.

Hey, at what address I can contact you directly?

Your lib looks nice, but actually I am still not sure whether it inverts in the way I need it.

So here is the back story: In short, I need it for my add-on, which wants to get the best contrasting color for a given color, as it can otherwise not be scanned by QR code scanners.
As such the first implementation turned out to have a little issue being that it inverts the brightness, too.
I am still not really convinced whether this is good for my aim or not, but well...
Seeing this only inverting the hue seems to be a little more complicated, so I stumbled upon your lib (here of course).

So back to my questions:

• So this is inverting only the hue, is not it?
• Maybe, you may add the feature to also invert the brightness, too? Or is there no actual use case for that?
• And may I be better off with using this lib and only the hue?

Generally my problem/use case of course would need a very clever way to get the "best" contrast somehow. If you have any tips/ideas, feel free to comment.

Looking at package contents when installed from client code, there are more files than needed. That makes package larger and less clear to reason about.

It'd be nice to achieve a package directory listing like:

index.js
LICENSE
package.json
README.md

If you're ok with that, we already have a working PR.

Apart from changes from that PR, one important bit is that the package file to be published should be generated by running npm pack (instead of zipping the whole directory content, or some similar procedure).

What's your take about it? Thanks

Hi there

currently in a project we're using a combination of color-convert plus custom code to decide if a color is "bright" or dark, so to apply an opposite custom dark/light text color.
Our dark/light text colors are not pure #000/#FFF, but somehow closer.

Would you consider a different API like e.g. the following, here expressed as TypeScript just for clarity:

invert(colorCode: string, bw: boolean | BwColorCodes);

interface BwColorCodes {
  dark: string;
  light: string;
}

So all in all you could invoke invertColor(colorCode, true) to get current B/W behavior, or you could also call:

invertColor(colorCode, {
  dark: myCustomDarkColor,
  light: myCustomLightColor,
});

In case, what would be the other API that needs change? Would you consider a PR targeting this?

Thanks

Missing typings file or deceleration file despite including example of import.

invert is not a function. This happens no matter how I import:
import invert from "invert-color" -> Runtime error: invert_color_1.default is not a function
import { invert } from "invert-color" -> Runtime error: invert_color_1.invert is not a function
import * as invert from "invert-color" -> Compiletime error: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("D:/.../node_modules/invert-color/lib/invert")' has no compatible call signatures.
import invert = require("invert-color") -> Compiletime error: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("D:/.../node_modules/invert-color/lib/invert")' has no compatible call signatures.

for it only works when use as (invert as any)(rgbArray) and I either import as
import * as invert from 'invert-color'
or
import invert = require('invert-color')

I'm using this with webpack in the browser.

@onury Can I have the source for the animation? I'm trying to do exactly what you did in the anim from this array of colors:

['289fec',
'999999',
'60ba7b',
'ff8a0d',
'da0004',
'666666',
'a4e4b4',
'ff3c00',
'990000',
'ff9594',
'ff9900',
'a4b442',
'39461a',
'3693bd',
'2294a2',
'33cc33',
'a29fe2',
'ff9900',
'618cff',
'cae1ff',
'333333',
'aaaaaa',
'f16f6f',
'f1504e',
'ff2200',
'444444',
'ffe64d',
'7f4f30',
'e7a115',
'ffa99a',
'776ba2',
'dddddd',
'776ba2']

Thanks!

See my implementation based on your answer.
https://stackoverflow.com/a/60931880/146334
I hope it helps.

It's possible to setup some inference over the calculated inverted color to use its corresponding black and white shade, like it was converted from rgb to black and white in any sort of image editing program?

I was wondering that in cases where we want to calculate de inverted color but are not able to inform the proper shade of dark / light color that can combine well with the original color.

Looking at source code, this library defines a hexToRGB function which might be useful to client code when working with colors. The idea would be to export this function, and maybe some other if it makes sense, without exposing all library implementation details. So that one can avoid copying code, or importing another library, just for that. Of course, this library should stay focused and not become a catch-all color utility. This suggestion is just because that function happens to be there already.

Just our 2¢. What do you think?
Regards

I'm building an app, where color is provided by data- attribute and it can be anything that user types. There is a potential case that they'll type "yellow"instead of "#ffff00".
Right now using this lib and color as word, will throw an error Error: Invalid HEX color: "yellow"
One possible solution I found is to map all cross-browser predefined colours to their hexadecimal counterpart:
https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes/24390910
Do you think it'd be possible to include something like that into the lib itself?
PS Great module, by the way, super helpful!