rybitten
Version:
A color space conversion library for transforming between RGB and RYB colors.
716 lines (629 loc) • 17.9 kB
text/typescript
/**
* Represents a color in RGB/HSX... space as an array of three numbers.
* @typedef {[number, number, number]} ColorCoords
*/
export type ColorCoords = [number, number, number];
/**
* Represents a color cube with exactly 8 RGB colors for RYB to RGB mapping.
* The colors are ordered as: white, red, yellow, orange, blue, violet, green, black
* @typedef {ColorCoords[] & { length: 8 }} ColorCube
*/
export type ColorCube = ColorCoords[] & { length: 8 };
/**
* Map storing historical and modern color cube definitions with their metadata.
* @typedef {Map<string, {
* title: string,
* author: string,
* reference: string,
* year: number,
* cube: ColorCube
* }>} CubesMap
*/
export type CubesMap = Map<
string,
{
title: string;
author: string;
reference: string;
year: number;
cube: ColorCube;
}
>;
/**
* Default RYB color cube based on Johannes Itten's chromatic circle (1961).
* Contains 8 key colors in RGB space:
* 1. White - Base color, slightly warm [253/255, 246/255, 237/255]
* 2. Red - Primary [227/255, 36/255, 33/255]
* 3. Yellow - Primary [243/255, 230/255, 0]
* 4. Orange - Secondary [240/255, 142/255, 28/255]
* 5. Blue - Primary [22/255, 153/255, 218/255]
* 6. Violet - Secondary [120/255, 34/255, 170/255]
* 7. Green - Secondary [0, 142/255, 91/255]
* 8. Black - Shade [29/255, 28/255, 28/255]
*/
export const RYB_ITTEN: ColorCube = [
// white
[],
// red
[],
// yellow
[],
// orange
[],
// blue
[],
// pink / but often violet in old color wheels
[],
// green
[],
// black
[],
];
const RYB_ITTEN_ALT: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_ITTEN_NEUTRAL: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_BEZOLD: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_BOUTET: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_HETT: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_SCHIFFERMUELLER: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_HARRIS: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_HARRISC82: ColorCube = [
// white
[],
// red
[],
// yellow
[],
// orange
[],
// blue
[],
// pink / but often violet in old color wheels
[],
// green
[],
// black
[],
];
const RYB_HARRISC82_ALT: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_GOETHE: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_MUNSELL: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_MUNSELL_ALT: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_HAYTER: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_BORMANN: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_ALBERS: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_LOHSE: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
//Michel Eugène Chevreul / Cercle_chromatique / Cercle_chromatique_Chevreul_2.jpg
const RYB_CHEVREUL: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// 1er cercle chromatique
const RYB_JAPSCHOOL: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_KIDERGARTEN1890: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// Maycock
const RYB_MAYCOCK: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_COLORPRINTER: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// Marvel Newsprint 1982
const RYB_MARVEL_NEWS: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// Apple 1990 reference manual
const RYB_APPLE90s: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// Apple Hyper Card User Manual 1989
const RYB_APPLE80s: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
// contemporary
const RYB_PixelArt: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_IPPSKETCH: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_RYAN: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_TEN: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_CLAYTON: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
const RYB_FARBENKUGEL: ColorCube = [
[],
[],
[],
[],
[],
[],
[],
[],
];
/**
* Collection of historical and contemporary RYB color cube definitions.
* Each cube is based on different color theories and historical works.
* Includes cubes from:
* - Historical color theorists (Itten, Goethe, Munsell, etc.)
* - Contemporary sources (Apple manuals, Marvel comics)
* - Modern digital artists (Ippsketch, etc.)
*
* Each entry contains:
* - title: Name of the color system/work
* - author: Creator of the color system
* - year: Year of creation
* - reference: Reference image filename
* - cube: The actual color values as RGB coordinates
*/
const cubes: CubesMap = new Map();
cubes.set("itten", {
title: "Chromatic Circle",
author: "Johannes Itten",
year: 1961,
reference: "farbkreis_extended.png",
cube: RYB_ITTEN,
});
cubes.set("itten-normalized", {
title: "Chromatic Circle (Paper-white)",
author: "Johannes Itten",
year: 1961,
reference:
"Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp",
cube: RYB_ITTEN_ALT,
});
cubes.set("itten-neutral", {
title: "Nathan Gossett & Baoquan Chen",
author: "Johannes Itten",
year: 1961,
reference: "itten-ryb.pdf",
cube: RYB_ITTEN_NEUTRAL,
});
cubes.set("bezold", {
title: "Farbentafel",
author: "Wilhelm von Bezold",
year: 1874,
reference: "Bezold_Farbentafel_1874.jpg",
cube: RYB_BEZOLD,
});
cubes.set("boutet", {
title: "Twelve-color color circles ",
author: "Claude Boutet",
year: 1708,
reference: "Boutet_1708_color_circles.jpg",
cube: RYB_BOUTET,
});
cubes.set("hett", {
title: "RGV Color Wheel",
author: "J. A. H. Hett",
year: 1908,
reference: "RGV_color_wheel_1908",
cube: RYB_HETT,
});
cubes.set("schiffermueller", {
title: "Versuch eines Farbensystems",
author: "Ignaz Schiffermüller",
year: 1772,
reference: "020_schiffermueller1.jpg",
cube: RYB_SCHIFFERMUELLER,
});
cubes.set("harris", {
title: "The Natural System of Colours",
author: "Moses Harris",
year: 1766,
reference: "Moses_Harris_The_Natural_System_of_Colours.jpg",
cube: RYB_HARRIS,
});
cubes.set("harrisc82", {
title: "The Natural System of Colours",
author: "Moses Harris / C82",
year: 1766,
reference: "harrisc82.png",
cube: RYB_HARRISC82,
});
cubes.set("harrisc82alt", {
title: "The Natural System of Colours",
author: "Moses Harris / C82",
year: 1766,
reference: "harrisc82alt.png",
cube: RYB_HARRISC82_ALT,
});
cubes.set("goethe", {
title: "Farbenkreis",
author: "Johann Wolfgang von Goethe",
year: 1809,
reference:
"Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg",
cube: RYB_GOETHE,
});
cubes.set("munsell", {
title: "Munsell Color System",
author: "Albert Henry Munsell",
year: 1905,
reference: "munsell-atlas-11.jpg",
cube: RYB_MUNSELL,
});
cubes.set("munsell-alt", {
title: "A Grammar of Color",
author: "Cleland, T. M. & Albert Henry Munsell",
year: 1921,
reference: "munsell-alt.jpg",
cube: RYB_MUNSELL_ALT,
});
cubes.set("hayter", {
title: "New Practical Treatise on the Three Primitive Colours",
author: "Charles Hayter",
year: 1826,
reference: "Color_diagram_Charles_Hayter.jpg",
cube: RYB_HAYTER,
});
cubes.set("bormann", {
title: "Gouache tint study for Josef Alber's Preliminary Course",
author: "Heinrich-Siegfried Bormann",
year: 1931,
reference: "bormann.png",
cube: RYB_BORMANN,
});
cubes.set("albers", {
title: "Interaction of Color",
author: "Josef Albers",
year: 1942,
reference: "albers-color-harmony.jpg",
cube: RYB_ALBERS,
});
cubes.set("lohse", {
title: "Kunsthalle Bern Poster",
author: "Richard Paul Lohse",
year: 1970,
reference: "lohse.png",
cube: RYB_LOHSE,
});
cubes.set("chevreul", {
title: "Cercle chromatique",
author: "Michel Eugène Chevreul",
year: 1839,
reference: "Cercle_chromatique_Chevreul_2.jpg",
cube: RYB_CHEVREUL,
});
cubes.set("runge", {
title: "Farbenkugel",
author: "Philipp Otto Runge",
year: 1810,
reference: "farbenkugel.png",
cube: RYB_FARBENKUGEL,
});
cubes.set("maycock", {
title: "Scale of Normal Colors and their Hues",
author: "Mark M. Maycock",
year: 1895,
reference: "maycock.png",
cube: RYB_MAYCOCK,
});
cubes.set("colorprinter", {
title: "The Color Printer",
author: "John Earhart",
year: 1892,
reference: "colorprinter.png",
cube: RYB_COLORPRINTER,
});
cubes.set("japschool", {
title: "Japanese Textbook",
author: "Japanese School",
year: 1930,
reference: "japschool.png",
cube: RYB_JAPSCHOOL,
});
cubes.set("kindergarten1890", {
title: "Kindergarten Workbook",
author: "Milton Bradley",
year: 1890,
reference: "kindergarten1890.jpg",
cube: RYB_KIDERGARTEN1890,
});
cubes.set("marvel-news", {
title: "64 Color Chart on Newsprint",
author: "Marvel Comics",
year: 1982,
reference: "marvel-news.png",
cube: RYB_MARVEL_NEWS,
});
cubes.set("apple90s", {
title: "Macintosh Reference Manual",
author: "Apple",
year: 1990,
reference: "apple90s.png",
cube: RYB_APPLE90s,
});
cubes.set("apple80s", {
title: "HyperCard User Manual",
author: "Apple",
year: 1989,
reference: "apple80s.png",
cube: RYB_APPLE80s,
});
cubes.set("clayton", {
title: "Intrinsic Value Plate",
author: "Greg Clayton",
year: 2017,
reference: "A260P03_IntrinsicValue1.gif",
cube: RYB_CLAYTON,
});
// mordern
cubes.set("pixelart", {
title: "Pixel Art",
author: "Tofu",
year: 2024,
reference: "pixelart.png",
cube: RYB_PixelArt,
});
cubes.set("ippsketch", {
title: "Imposter Syndrome",
author: "Ippsketch",
year: 2021,
reference: "ippsketch.png",
cube: RYB_IPPSKETCH,
});
cubes.set("ryan", {
title: "Compositions Palette",
author: "Ryan",
year: 2024,
reference: "ryan.png",
cube: RYB_RYAN,
});
cubes.set("ten", {
title: "Ten",
author: "Roni Kaufman",
year: 2022,
reference: "ten.png",
cube: RYB_TEN,
});
cubes.set("rgb", {
title: "Inverted RGB",
author: "James Clerk Maxwell",
year: 1860,
reference: "rgb-cube.png",
cube: [
[],
[],
[],
[],
[],
[],
[],
[],
],
});
export { cubes };