npm install react-colorblender
import { ColorPicker } from 'react-colorblender';
import React from 'react';
import { ColorPicker, useColor } from 'react-colorblender';
import 'react-colorblender/dist/style.css';
export default function Home() {
const [color, setColor] = useColor('#ff0000');
return <ColorPicker color={color} onChange={setColor} />;
}
<ColorPicker color={color} onChange={setColor} />
Property | Required | Description | Type | Default |
---|---|---|---|---|
color | true | The color value | Color | - |
onChange | true | The color change event | (color: Color) => void | - |
width | false | The width of the picker | number | 250 |
className | false | The class name of the picker | string | - |
hideAlpha | false | Hide the alpha slider | boolean | false |
const [color, setColor] = useColor('#ff0000');
Args | Description | Type |
---|---|---|
initialColor | The initial color | Color |
interface ColorPickerProps {
width?: number;
hideAlpha?: boolean;
hideInput?: boolean;
color: Color;
onChange: (color: Color) => void;
className?: string;
}
import type { HexColor, HsvaColor, RgbaColor } from 'colorblender';
type ColorType = HexColor | RgbaColor | HsvaColor;
class Color {
hex: HexColor;
rgb: RgbaColor;
rgbString: string;
hsv: HsvaColor;
hsvString: string;
constructor(color: ColorType, model: Models);
}
type HexColor = string;
interface RgbaColor {
r: number;
g: number;
b: number;
a: number;
}
interface HsvaColor {
h: number;
s: number;
v: number;
a: number;
}
- Picker with HEX
- Alpha
- RGB
- HSV
- HSL
- HWB
- CMYK
- XYZ
- LAB
- LCH
- Copy color
- Custom css variables
- Pick color from page
- Multiple color models with useColor hook
- And more...
Please file an issue for bugs, missing documentation, or unexpected behavior.
MIT