RYBitten 👄

RYBitten is a library for translating colors between RGB and a custom RYB color space. The library uses trilinear interpolation and is manually tuned to emulate Johannes Itten's chromatic circle. It is designed for developers, generative artists and designers who want to experiment with alternative color representations.

"Play becomes joy, joy becomes work, work becomes play." Johannes Itten, Bauhaus

Installation 📦

Install RYBitten with your favorite package manager:

npm install rybitten

Or include it directly in your HTML:

<script type="module">
  import { ryb2rgb, rybHsl2rgb, cubes } from "https://esm.sh/rybitten/";
</script>

Include RYBitten in your project

// ES6 style
import { ryb2rgb } from 'rybitten';

// CommonJS style
const { ryb2rgb } = require('rybitten');

Quick Start 🚀

All RGB and RYB values are in the range [0, 1].

import { ryb2rgb } from 'rybitten';

const rybColor = [1, 0, 0.5]; // RYB coordinates
const rgbColor = ryb2rgb(rybColor);

console.log(rgbColor); // Outputs the converted RGB coordinates

Functions 📖

ryb2rgb(coords: ColorCoords, {cube?: ColorCube = RYB_CUBE, easingFn? = smoothstep}): ColorCoords

• coords: [0…1, 0…1, 0…1] RYB coordinates
• options: (optional) An object with the following properties:
  • cube: (optional): See the note on the color cube below defaults to RYB_ITTEN
  • easingFn: (optional) A custom easing function for the interpolation, defaults to smoothstep
• @return: [0…1, 0…1, 0…1] RGB coordinates

Converts RYB coordinates to RGB using trilinear interpolation. The default color cube is manually tuned to represent the RYB color space derived from Johannes Itten's color wheel. But you can pass your own cube if you want to experiment with different color spaces. (When interacting with the RGB cube on the demo page, the custom RYB_CUBE is visible in your console.)

white will turn to black, and black will turn to white. because the RYB is based on the subtractive color model, where white is the absence of color and black is the presence of all colors.

rybHsl2rgb(hsl: ColorCoords, {cube?: ColorCube = RYB_CUBE, easingFn? = smoothstep}): ColorCoords

• hsl: [0…360, 0…1, 0…1] HSL coordinates
• options: (optional) An object with the following properties:
  • cube: (optional) [See the note on the color cube below](#interpolation-color-cube,
  • easingFn: (optional) A custom easing function for the interpolation, defaults to smoothstep
  • invertLightness: (optional) Inverts the lightness value, defaults to true (0 is black, 1 is white), if set to false l:0 is white, l:1 is black
• @return: [0…1, 0…1, 0…1] RGB coordinates

Converts HSL coordinates to RGB, then translates them to the custom RYB color space using ryb2rgb. The HSL coordinates are in the range [0,360], [0, 1], [0, 1]. Lightness is inverted to match the RYB color space.

Interpolation Color Cube 🎛️ {#cube}

The default RYB color cube used for interpolation in RYBitten is tuned to mimic Johannes Itten's chromatic circle. By adjusting the cube, you can achieve different effects and customize the RYB to RGB conversion.

The cube is inverted to match the subtractive color model, where white is the absence of color and black is the presence of all colors.

const RYB_CUBE = [
  // White
  [253 / 255, 246 / 255, 237 / 255],
  
  // Red
  [227 / 255, 36 / 255, 33 / 255],
  
  // Yellow
  [243 / 255, 230 / 255, 0],
  
  // Orange
  [240 / 255, 142 / 255, 28 / 255],
  
  // Blue
  [22 / 255, 153 / 255, 218 / 255],
  
  // Violet
  [120 / 255, 34 / 255, 170 / 255],
  
  // Green
  [0, 142 / 255, 91 / 255],

  // Black
  [29 / 255, 28 / 255, 28 / 255],
];

Custom Color Gamuts 🎨

The library ships with a curated list of color gamuts that you can use to experiment with different color spaces. The default gamut is based on the work of Johannes Itten. But you can access other gamuts by importing the CUBES map.

Each gamut is an object with the following properties:

• title: The name of the color space
• reference: A reference image used to pick the edges of the custom color gamut
• year: The year the color space was introduced
• cube: The color cube used for interpolation

import { cubes, rybHsl2rgb } from 'rybitten';

const cube = cubes.get('munsell');

console.log(cube); 
/**
 * {
 *  title: 'Munsell',
 *  reference: 'munsell.jpg',
 *  year: 1905,
 *  cube: [
 *  ...cube data
 *  ]
 * }
 */

rybHsl2rgb([0, 1, 0.5], cube);

Available Color Gamuts

Historical Color Spaces

| Key | Title | Year | Reference | | --- | --- | --- | --- | | itten | Johannes Itten: Chromatic Circle | 1961 | reference | | itten-normalized | Johannes Itten: Chromatic Circle (Paper-white) | 1961 | reference | | bezold | Wilhelm von Bezold: Farbentafel | 1874 | reference | | boutet | Claude Boutet: Twelve-color color circles | 1708 | reference | | hett | J. A. H. Hett: RGV Color Wheel | 1908 | reference | | schiffermueller | Ignaz Schiffermüller: Versuch eines Farbensystems | 1772 | reference | | harris | Harris: The Natural System of Colours | 1766 | reference | | goethe | Goethe: Farbenkreis | 1809 | reference | | munsell | Munsell Color System | 1905 | reference | | hayer | Charles Hayter: New Practical Treatise on the Three Primitive Colours | 1826 | reference | | bormann | Heinrich-Siegfried Bormann: Gouache tint study for Josef Alber's Preliminary Course" | 1931 | reference |

Featured Artist Spectrum

The following color spaces were provided by artists and designers who have contributed to the project.

| Key | Title | Year | Reference | | --- | --- | --- | --- | | ippsketch | Ippsketch: imposter syndrome | 2022 | reference |

License 📄

RYBitten is distributed under the MIT License.