🎨 React Color Palette Wheel

A professional, lightweight, and fully typed color wheel component for React. Inspired by tools like Adobe Color, this library allows color selection based on Chromatic Harmonies (Triad, Complementary, Analogous, etc.) with geometric precision.

!npm bundle size
!npm version
!license

✨ Highlights

* Ultra Lightweight: Only ~16.4kB (packed).
* Mathematical Harmonies: Precise algorithms for complex color schemes.
* TypeScript: Native type definitions (.d.ts) included.
* Performance: Optimized Canvas rendering.
* Zero Config: Works out of the box with sensible defaults.

📦 Installation

``bash npm install react-color-palette-wheel

`or`


yarn add react-color-palette-wheel

`🚀 Basic Usage`

`ts import { useState } from 'react'; import { ColorWheel, HarmonyType, CursorData } from 'react-color-palette-wheel';

function App() { const [colors, setColors] = useState([]);

return (


            Harmony Selector

            
                            radius={250}                 // Wheel radius (Total diameter: 500px)
                harmony={HarmonyType.Triad}  // Harmony type (e.g., Triad)
                onChange={setColors}         // Callback with selected colors
            />


    );
}

Sandbox

https://codesandbox.io/p/sandbox/eloquent-franklin-rh3357

!image

🛠️ Build Details

* Formats: ESM (.es.js) and UMD (.umd.js).
* Size: ~16kB (Minified + Gzipped).
* Typing: Full TypeScript support.

📄 License

MIT