Repository files navigation

Color manipulation for use in consistent design systems. Uses HCL color space for computation, but allows simple format input and output.

See also Lea Verou’sColor.js and the awesomeblog post about HCL colors.

import{colorFromString}from"ui-colors";constthemeColorCode="#9973ba";constthemeColor=colorFromString(themeColorCode);consttext=themeColor.lightness>50 ?"black" :"white";constdark=themeColor.withLightness(30).asCss();constlight=themeColor.withLightness(80).asCss();

Beware of various number scales:

• Hue is 0-359;
• Red, green, blue components are 0-255;
• Opacity, HSL saturation and lightness are 0-1;
• Main lightness is 0 to 100 in practice, but isunbounded in theory
• Chroma is 0 to about 130 in practice, but is unbounded;

Simple: colorFromHex("#aabbcc"), colorFromLch(70, 12, 350), colorFromHsl(350, 0.2, 0.8), colorFromRgb(120, 120, 120). Opacity is an optional last argument.

Smart constructor tries to parse the string as any format it can think of: colorFromString("...").

color.chroma, color.hue, color.lightness, color.opacity, color.rgb.approximation

color.withChroma(12), color.withHue(350), color.withLightness(70)

color.asPrettyLch()

color.asCss().approximation, color.asPrettyHex().approximation, color.asPrettyHsl().approximation, color.asPrettyRgb().approximation