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.

meodai/RYBitten