![\"CSS-in-JS](\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2022\/05\/css-in-js-jss-tutorials-300x158.png\")
<\/p>\n<\/p>\n
One of many draws of CSS libraries like Sass and Less are their wide assortment of color manipulation functions such as lighten<\/strong>, darken<\/strong>, saturate<\/strong>, etc. With the growing popularity of CSS-in-JS, the need for JavaScript (JS) equivalents has followed suit. Right on cue, a number of JS libraries for color conversion and manipulation have cropped up to make the jobs of web developers easier. In fact, right now it is hard to settle on which one to use. One library that comes recommended by the popular JSS<\/a> CSS-in-JS library is simply called “color<\/a>“. It is quite feature rich, having more to offer than say color2k and a smaller size than chroma.js. This web development tutorial will provide an overview of some of color’s<\/strong> many features and put them to work in an Angular Single Page Application (SPA).<\/p>\n Before getting started, you may want to check out our Introduction to CSS-in-JS tutorial<\/a>.<\/p>\n The recommended way to install color<\/strong> is to use the Node Package Manager (NPM). The command is simply:<\/p>\n Or even Then you can refer to it in your node.js files using require:<\/p>\n In Angular, you should use import<\/strong>:<\/p>\n The exposed Color<\/strong> object provides a few different constructors to choose from, most of which accept some permutation of Red Green Blue (RGB) values. It will also accept a limited number of strings, such as the oft-used HEX format:<\/p>\n Under the covers, String<\/strong> constructors are handled by the color-string<\/a> library.<\/p>\n You can learn more about dynamic styling options by reading our Dynamic Styling with JSS<\/a> tutorial.<\/p>\n Color’s<\/strong> API was heavily inspired by color-js<\/a>, whose manipulation functions closely resemble those of CSS tools like Sass, LESS, and Stylus. But, before we get to those, let’s look at how to convert colors to other formats.<\/p>\n CSS supports a multitude of color types, from preset names like “aliceblue<\/strong>“, and “teal<\/strong>” to HEX (“#ee652e<\/strong>“), RGB (rgb(138, 238, 130))<\/strong>, and RGBA (rgba(0,255,0,0.75))<\/strong>.<\/p>\n Looking for the rgb<\/strong> number value? Call the hex()<\/strong> method:<\/p>\n Convert a color to an rgb<\/strong> object:<\/p>\n Here’s how to set a hash of the color value and reflect the color’s current model:<\/p>\n To get the individual rgb<\/strong> values, use these:<\/p>\n Read<\/strong>: Using an Angular Service to Read Sass Variables<\/a><\/p>\n Sass comes with a lot of great functions that can easily be applied to CSS colors. These functions take some of the sting out of choosing and manipulating colors. These include darken<\/strong> and lighten<\/strong>, saturate<\/strong> and desaturate<\/strong>, rgba<\/strong>, and more. So, too, with the color<\/strong> library. Here’s a sampling:<\/p>\n Other useful manipulation functions include:<\/p>\n All of the above functions may be chained together:<\/p>\n Other functions provide information about a color:<\/p>\n In the last couple of articles on CSS-in-JS we have been adapting the Using an Angular Service to Read Sass Variables Demo<\/a> to employ JSS<\/a> to set an Angular component’s colors via @Input<\/strong> parameters. Although JSS and color.js make a perfect pairing, each library can be used independently of the other. To emphasize that point, we will apply color.js<\/strong> to the Color Service that defines the theme colors for the application.<\/p>\n In the app.component.scss<\/strong> file, Sass functions are employed to set the light<\/strong> and dark<\/strong> versions of the base colors:<\/p>\n Imagine a situation where our application was built using vanilla CSS rather than Sass. Without access to the Sass functions, we would require another means of affecting the base colors. That would be an ideal use of the color library.<\/p>\n We would still have access to the three base colors via CSS variables:<\/p>\n Now, in loadColors()<\/strong>, we can add two additional calls to the new setMapColor()<\/strong> function for each CSS property’s light<\/strong> and dark<\/strong> variation:<\/p>\n Extracting the code to set the _colorMap <\/strong>entry to a helper function only makes sense since we have to do it three times for each CSS property:<\/p>\n You can see how all of the above code works together in the stackblitz demo<\/a>.<\/p>\nHow to Setup and Install the JSS color Library<\/h2>\n
$ npm install color\r\n<\/pre>\n
npm i color<\/code> if you are really into minimizing typing.<\/p>\nconst Color = require('color');\r\n<\/pre>\nimport Color from 'color';\r\n<\/pre>\n
const color = Color('#FFFFFF');\r\nconst color = Color('rgb(255, 255, 255)');\r\nconst color = Color({r: 255, g: 255, b: 255});\r\nconst color = Color.rgb(255, 255, 255);\r\nconst color = Color.rgb([255, 255, 255]);\r\n<\/pre>\nExploring the JS Color API<\/h2>\n
color.hex() \/\/ #ffffff\r\n<\/pre>\n
color.object(); \/\/ {r: 255, g: 255, b: 255}\r\n<\/pre>\ncolor.rgb().array() \/\/ [255, 255, 255]\r\n<\/pre>\n
color.red() \/\/255\r\ncolor.green() \/\/255\r\ncolor.blue() \/\/255\r\n<\/pre>\n
Color Manipulation Functions and CSS Colors<\/h3>\n
\/\/lighten by 50%\r\ncolor.lighten(0.5) \/\/ hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)\r\n\/\/darken by 50%\r\ncolor.darken(0.5) \/\/ hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)\r\ncolor.saturate(0.5) \/\/ hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)\r\ncolor.desaturate(0.5) \/\/ hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)\r\nrgba(10, 10, 10, 0.8)\r\n<\/pre>\n
color.grayscale() \/\/ #5CBF54 -> #969696\r\ncolor.whiten(0.5) \/\/ hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)\r\ncolor.blacken(0.5) \/\/ hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)\r\n\r\ncolor.fade(0.5) \/\/ rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)\r\ncolor.opaquer(0.5) \/\/ rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)\r\n\r\ncolor.rotate(180) \/\/ hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)\r\ncolor.rotate(-90) \/\/ hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)\r\n\r\ncolor.mix(Color(\"yellow\")) \/\/ cyan -> rgb(128, 255, 128)\r\ncolor.mix(Color(\"yellow\"), 0.3) \/\/ cyan -> rgb(77, 255, 179)\r\n<\/pre>\n
color.green(100).grayscale().
color.isLight() \/\/ true\r\ncolor.isDark() \/\/ false\r\n<\/pre>\n
Using color.js to Set Theme Colors<\/h2>\n
$backgroundColor: rgb(82, 172, 240);\r\n$lightBackgroundCcolor: lighten($backgroundColor, 16%);\r\n$hoverColor: blue;\r\n$darkHoverColor: darken($hoverColor, 20%);\r\n$focusBorderColor: darkgray;\r\n$darkFocusBorderColor: darken($focusBorderColor, 40%);\r\n<\/pre>\n
.color-demo-app {\r\n --background-color: rgb(82, 172, 240);\r\n --hover-color: blue;\r\n --focus-border-color: lightgray;\r\n}\r\n<\/pre>\nimport Color from 'color';\r\n\r\nconst CSS_PREFIX = \"--\";\r\nconst CSS_SUFFIX = \"color\";\r\nconst CSS_DELIMITER = \"-\";\r\n\r\nexport enum PropertyNames {\r\n background = 'background',\r\n hover = 'hover',\r\n focusborder = 'focus-border'\r\n}\r\n\r\npublic loadColors() {\r\n \/\/ Read the custom property of body section with given name:\r\n const appElement = \r\n document.private setMapColor(\r\n propertyName: PropertyNames, \r\n value: string,\r\n colorOption = ColorOptions.standard \r\n) {\r\n const colorMapKey = <ColorProperty>{\r\n name: propertyName,\r\n option: colorOption\r\n };\r\n this._colorMap.set(\r\n JSON.stringify(colorMapKey),\r\n value\r\n );\r\n}\r\n<\/pre>\nConclusion<\/h2>\n