chromataxy-css v1.0.4

• Over 3 lakh named colors and 2.3 million future-proof utility classes
• Perceptually uniform1 colours
• Semantically sound names
• ii8n2 friendly
• Accessible by design

Why not other Color Spaces?

• HSL While this transformation of RGB color space is more intuitive in its representation, the lightness in HSL does not represent perceptual lightness but rather relative brightness.
• Munsell : While colors were loosely based on perception, they were mostly inconsistent and dependent on the environment. Moreover, quantitative differences could only be defined over a single color attribute3.
• NCS : Based on the psychophysics of color perception, NCS is better than Munsell as environmental lighting conditions do not impact color choices. However, this system must not be used to model perceived color differences4, which is necessary requirement for a naming system to be accessible.
• LAB : Though the CIELAB color space represents a broader color gamut with better perceptual accuracy than the Munsell System, the parameters a* and b* makes it harder to arrive at a mental model.

Installation and Usage

Install the package using npm or yarn like:

npm i chromataxy-css // or yarn add chromataxy-css

For development purposes, you can use either the 40 MB coxy.scss file:

/* Your main.scss file, etc. */
@import "~chromataxy-css/coxy"

or the 455 MB ./css/coxy.css file:

/* Your main.css file, etc. */
@import "~chromataxy-css/css/coxy"

Since both of these files are humongous in size, usage of purgecss is highly recommended to remove unused css from your production build to drastically reduce your filesize.

Designing the Nomenclature of Color

To ensure that the naming system is semantically intuitive and accessible, simple adjectives suffixed with their positive, comparative and superlative forms were used to describe the different dimensions of color.

Degrees of Hue Table

All the numbers have units in degrees (not radians). This naming method adds an additional dimension of temperature to distinguish transitional colours between two hues, effectively naming a hue for every 3° rotation. In this table, Base denotes only the root colour without a describing adjective being attached to it. The base color names are generated from the nearest equivalents in Named HTML CSS Colors.

This results in a whopping 126 hue variations per combination of chroma and lightness.

Chroma Table

The chroma range (0 - 100) is split into 12 (3 forms of 4 comparative adjectives each) adjectives with 2 extra stops for denoting gray and base colors totalling 14 segments. In this table, Base denotes only the root colour without a describing adjective being attached to it.

Lightness Table

The lightness range (0 - 100) is split into 12 (3 forms of 4 comparative adjectives each) adjectives with 4 extra stops for denoting white, black and base colors totalling 15 segments. In this table, Base denotes only the root colour without a describing adjective being attached to it.

Rationale : Among the 4 chosen adjectives, 2 adjectives (dark and dim) are used to denote the shades of a color while the other 2 (pale and bright) are used to denote the tints. Here, the adjectives describe the lighting of a windowless room (a room without an external light source). Hence, black corresponds to a pitch black room with walls painted with 100% light-absorbing paint and vice versa.

Alpha Table

The alpha range (0 - 100) is split into 9 (3 forms of 3 comparative adjectives each) adjectives with 2 extra stops for denoting transparent and base colors totalling 11 segments. In this table, Base denotes only the root colour without a describing adjective being attached to it.

Rationale : The adjectives chosen (clear, misty and foggy) indicate the appearance of a glass paned window under various weather conditions. Here, a perfectly clear window equates to a transparent color and vice versa.

Thus, each hue consists of 210 variations of Chroma and Lightness. Given that there are 126 hues, About 26,460 named colors can be derived. If we factor in the additional dimension of Transparency, A staggering collection of 2,91,060 named colors can be derived. Of these, removing redundant colors such as shades of pure black, pure white and transparency across all hues, we are left with 2,10,391 unique named colors.

To put that number in perspective, If you cycle through every unique color generated by coxy as your daily desktop wallpaper, it would approximately take you 58 years to eventually run out of unique wallpapers (not including transparency).

Additional Utility Classes

Furthermore, the css utility classes offers graceful degradation irrespective of the hardware support available thus making your css future-proof.

Very enticing... But I still feel reluctant about the size...

No Worries! A small postcss plugin is currently in the works which will eliminate the need for the above files. This repository mainly houses the code for generating the colours and testing its feasibility. The Postcss plugin will also provide multiple language support.

Footnotes

1: A system is perceptually uniform if a small perturbation to a component value is approximately equally perceptible across the range of that value. In terms of colour spaces, a small degree of change between hues across the range (0°-360°) correspond to a similar increase in chroma and lightness that are perceptually equivalent under natural vision.

2: Abbreviation for Internationalisation, which in this context, refers to multilingual compatibility.

3: Modern Color Models - Munsell Color System. http://www.handprint.com/HP/WCL/color7.html#MUNSELL

4: Modern Color Models - Swedish Natural Color System. http://www.handprint.com/HP/WCL/color7.html#NCS