plotboilerplate/src/ts/utils/WebColors.ts

A simple javascript plotting boilerplate for 2d stuff.

/**
 * @author   Ikaros Kappler
 * @date     2018-11-10
 * @modified 2020-10-23 Ported to Typescript.
 * @modified 2020-10-30 Exporting each color under its name globally.
 * @modified 2025-12-08 Replaying self defined colors by official web colors.
 * @modified 2026-03-18 Fixing global `WebColors` array.
 * @version  1.0.3
 **/

import { Color } from "./datastructures/Color";

export const Red: Color = Color.Red; // Color.makeRGB(255,67,55);
export const Pink: Color = Color.Pink; // Color.makeRGB(232,31,100);
export const Purple: Color = Color.Purple; // Color.makeRGB(156,39,175);
export const DeepPurple: Color = Color.DeepPink; // Color.makeRGB(103,59,184);
export const Indigo: Color = Color.Indigo; // Color.makeRGB(64,81,181);
export const Blue: Color = Color.Blue; // Color.makeRGB(35,151,245);
export const LightBlue: Color = Color.LightBlue; // Color.makeRGB(6,170,245);
export const Cyan: Color = Color.Cyan; // Color.makeRGB(3,189,214);
export const Teal: Color = Color.Teal; // Color.makeRGB(1,150,137);
export const Green: Color = Color.Green; // Color.makeRGB(77,175,82);
export const LightGreen: Color = Color.LightGreen; // Color.makeRGB(141,195,67);

/**
 * A set of beautiful web colors (I know, beauty is in the eye of the beholder).
 *
 * I found this color chart with 11 colors and think it is somewhat nice
 *    https://www.pinterest.com/pin/229965124706497134/
 *
 * @requires Color
 *
 */
export const WebColors: Array<Color> = [
  Color.Red,
  Color.Pink,
  Color.Purple,
  Color.DeepPink,
  Color.Indigo,
  Color.Blue,
  Color.LightBlue,
  Color.Cyan,
  Color.Teal,
  Color.Green,
  Color.LightGreen
];

/**
 * A helper function to shuffle the colors into a new order.
 */
export const shuffleWebColors = (order: Array<number>) => {
  const result: Array<Color> = Array(order.length);
  for (var i = 0; i < order.length; i++) {
    result[i] = WebColors[order[i] % WebColors.length];
  }
  return result;
};