Color Picker for Harmonic Color Combinations – Harmony

Description:

The ‘Harmony’ color picker component is designed to make it easy to generate harmonic color combinations.

It computes complementary colors based on the primary color selected.

This allows developers and designers to easily create color palettes with built-in harmony, for more aesthetically pleasing designs.

The key benefit of the ‘Harmony’ component is its ability to automatically generate five types of harmonic color palettes based on your chosen primary color. It supports:

  • Analogous colors – adjacent hues for smooth, refined palettes
  • Complementary colors – opposite hues for high contrast
  • Triadic colors – three hues equally spaced for vibrant combos
  • Tetradic colors – four hues forming a rectangle on the color wheel
  • Square colors – four hues forming a square for bold, dynamic palettes

This makes it fast and easy for developers to implement color theory. No more guesswork trying to pick colors that go well together!

How to use it:

1. Install and import the Harmony color picker component.

# NPM
$ npm install @newfrgmnt/harmony
import {ColorWheel} from '@newfrgmnt/harmony';

2. Add the ColorWheel to the app.

export const MyColorPicker = () => {
  return (
    <ColorWheel harmony="analogous" />
  );
}

3. Available component props.

radius: number
harmony: keyof typeof harmonies; // '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;

Preview:

Color Picker for Harmonic Color Combinations Harmony

Add Comment