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';exportconstMyColorPicker=()=>{return(<ColorWheelharmony="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.

functionHSVtoRGB(h: number,s: number,v: number){varr,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){case0:
(r=v),(g=t),(b=p);break;case1:
(r=q),(g=v),(b=p);break;case2:
(r=p),(g=v),(b=t);break;case3:
(r=p),(g=q),(b=v);break;case4:
(r=t),(g=p),(b=v);break;case5:
(r=v),(g=p),(b=q);break;}return{
r,
g,
b,};}