moxy-color

moxy-rgb

Comprehensive color library for your web development needs. Inspired by W3Schools.com

CSS Color Palettes

• Crayola - Features the main 16 colors of Crayola Crayons
• Flat UI - Features the main colors from the popular Flat UI theme
• iPhone - Features the main colors of the iPhone 11
• Metro - Features the main colors of Metro UI
• Windows 8 - Features the main colors of Windows 8
• xkcd - Features over 900 named colors by the xkcd website, found here.

Color palettes include CSS vars which can be included into styles via:

.className {
	color: var(--colorName);
}

or via the existing classes, eg:

<span class="c-red">Text color is red</span>
<span class="bg-red">Background color is red</span>

Color Palette Generation

For each of the below functions, input is a HEX-based color value or RGB array. Output returns an array of 5 colors (R, G, B) that work well together with the input color.

• monochromaticColorPalette(color: string | number[]) - Returns different tones from the same hue.
• analogousColorPalette(color: string | number[]) - Returns colors that are next to each other on the RYB color wheel.
• complementaryColorPalette(color: string | number[]) - Returns colors that are on the opposite side of the RYB color wheel.
• triadicColorPalette(color: string | number[]) - Returns colors made up of hues that are equally spaced around the color wheel.
• compoundColorPalette(color: string | number[]) - Returns colors on both sides of the opposite hue.

Example use:

const { analogousColorPalette } = require('moxy-color')
console.log(monochromaticColorPalette('ff00ff'))
// returns an array of 5 colors, eg:
// [255, 179, 255]
// [255, 102, 255]
// [255, 26, 255]
// [204, 0, 204]
// [128, 0, 127]

Color conversion functions

• hexFromRgb(r: number, g: number, b: number) - Converts RGB (red, green, and blue) to hex value (eg, 'ff0000')
• hslToRgb(h: number, s: number, l: number) - Converts HSL (hue, saturation, and light) to RGB array
• rgbFromHex(hex: string) - Converts HEX (eg, 'ff0000') to RGB array ([255, 0, 0])
• rgbToHsl(r: number, g: number, b: number) - Converts RGB array to HSL

Helper functions

• textColorFromBgColor(color: string | number[]) - Returns #fff or #000 depending on a specified background color (hex or RGB array) to ensure the text is readable.

Color Palettes

const { ColorPalette } = require('moxy-color')
// Below are the propeties of the ColorPalette object
{
	Assorted: { // Arrays
		AdriftInDreams,
		Compatible,
		CuriosityKilled,
		GiantGoldfish,
		GoodFriends,
		Terra,
		ThoughtProvoking,
	},
	Brands: { // Arrays
		Amazon,
		Android,
		CreativeCommons,
		Facebook,
		Google,
		IBM,
		Intagram,
		Intel,
		Microsoft,
		Netflix,
		Nintendo,
		Pepsi,
		Reddit,
		Twitter,
		Yahoo,
	},
	Themes: { // Key-Value objects with named colors
		FlatUI,
		Metro,
		Windows8,
	},
	xkcd, // Key-Value object with named colors
}

Color Wheels

const { ColorWheel } = require('moxy-color')
// Supports Cyan/Magenta/Yellow, Red/Green/Blue, and Red/Yellow/Blue Color Palettes
{
	CMY,
	RGB,
	RYB,
}