Pick colors,
beautifully.
A canva-style React component for your apps, and a polished Chrome extension that picks colors from any page on the web.
@siamf/react-color-pick
A canva-style React color picker — highly customizable, easy to use, and works with or without Tailwind.
Canva-style
A familiar, polished color UI that feels right at home in any product.
Tiny API
Just <ColorPicker value onChange /> — drop it in and you're done.
Fully themable
Override every internal piece with className props — match your brand.
Tailwind ready
First-class Tailwind v4 support, plus a plain CSS file when you need it.
01Install
npm i @siamf/react-color-pick
02Use it
"use client" import { useState } from "react"; import { ColorPicker } from "@siamf/react-color-pick"; const Sample = () => { const [color, setColor] = useState<string>("#C11FB5"); return ( <div> <ColorPicker value={color} onChange={(e) => setColor(e)} /> </div> ); }; export default Sample;
Live Demo
Try the component — drag the pad, slide the hue, type a hex.
03Styling — plain CSS
Not using Tailwind? Import the bundled stylesheet.
import "@siamf/react-color-pick/dist/index.css"
03Styling — Tailwind v4
Add the package as a Tailwind source so utilities are scanned.
@source "../../node_modules/@siamf/react-color-pick"; /* Adjust the package path if needed */
04Available Props
| Prop | Description |
|---|---|
value | Default / controlled color value |
onChange | Fires whenever the selected color changes |
className | Main container className |
selectorClassName | Color selector gradient box className |
selectorDotClassName | Color selector dot className |
hueClassName | Hue slider bar className |
hueSliderClassName | Hue slider dot className |
colorPreviewClassName | Color preview circle className |
colorInputClassName | Color input field className |
eyeDropClassName | Eye drop button className |
The Color Picker that
lives in your browser.
Pick colors from any page, view a tap-to-copy history, extract every color used on the page, or customize shades from a full HSV palette.
A polished little workspace.
Four tabs do everything you need — click through them in the preview to explore.
- Pick — EyeDropper + last pick + recent tiles
- Palette — HSV gradient + hue slider + hex input
- History — 60-color grid, tap any swatch to recopy
- Page — Extract every color used on the active page
Click Pick a Color, then click anywhere on the page. The color is copied to your clipboard automatically.
Pick from any page
Native EyeDropper integration — click anywhere on the web and grab the exact pixel color.
HSV palette
Dial in any shade with a full HSV gradient, hue slider, and hex input — all in one popup.
Saved history
Your last 60 picks live in a tap-to-copy grid — never lose a beautiful color again.
Scan the page
Instantly extract every color used on the current page, ranked by frequency.
Auto-copy
Every pick lands in your clipboard automatically — paste straight into your CSS or Figma.
Private by design
Everything stays on your machine. No tracking, no servers, no analytics.
Install in 4 quick steps
Now live on the Chrome Web Store — one click and you're picking colors.
Add to ChromeOpen the Web Store
Visit the extension's listing on the Chrome Web Store.
Add to Chrome
Click the "Add to Chrome" button at the top-right of the listing.
Confirm install
Approve the permissions prompt — it installs in seconds.
Pin & enjoy
Pin the icon to your toolbar so it's one click away on any tab.
chrome://) — that's a browser restriction, not the extension.