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.

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

`pnpm install @newfrgmnt/harmony`

```
import {ColorWheel} from '@newfrgmnt/harmony';
export const MyColorPicker = () => {
return (
<ColorWheel harmony="analogous" radius={200} />
);
}
```

```
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;
```

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,
};
}
```