KusStar / harmony

A new kind of color picker for React

Harmony

A new kind of Color Picker, which computes harmonic colors along with the primary one. It supports Analogous, Triad, Tetradic, Complementary & Square harmonies.

Read more about the implementation here.

Installation

Harmony is available on the npm registry. It requires React as a peer dependency.

pnpm install @newfrgmnt/harmony

API

import {ColorWheel} from '@newfrgmnt/harmony';

export const MyColorPicker = () => {
    return (
        <ColorWheel harmony="analogous" radius={200} />
    );
}

Supported properties

radius: number;
harmony: 'tetradic' | 'triad' | 'analogous' | 'square' | 'complementary';
color?: {hue: number, saturation: number, value: number};
defaultColor?: {hue: number, saturation: number, value: number};
onChange?: (colors: { hue: number; saturation: number; value: number }[]) => void;

Convert the HSV format to RGB

You can use the following function to convert the HSV output to RGB.

function HSVtoRGB(h: number, s: number, v: number) {
  var r, g, b, i, f, p, q, t;
  h = h / 360;
  i = Math.floor(h * 6);
  f = h * 6 - i;
  p = v * (1 - s);
  q = v * (1 - f * s);
  t = v * (1 - (1 - f) * s);
  switch (i % 6) {
    case 0:
      (r = v), (g = t), (b = p);
      break;
    case 1:
      (r = q), (g = v), (b = p);
      break;
    case 2:
      (r = p), (g = v), (b = t);
      break;
    case 3:
      (r = p), (g = q), (b = v);
      break;
    case 4:
      (r = t), (g = p), (b = v);
      break;
    case 5:
      (r = v), (g = p), (b = q);
      break;
  }
  return {
    r,
    g,
    b,
  };
}