Color Notebook

title: Supported Color Spaces

{% include "docs/images/spaces.svg" %}
Tree of all color spaces supported by Color.js and their dependencies.

Color spaces are ColorSpace objects. Every function in Color.js that takes a color space reference can take it in one of two forms:

  • A string id of a registered color space
  • A ColorSpace object

When you import a module that defines a color space in the Object-Oriented API, this uses ColorSpace.create() which does two things:

  1. It invokes the ColorSpace constructor to create a new ColorSpace object
  2. It calls ColorSpace.register() to register the color space so it can be referenced with a string id. This just adds the color space to the ColorSpace.registry object.

If you are using the prodcedural API, you need to register color spaces yourself, by calling ColorSpace.register(colorSpaceReference).

{% for id, space in spaces %} {% set spaceAccessor = id | replace("-", "_") %}

{{ space.name }}

{% set filePath = 'src/spaces/' + (space.aliasOf or id) + '.js' %} {{ filePath }}
{% if space.aliasOf %}

Alias of {{ spaces[space.aliasOf].name }}

{% endif %}
{% renderTemplate "njk,md", space %} {{ description }} {% endrenderTemplate %}
{% if space.base %} {% endif %}
White point:
{{ space.white or "D65" }}
Coordinates:
{% for coordId, coord in space.coords %} {% if coordId === coord.name -%} {% else %} {% endif %} {% endfor %}
Id Name Ref. range
{{ coordId }}{{ coordId }} {{ coord.name }}{{ coord.min | number }} – {{ coord.max | number }} 
let color = new Color("{{ id }}", [
                {%- for coordId, coord in space.coords -%}
                    {{ coord.max | randomNumber(coord.min) }}{% if not loop.last %}, {% endif %}
                {%- endfor -%}
            ]);
{% for coordId, coord in space.coords -%}
color.{{ spaceAccessor }}.{{ coordId }} = {{ +((coord.min + coord.max) / 2).toPrecision(3) }};
{% endfor -%}
color.toString();
{% if space.url -%} Learn more about {{ space.name }} {% endif %}
{% endfor %}