Harmony

A new kind of color picker for React

ColorsReact
emilwidlund/harmonyharmony.sh@newfrgmnt/harmony

README

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


  1. ```typescript
  2. import {ColorWheel} from '@newfrgmnt/harmony';

  4. export const MyColorPicker = () => {
  5.     return (
  6.         <ColorWheel harmony="analogous" radius={200} />
  7.     );
  8. }
  9. ```

Supported properties


  1. ```typescript
  2. radius: number;
  3. harmony: 'tetradic' | 'triad' | 'analogous' | 'square' | 'complementary';
  4. color?: {hue: number, saturation: number, value: number};
  5. defaultColor?: {hue: number, saturation: number, value: number};
  6. onChange?: (colors: { hue: number; saturation: number; value: number }[]) => void;
  7. ```

Convert the HSV format to RGB


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

  1. ```typescript
  2. function HSVtoRGB(h: number, s: number, v: number) {
  3.   var r, g, b, i, f, p, q, t;
  4.   h = h / 360;
  5.   i = Math.floor(h * 6);
  6.   f = h * 6 - i;
  7.   p = v * (1 - s);
  8.   q = v * (1 - f * s);
  9.   t = v * (1 - (1 - f) * s);
  10.   switch (i % 6) {
  11.     case 0:
  12.       (r = v), (g = t), (b = p);
  13.       break;
  14.     case 1:
  15.       (r = q), (g = v), (b = p);
  16.       break;
  17.     case 2:
  18.       (r = p), (g = v), (b = t);
  19.       break;
  20.     case 3:
  21.       (r = p), (g = q), (b = v);
  22.       break;
  23.     case 4:
  24.       (r = t), (g = p), (b = v);
  25.       break;
  26.     case 5:
  27.       (r = v), (g = p), (b = q);
  28.       break;
  29.   }
  30.   return {
  31.     r,
  32.     g,
  33.     b,
  34.   };
  35. }
  36. ```