Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork88
Color conversion & manipulation library by the editors of the CSS Color specifications
License
color-js/color.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Official website •Contribution guide
Color.js is a color conversion and modification library originally created by two of the editors of the CSS Color specifications: Lea Verou and Chris Lilley.They continue to work on it, but are also joined by an exceptional small grassroots team of co-maintainers.
- Color space agnostic: Each color object is basically a list of coords and a color space reference. Operations are color space agnostic.Modules fora wide variety of color spaces,including Lab/LCh, OKLab/OKLCh,sRGB and friends (HSL/HSV/HWB), Display P3,Jzazbz, REC.2100 and manymore.
- Doesn't gloss over color science: Actualgamut mapping instead of naïve clipping,multipleDeltaE methods (76, CMC, 2000, Jz),multiplechromatic adaptation methods (von Kries, Bradford, CAT02, CAT16),all with sensible defaults
- Up to date with CSS Color 4: EveryCSS Color 4 format & color space supported for bothinput andoutput, whether your browser supports it or not.
- Readable, object-oriented API: Color objects for multiple operations on the same color, and static
Color.something()functions for one-off calculations - Modular & Extensible: Use only what you need, or a bundle. Client-side or Node. Deep extensibility withhooks.
- Fast & efficient:Procedural, tree-shakeable API available for performance sensitive tasks and reduced bundle size
- Dependency free: Not that there’s anything wrong with dependencies, but we gotta mention it!
- Has been used to create demos for several W3C specifications
- Has been used by browsers to test their CSS Color 4/5 implementations
- Over90 million total npm downloads!
- Used by severalhigh impact projects, includingSass,Open Props,axe accessibility testing engine, andOddContrast andCSS HD Gradients color tools
- Parts of Color.js’s API are used as a testing ground for the design of anative
Colorobject for the Web platform.
Color.js is designed make simple things easy, and complex things possible, and that extends to installation as well.
For quick experiments, you can just import Color.js directly from the CDN (kindly provided by the awesome folks atNetlify) with all modules included:
importColorfrom"https://colorjs.io/dist/color.js";
You can also install via npm if you’d prefer:
npm install colorjs.ioWhether you’re using NPM, the CDN, or local files, Color.js allows you to also import specific modules by directly importing fromsrc:
https://colorjs.io/src/for the CDNnode_modules/colorjs.io/src/for NPM
For example:
importColorfrom"https://colorjs.io/src/color.js";importp3from"https://colorjs.io/src/spaces/p3.js";importrec2020from"https://colorjs.io/src/spaces/rec2020.js";importdeltaE200from"https://colorjs.io/src/deltaE/deltaE2000.js";
Warning: To useimport statements in a browser, your<script> needstype="module"
Are you old school and prefer to simply have a globalColor variable?We’ve got you covered!Just include the following script in your HTML:
<scriptsrc="https://colorjs.io/dist/color.global.js"></script>
Any color from CSS Color Level 4 should work:
letcolor=newColor("slategray");letcolor2=newColor("hwb(60 30% 40% / .5)");letcolor3=newColor("color(display-p3 0 1 0 / .9)");letcolor4=newColor("lch(50% 80 30)");
You can also createColor objects manually:
letcolor2=newColor("hwb",[60,30,40],.5);letcolor3=newColor({space:"p3",coords:[0,1,0],alpha:.9});
You can use properties to modify coordinatesof any color space and convert back
letcolor=newColor("slategray");color.lch.l=80;// Set coord directly in any color spacecolor.lch.c*=1.2;// saturate by increasing LCH chroma by 20%color.hwb.w+=10;// any other color space also available
To modify coordinates in any color space you usecolor.set() andcolor.setAll():
letcolor=newColor("slategray");// Multiple coordinatescolor.set({"lch.l":80,// set lightness to 80"lch.c":c=>c*1.2// Relative manipulation});// Set single coordinatecolor.set("hwb.w",w=>w+10);
Coordinates of the color's color space are available without a prefix:
letcolor=newColor("slategray").to("lch");// Multiple coordinatescolor.set({l:80,// set lightness to 80c:c=>c*1.2// Relative manipulation});// Set single coordinatecolor.set("h",30);
Chaining-style modifications are also supported:
letcolor=newColor("lch(50% 50 10)");color=color.set({h:h=>h+180,c:60}).lighten();
You can also use properties:
letcolor=newColor("slategray");color.lch.l=80;// Set coord directly in any color spacecolor.lch.c*=1.2;// saturate by increasing LCH chroma by 20%color.hwb.w+=10;// any other color space also available
Coordinates of the color's color space are available without a prefix:
letcolor=newColor("slategray").to("lch");color.l=80;// Set LCH lightnesscolor.c*=1.2;// saturate by increasing LCH chroma
Convert to any color space:
letcolor=newColor("slategray");color.to("lch")// Convert to LCH
Output in any color space
letcolor=newColor("slategray");color+"";// default stringificationcolor.to("p3").toString({precision:3});
Clip to gamut or don't
letcolor=newColor("p3",[0,1,0]);color.to("srgb")+"";// Default toString()color.to("srgb").toString({inGamut:false});
Get a function that accepts a percentage:
letcolor=newColor("p3",[0,1,0]);letredgreen=color.range("red",{space:"lch",// interpolation spaceoutputSpace:"srgb"});redgreen(.5);// midpoint
Interpolation by discrete steps:
letcolor=newColor("p3",[0,1,0]);color.steps("red",{space:"lch",outputSpace:"srgb",maxDeltaE:3,// max deltaE between consecutive stepssteps:10// min number of steps});
Shortcut for specific points in the range:
letcolor=newColor("p3",[0,1,0]);letredgreen=color.mix("red",.5,{space:"lch",outputSpace:"srgb"});letreddishGreen=color.mix("red",.25,{space:"lch",outputSpace:"srgb"});
Static syntax (every color method has a static one too):
Color.mix("color(display-p3 0 1 0)","red",.5);
These are all very experimental and not as polished as Color.js itself, but we are excited about their potential.
This is a set of (currently 10) web components for building color-related apps (the first library of its kind to our knowledge).It includes things like color pickers, color charts, interactive color scales, and more.
A set of color-related apps, such as color pickers, converters, and more.
A research project which aims to analyze designer-created color palettes in a variety of color spaces,both to document patterns (e.g. what hue names are most popular?)and to understand what makes aesthetically pleasing color scales.
About
Color conversion & manipulation library by the editors of the CSS Color specifications
Topics
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.