Color Utilities2.1.1
Provet Cloud Design System includes a collection of color utilities that are meant for creating and maintaining consistent and accessible color palettes.
Integrating @nordhealth/color into your project is straightforward. You can start using our color utilities immediately by adding this tag to the <head> of your application:
<script src="https://nordcdn.net/ds/color/2.1.1/index.min.js" integrity="sha384-jxrTtdfF/6hvgvhLE4alDoHJFk9JrEs860SBDqh8N/S4EMQ6Q9UA3CTRLbAEGY3i" crossorigin="anonymous"></script>With the above script tag added, you now have access to all of Provet Cloud’s color utilities via NordColor function:
<script>
const contrastRatio = NordColor.getContrastRatio(textColor, backgroundColor)
const colorPalette = NordColor.getColorPalette({ hues: 18 })
const hexToRgb = NordColor.hexToRgb("#3559c7")
const rgbToHex = NordColor.rgbToHex("rgb(53, 89, 199)")
</script>Installation
Before moving further with the installation, please make sure you have Node.js installed on your machine. You can install the latest version through their website.
If you’re planning on using Provet Cloud’s Color Utilities in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install Nord’s Color Utilities by following the instructions below.
Run in your project or website root directory (where package.json lives):
# With npm
npm install @nordhealth/color
# With pnpm
pnpm install @nordhealth/color
# With Yarn
yarn add @nordhealth/colorOnce installed, you can import the necessary tools from the color package:
// Import one utility
import { getContrastRatio } from "@nordhealth/color"
// Import all utilities
import { getColorPalette, getContrastRatio, hexToRgb, rgbToHex } from "@nordhealth/color"Contrast Ratio utility
getContrastRatio utility calculates and returns the contrast ratio between two CSS colors. Most commonly used for calculating the contrast between text and background. Please note that the utility expects the input color to be in HEX or RGB format:
// Get contrast ratio between two colors
const textColor = "#fafafa"
const backgroundColor = "#fafafa"
const contrastRatio = getContrastRatio(textColor, backgroundColor)This utility can be be used to determine whether a certain color combination passes the color contrast requirements (4.5:1 or higher contrast). We’re utilizing it in our Design Tokens documentation to determine accessible color combinations.
Color Palette utility
getColorPalette utility takes a valid CSS color as the base which is used for generating complementary colors. This utility is meant for creating and maintaining consistent and accessible color palettes. We use it internally to develop our existing Figma color palettes and to test new color variations:
// Generate a color palette with 18 hues
const colorPalette = getColorPalette({ hues: 18 })This utility can be be used to for example generate status colors programmatically. Combined with getTextColor utility you can make sure that generated color combinations stay accessible.
getColorPalette also allows you to set the number of color hues, number of shades, the amount of lightness, and whether gray is included or not:
// Generate a color palette with 12 hues and 1 shade
const colorPalette = getColorPalette({ hues: 12, shades: 1 })
// Generate a color palette with 12 hues, 1 shade and a gray hue
const colorPalette = getColorPalette({ hues: 12, shades: 1, gray: true })
// Generate a color palette with 12 hues and 1 shade, based on a custom accent color
const colorPalette = getColorPalette({ hues: 12, shades: 1, accent: "#2a469d" })
// Generate a color palette with 12 hues and 1 shade, with custom lightness
const colorPalette = getColorPalette({ hues: 12, shades: 1, lightness: 0.7 })Here’s a list of all available options with their default values:
getColorPalette({
accent: nColorAccent, // {String} Valid CSS color to be used as the base for calculations
hues: 12, // {Number} How many hues should be generated based on the accent color
shades: 1, // {Number} How many shades of each hue should be generated
lightness: 0.5, // {Number} Controls the overall lightness of color palettes (0-1)
gray: false // {Boolean} Whether or not to include a specific gray palette
})Hex to RGB utility
hexToRgb utility converts a HEX color to a RGB color:
// Convert hex to rgb
const hex = "#3559c7"
const rgb = hexToRgb(hex) // outputs "rgb(53, 89, 199)"RGB to HEX utility
rgbToHex utility converts a RGB color to a HEX color:
// Convert hex to rgb
const rgb = "rgb(53, 89, 199)"
const hex = rgbToHex(rgb) // outputs "#3559c7"For more examples, see Nord Color Generator.
Color generator
Nord Color Generator is a tool that generates color palettes programmatically for use with Provet Cloud Themes. While this tool demonstrates the capabilities of the color utilities found from @nordhealth/color package, it also acts as an internal tool for our team. We use it to develop our existing color palettes and test new color variations.
Getting support
Have a question about color usage? Please head over to the Support page for more guidelines and ways to contact us.