Color Wheel

Interactive color wheel React component for creating and manipulating color harmonies with support for multiple harmony modes and customization options.

Play around and Generate component code here:
https://studiotoolkit.github.io/build-color-wheel

Complete Demo:
https://studiotoolkit.github.io/demo-all

Features

Harmony Modes

Customization Options

Installation

# Using pnpm
pnpm add @studiotoolkit/color-wheel

# Using npm
npm install @studiotoolkit/color-wheel

# Using yarn
yarn add @studiotoolkit/color-wheel

React Version: ^18.0.0 or higher

Usage

Basic Usage

import { ColorWheel } from '@studiotoolkit/color-wheel';
import '@studiotoolkit/color-wheel/style.css';

function App() {
  const handleColorsChange = (palette) => {
    console.log('Selected colors:', palette);
  };

  return (
    <ColorWheel
      onColorsChange={handleColorsChange}
      harmonyMode="complementary"
      width={300}
      height={300}
    />
  );
}

Sample Output:

{
  "split": ["#00b1ff", "#ff0031", "#ffce00"]
}

With Custom Styling

import { ColorWheel } from '@studiotoolkit/color-wheel';
import '@studiotoolkit/color-wheel/style.css';

function App() {
  const handleColorsChange = (palette) => {
    console.log('Selected colors:', palette);
  };

  return (
    <ColorWheel
      onColorsChange={handleColorsChange}
      harmonyMode="triadic"
      saturation={100}
      brightness={50}
      width={400}
      height={400}
      wheelThickness={80}
      dotSize={5}
      dotPosition="outer"
      handleThickness={2}
      handleColor="#000000"
      harmonyPolygon={true}
      polygonColor="#000000"
      polygonThickness={1}
      showCenterDot={true}
      centerDot="#ffffff"
      borderColor="#ffffff"
      canvasBackgroundColor="transparent"
    />
  );
}

Harmony Modes

The ColorWheel supports the following harmony modes:

• complementary - Colors opposite on the color wheel
• analogous - Adjacent colors on the color wheel
• monochromatic - Variations of a single hue
• split - Split complementary harmony
• triadic - Three evenly spaced colors
• square - Four evenly spaced colors
• simple - Single color selection

Contributors

StudioToolkit

License

Licensed under the MIT License.

Keywords

color-wheel, color-picker, color-harmony, harmony-polygon, react-color, color-selection, design-tools, ui-components