colorjs / color-space Goto Github PK
View Code? Open in Web Editor NEWMath & data behind color spaces and color conversions.
Home Page: http://colorjs.github.io/color-space
License: The Unlicense
Math & data behind color spaces and color conversions.
Home Page: http://colorjs.github.io/color-space
License: The Unlicense
I'm not good at math check all these calculations, but here's a codepen with Munsell js conversions:
https://codepen.io/Antorni/pen/gcojA?editors=0010
Here's another example in python
http://pteromys.melonisland.net/munsell/
I have an issue converting an XYZ value to RGB and back, it seems that for some values this works, but for others not. I checked the xyz.max
value and all my X/Y/Z values are within range, so that should not be the issue.
This conversion matches (after rounding):
const startXYZ = [47.854955042890886, 29.320696241557958, 21.87902240817543]
const _rgb = colorSpace.xyz.rgb(startXYZ);
const endXYZ = colorSpace.rgb.xyz(_rgb) // => [ 47.854955042890005, 29.320696241558192, 21.879022408175473 ]
However, the following conversion is a mismatch (and quite some other value):
const startXYZ = [ 20, 87, 79 ]
const _rgb = colorSpace.xyz.rgb(startXYZ);
const endXYZ = colorSpace.rgb.xyz(_rgb) // => [ 47.82670703075629, 76.3441771137228, 75.47904959927504 ]
I have been fiddling with the color-convert
library as well, but that seems to have the same result (https://github.com/Qix-/color-convert/issues/81). Is this a bug in the conversion algorithm?
it('breaks', () => {
const rgb = colorSpace.hwb.rgb([219, 31, 84]);
const hwb = colorSpace.rgb.hwb(rgb);
expect(hwb).toEqual([219, 31, 84]);
// actual value is [0, 26.956521739130434, 73.04347826086956]
});
Pantone color system may have legal issues using it in open-source. Thought here it would require some neural network to calc the formula.
Hi
I'm trying to implement the TSL colour space in Python. I've referred to your implementation and the Wikipedia source for this. In your implementation, you do not follow the Wikipedia format entirely as it mentions that the R, G, and B values need to be gamma corrected. And even your implementation of Tint values is different. Can you shed some light on this?
Is there a reason, why hcy is not exposed in index.js?
Seems that NCS will also require a sort of empirical/nn-calculated formula.
Because it is just a collection of colors
http://www.ncscolour.com/en/natural-colour-system/logic-behind-the-system/detailed-logic-behind-the-system/
The readme suggests that space.lab.lch
is a function:
Lines 13 to 16 in 9687f77
However, running this throws TypeError: space.lab.lch is not a function
.
Should this be space.lab.lchab
instead?
Last commit in master added HSP support that I need in my work.
@dfcreative, could you please update npm package?
The HSI conversion will take valid intensity values and convert them to RGB bytes > 255.
Also, shifting the intensity by a small amount can produce a rather large change in hue.
const cs = require('color-space');
console.log('HSI:');
let rgb1 = [ 0xb7, 0xc7, 0xff ];
let hsi = cs.rgb.hsi(rgb1);
let rgb2 = cs.hsi.rgb(hsi);
console.log(` from RGB ${round(rgb1)} to HSI ${round(hsi)}`);
console.log(` back to RGB ${round(rgb2)}`);
hsi[2] += 6;
let rgb3 = cs.hsi.rgb(hsi);
console.log(` i+=6 to RGB ${round(rgb3)}`);
function round(vals) {
return [Math.round(vals[0]), Math.round(vals[1]), Math.round(vals[2])];
}
Yields:
HSI:
from RGB 183,199,255 to HSI 228,14,212
back to RGB 183,199,255
i+=6 to RGB 188,205,262
https://github.com/scijs/color-space/blob/master/hcg.js
alias: ['HCG', 'HST', 'HSG', 'HSW', 'HCV', 'HS2', 'HSV2', 'HST'],
HST, HST :)
About the Ncol
https://www.w3schools.com/colors/colors_ncol.asp
and js library that contains all necessary conversion functions
https://www.w3schools.com/lib/w3color.js
There is no conversion betweenlab
and lch
. The closest I could find is lchab
so the example in the documentation should probably be changed to something that works.
The dependency on mumath
is marked deprecated on NPM, leading a warning when installing color-space
:
$ npm i color-space
npm WARN deprecated [email protected]: Redundant dependency in your project.
$ yarn add color-space
yarn add v1.22.15
info No lockfile found.
[1/4] Resolving packages...
warning color-space > [email protected]: Redundant dependency in your project.
Hi! I'm working on a similar C library.
https://github.com/maandree/libcolour
Hi, I tried but could not find LRGB in the list.
Could you please add it in the near future?
Is there a specific reason RGBA is not one of the supported color spaces? I saw the color-rgba and color-alpha modules which seem to handle this well, unfortunately it is not available in color-space.
Thanks!
Likely this project needs to be deprecated in favor of https://github.com/color-js/color.js.
It has more extensive / relevant set of color spaces, more committed maintainers, higher code quality, arguably good API.
This lib https://github.com/hhelwich/c0lor has some interesting conversions for the screen, such as sRGB, Adobe RGB, HDTV, NTSC, PAL-SECAM, etc.
https://github.com/hhelwich/c0lor/blob/master/dist/c0lor.js#L512-L534
more about sRGB https://en.wikipedia.org/wiki/SRGB
Hi guys, I would like to know more about the rgb conversion... what does it use right now?
Does it consider any profile?
I need a conversion from sRGB (RGB D65/2) to LAB D50/2.
I also checked that when using the transformation from RGB to XYZ, it's possible to specify the parameters for the conversion... It's the RGB profile?
In package.json your current main is configured to ./index.js
when we use webpack and require("color-space"); it uses this index.js. this index requires your husl.js. in your husl.js it has another require("husl"); the issue here is that in our configuration this resolves to itself since it checks the current folder first. it builds successfully but throws errors during runtime because _conv is undefined.
I ended up changing my requires to require("color-space/dist/color-space"); so that webpack finds your compiled version which fixed our issues.
What do you think of changing your main: to dist/color-space.js? so that people can use require("color-space") ?
The HSP conversion will take an RGB to HSP and back and produce an RGB byte > 255.
Also, shifting the brightness by a small amount can produce a rather large change in hue.
const cs = require('color-space');
console.log('HSP:');
let rgb1 = [ 0xb7, 0xc7, 0xff ];
let hsp = cs.rgb.hsp(rgb1);
let rgb2 = cs.hsp.rgb(hsp);
console.log(` from RGB ${rgb1} to HSP ${round(hsp)}`);
console.log(` back to RGB ${rgb2}`);
hsp[2] += 6;
let rgb3 = cs.hsp.rgb(hsp);
console.log(` p+=6 to RGB ${rgb3}`);
function round(vals) {
return [Math.round(vals[0]), Math.round(vals[1]), Math.round(vals[2])];
}
Yields:
HSP:
from RGB 183,199,255 to HSP 227,28,202
back to RGB 184,199,256
p+=6 to RGB 189,205,263
Also, the HSP conversion is rounding most of its output values, which probably isn't appropriate. It makes conversion unnecessarily lossy.
I busy, please add support for HCG <-> HWB conversion.
https://github.com/acterhd/hcg-color/blob/gh-pages/convert/hcg-original.js
Please, wait. I will add support for HCG tests. How to it run?
Okay. Try describe:
hcg[0, 0.5, 1] == rgb[255, 128, 128]
hcg[0, 0.5, 0] == rgb[128, 0, 0]
hcg[0, 0.5, 0.5] == rgb[192, 64, 64]
hcg[0, 1, 0] == rgb[255, 0, 0]
hcg[0, 0, 0] == rgb[0, 0, 0]
hcg[0, 0, 1] == rgb[255, 255, 255]
hcg[0, 0.5, 1] == rgb[128, 128, 128]
If not working, try 127 number.
The newer versions of husl (6.0.2+) are built using Haxe and no longer exposes private APIs. This package is broken when doing a require('color-space')
because of the following line: https://github.com/scijs/color-space/blob/master/husl.js#L20. Could you please adjust to use only the public APIs?
The workaround is to require a specific module by name and not require the husl module, e.g., require('color-space/rgb')
It seems trivial to implement one-side transformation, but hardly possible backwise. It takes some neural network / system of equasions with studied coefficients.
That seems to be quite actual in shaders, looking to the packages like color-space-canvas and others.
That would be nice to provide glslify code for reuse.
Add checker with loose rules
I am interested in using color-space in a typescript project. To this end I have created type declarations for the library (https://github.com/sbliven/chromanaut/blob/master/color-space.d.ts). I would like to make these available to other projects. This can be done in a few ways depending on the desired integration with the javascript color-space package.
Include index.d.ts
in the package directory. This has the benefit of keeping the type definitions and the javascript in the same repository, so the versions should always match. However, it would require that new pull requests modify the index.d.ts file to reflect any changes to the javascript API.
Type declarations can be included in the DefinitelyTyped repository. This makes the process independent of the maintainers here, but runs a greater risk that the type information will be out of date.
Both methods are widely used. I'm happy to help maintain the declarations regardless of which approach is preferred by the community here.
is there any plan to add hex, to convert from rgb or hsl.
hex.hsl
hex.rgb
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.