Color Representation

This example demonstrates using the Color class to create some basic colors. You can use the toString() output to setting HTML element properties, for example. By default, it will return a hexadecimal color code, but if specified, it can return the RGB or HSL color codes.

Installation

Follow these steps to create a new project workspace and install the viridis dependency to run this example.

# Create and open project folder
mkdir Color_Representation_demo
cd Color_Representation_demo
# Initialize project and install dependencies
npm init -y
npm i viridis@1.4.2
# Create and open source file
touch "Color Representation.mjs"
open "Color Representation.mjs"
Copy

Source

Copy and paste this source code into Color Representation.mjs.

import { Color } from 'viridis';

// getContrastingColor() will always return black or
// white, depending on which one has better contrast.
const background = new Color(255, 0, 0),
    foreground = background.getContrastingColor(),
    border = Color.hex('#00beef');

// Automatically calls the toString() member function
console.log('Background: ' + background);
console.log('Foreground: ' + foreground);
console.log('Border color: ' + border.toString('hsl'));
Copy

Output

In Color_Representation_demo/, execute Color Representation.mjs with NodeJS to generate an output.

node "Color Representation.mjs"
Copy

You should expect to see an output similar to the one below.

Background: #FF0000
Foreground: #FFFFFF
Border color: hsl(192deg,100%,46%)
Copy