- Notifications
You must be signed in to change notification settings - Fork0
A powerful color manipulation and generation library with theming in mind.
License
NotificationsYou must be signed in to change notification settings
Talesoft/color-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A color manipulation and conversion library.
It's supposed to ease up creation of JS-based frontend themes when using CSS in JavaScript.
It's written for React's Styled Components and Emotion CSS and designed to work well with it,but does work well anywhere where you need color manipulation and automaticgeneration of color schemes.
- Parsing of different color formats
- 866 different color names (List)
- Hexadecimal colors (e.g.
#f0aor#ef0bac) - CSS color functions (e.g.
rgb(255, 127, 0)orhsla(180, 1, .5))
- Convert colors between different color spaces. Supported/planned spaces:
- RGB/RGBA
- HSL/HSLA
- HSV/HSVA
- CMYK Approximation
- CIE-XYZ
- CIE-LAB
- Retrieving information from colors
- Get RGB information (amount of red, green and blue)
- Get HSL information (hue/color tone, saturation, lightness)
- Get alpha information (transparency)
- Color manipulation
- darken, lighten, saturate and desaturate colors
- Change color properties like the amount of red or green
- inverse and mix colors
- Change transparency of colors (fade in, fade out)
- Generate complementary or similar colors
- Easily generate color schemes and palettes from base colors
- Complementary schemes (playing with hues)
- Shades, tints and tones of colors
npm i @talesoft/color
TypeScript supported by default.
Directly access known colors and manipulate them:
importColorfrom'@talesoft/color';constdarkRed=Color.red.darken(.2);console.log(`Dark red is:${darkRed}`);// "Dark red is: #900"
Works well with e.g. Styled-Components/Emotion CSS for React:
constStyledDiv=styled.div` background-color:${Color.mediumCarmine.darken(.1).fadeOut(.2)}; color:${Color.palatinatePurple};`;
Use thedye template tag orColor.parse to quickly parse and modify own colors.
importColor,{dye}from'@talesoft/color';constdarkRed=dye`#f00`.darken(.2);console.log(`Dark red is:${darkRed}`);constdarkGreen=Color.parse('rgb(0, 255, 0)').darken(.2);console.log(`Dark green is:${darkGreen}`);
Color.parse anddye support most commonly known ways to write colors
importColor,{dye}from'@talesoft/color';constred=Color.parse('#f00');constgreen=dye`#00ff00`;constgreen=dye`green`;constyellow=dye`rgb(255, 255, 0)`;constredToo=dye`hsl(0, 1, .5)`;// Percent values are allowed anywhereconstredAgain=dye`rgb(100%, 0%, 0%)`;
Pick from a growing list of color manipulation functions
constcolor=Color.pastelYellow;// Get RGB Valuesconsole.log(color.red,color.green,color.blue);// 253, 253, 150// Get HSL Valuesconsole.log(color.hue,color.saturation,color.lightness);// 60, 0.790..., 0.962...// Get the transparency/opacityconsole.log(color.opacity);// 1// Modify Red valuecolor=color.withRed(255);// Modify Green Valuecolor=color.withGreen(255);// Modify Blue valuecolor=color.withBlue(255);// Modify Hue value (color tone)color=color.withHue(180);// Modify saturationcolor=color.withSaturation(.4);// Modify lightnesscolor=color.withLightness(.2);// Modify opacity/transparencycolor=color.withOpacity(.5);// Get complementary colorcolor=color.complement();// Mix colorscolor=color.mix(Color.red);// Using subtractive model by defaultcolor=color.mix(Color.red,MixMode.RGB_ADDITIVE);// Lighten/darken a colorcolor=color.lighten(.1);color=color.darken(.2);// Tint or tone colors (increase or decrease saturation)color=color.tint(.1);color=color.tone(.2);// Invert a colorcolor=color.invert();// Get the grayscale version of colorcolor=color.grayscale();// Increase/decrease opacity of a colorcolor=color.fadeIn(.2);color=color.fadeOut(.1);// Cast to strings/outputconsole.log(color.toFunctionExpression());// e.g. "rgb(255,43,45)"console.log(color.toHexExpression());// e.g. "#34ca3f"// Perfectly fitting string representation for CSSconsole.log(color.toString());console.log(`Color:${color}`);console.log('Color: '+color);
Easily create automatically generated color schemes from your colors:
import{dye}from'@talesoft/color';const{ primary, secondary}=dye`#f00`.complements;// primary will be red, secondary will be green (the complementary color)constshadesOfGrey=Color.gray.shades;shadesOfGrey.lightest;shadesOfGrey.lighter;shadesOfGrey.light;shadesOfGrey.normalshadesOfGrey.dark;shadesOfGrey.darker;shadesOfGrey.darkest;// Complex hue rotation schemes are supportedconst{ primary, secondary, tertiary, quartenary}=dye`#ce5a62`.tetradicComplements;// Easily run your own schemeimport{darken}from'@talesoft/color';const{ firstShade, secondShade, thirdShade}=dye`#ce5a62`.createScheme(['firstShade','secondShade','thirdShade'],darken,{start:.2,step:.2},);
Before contributing, check out theContribution Guidelines
Requires:npm
// Pull projectgit clone https://github.com/Talesoft/color-js// Enter project directorycd color-js// Install development dependenciesnpm install// ... make your changes ...// Run testsnpm runtest// Lintnpm run lint// Fix linting problemsnpm run lint:fix// Buildnpm run build// ... create branch, commit, push, merge request etc. ...