HSL Color wheel component using React & tailwindcss

A HSL Color wheel component built using Reactjs and tailwindcss to visualize HSL color mode. In case you are curious, the hue angle is calculated by converting the planar cartesian values (x,y) to polar value theta - which represents the angle in the hue wheel.

Libraries used

  • → React
  • → Tailwindcss
  • → chroma-js ✨
  • → lodash


0 deg
.box {  background: hsl(0deg 50% 50%);}