Gradiently

A minimal, lightweight colour picker to generate beautiful colours and gradients.

Demo

Installation

npm install gradiently

yarn add gradiently

pnpm add gradiently

Basic Usage

import { ColorWheel } from 'gradiently'

const [gradient, setGradient] =  useState<string>("");

<ColorWheel
  radius={120}
  onChange={setGradient}
/>

Advanced Usage

const [gradient, setGradient] =  useState<string>("");

<ColorWheel
  radius={120}
  pickers={2}
  gradientType={'linear'}
  direction={'right'}
  onChange={setGradient}
/>

Props

Prop	Type	Default Value	Required?
radius	number	100	no
pickers	number	3 (max 3, min 1)	no
onChange	(value: string) => void		yes
gradientType	linear or radial	linear	no
direction	DirectionsIndex	right	no

DirectionsIndex type

import { ColorWheel, DirectionsIndex } from 'gradiently'

type DirectionsIndex = "top" | "top right" | "right" | "bottom right" | "bottom" | "bottom left" | "left" | "top left"