React Color

React Color is a collection of drop-in React color-picker components, each modeled after the picker UI of a well-known design tool — Sketch, Photoshop, Chrome, GitHub, Twitter, Material, Slack, and others — so an app can add a familiar-feeling color picker without building one from scratch.

Each picker (SketchPicker, ChromePicker, PhotoshopPicker, etc.) is a self-contained, controlled React component built on inline styles rather than external CSS, sharing a common onChange/onChangeComplete callback interface and internal color-conversion helpers so switching between picker styles requires minimal code changes.

What You Get

• A dozen-plus picker components (Sketch, Chrome, Photoshop, Github, Twitter, Material, Slack, Circle, Compact, Swatches, Block, Hue, Alpha) sharing a common controlled-component API
• Built-in HSL/HSV/RGB/hex color-format conversion so consumers can read and set color in whichever format they prefer
• Inline-styled rendering (no external CSS import required) for easy embedding in any styling system
• Reusable low-level building blocks (Hue, Alpha, Saturation) for composing fully custom picker layouts
• A shared onChange/onChangeComplete event contract so swapping one picker style for another needs little integration code

Common Use Cases

• Adding a brand-color or theme-color picker to a design tool, CMS, or admin dashboard
• Letting end users customize the color of an avatar, label, tag, or calendar-event category
• Building a lightweight in-app design/whiteboard tool that needs Sketch- or Photoshop-style color selection
• Embedding an alpha-aware color picker for setting overlay or highlight opacity in a canvas/editor app

Under The Hood

Architecture — Each picker lives as a top-level component file in src/ (e.g. Sketch.js, Chrome.js, Photoshop.js) that composes shared primitives from src/components/common (Hue sliders, Alpha sliders, Saturation panels, swatch grids) and a src/helpers layer that performs color-space conversion and validation; index.js re-exports every picker as a named export so consumers only import the one they need. Tech Stack — Plain JavaScript (pre-TypeScript era, ES2015+ via Babel), built with a Babel-based lib/es dual-output pipeline, using reactcss for the inline-style composition pattern, tinycolor2/material-colors for color math, and lodash for utility helpers, with Storybook and Chromatic wired up historically for visual review. Code Quality — The project has a Jest + ESLint test script and a reasonable component-per-file structure, but GitHub activity shows it has been effectively unmaintained since early 2024 (0 commits/month, unmerged PRs), so newer React patterns (hooks-first APIs, concurrent-mode safety) and dependency updates lag behind actively maintained alternatives. API Design — Every picker follows the same controlled-component contract (color prop in, onChange/onChangeComplete callback out), which makes the library’s dozen-plus components feel like one consistent API surface rather than a dozen different ones — a deliberate design choice that keeps the learning curve low even though the library itself has stopped evolving.