awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
casesandberg avatar

casesandberg/react-color

0
View on GitHub↗
12,311 stars·922 forks·JavaScript·MIT·15 viewscasesandberg.github.io/react-color↗

React Color

react-color is a React color picker library and customizable UI component kit. It provides a collection of interactive color selection components and visual pickers for web applications, allowing users to choose and preview colors.

The library includes pre-made user interfaces that mimic the color selection experiences of professional design tools like Photoshop, Sketch, and Chrome. It also features transparency-aware color pickers that render checkerboard backgrounds to visually represent colors containing alpha channel transparency.

The project provides granular building blocks, such as hue sliders and saturation blocks, to compose bespoke color selection interfaces. It further supports web color input through synchronized text fields for capturing manual hex or RGB values alongside visual pickers.

Features

  • Color Pickers - Provides interactive user interfaces and various picker styles for choosing colors in React applications.
  • Transparency Visualization - Displays a checkerboard pattern behind color elements to make semi-transparent colors visible.
  • Custom Picker Composition - Allows the assembly of bespoke color selection interfaces using a set of granular building block components.
  • Transparency-Aware Picking - Implements visual tools and checkerboard backgrounds for selecting colors with alpha channel transparency.
  • Bespoke Color Interfaces - Facilitates building bespoke color selection interfaces by combining granular building blocks like hue sliders.
  • Color Selection Primitives - Provides granular building blocks such as hue sliders and saturation blocks to assemble bespoke color selection interfaces.
  • Transparency Visualization - Uses a repeating checkerboard background to visually represent alpha channel transparency for semi-transparent colors.
  • Alpha Channel Visualizers - Renders checkerboard backgrounds to visually represent colors containing alpha channel transparency.
  • Color Inputs - Provides editable text fields for manual entry of hex or RGB color values.
  • Design Tool Emulations - Includes pre-made user interfaces that mimic the color selection experiences of Photoshop, Sketch, and Chrome.
  • Modular Architectures - Implements a modular architecture that separates color logic from visual styles to allow swappable picker interfaces.
  • Transparency-Aware Pickers - Provides visual color pickers that render checkerboard backgrounds to display colors with alpha channel transparency.
  • Component Composition Primitives - Provides modular primitives for assembling complex, custom color picker interfaces.
  • Design Tool UI Emulation - Mimics the color selection user experience of professional design tools such as Photoshop and Sketch.
  • Value Synchronization - Keeps visual color sliders and manual text input fields in sync through shared state management.
  • Visual Style Presets - Includes predefined visual style presets that mirror the layouts of professional design tools like Photoshop and Sketch.
  • Animation Tools - Collection of color picker components for web applications.

Star history

Star history chart for casesandberg/react-colorStar history chart for casesandberg/react-color

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Frequently asked questions

What does casesandberg/react-color do?

react-color is a React color picker library and customizable UI component kit. It provides a collection of interactive color selection components and visual pickers for web applications, allowing users to choose and preview colors.

What are the main features of casesandberg/react-color?

The main features of casesandberg/react-color are: Color Pickers, Transparency Visualization, Custom Picker Composition, Transparency-Aware Picking, Bespoke Color Interfaces, Color Selection Primitives, Alpha Channel Visualizers, Color Inputs.

Which projects share features with casesandberg/react-color?

Projects with overlapping indexed features include: taiga-family/taiga-ui — Taiga UI is an Angular UI component library and accessible design system used for building enterprise web interfaces.… chakra-ui/ark — Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by… mantinedev/mantine — Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a… evilmartians/oklch-picker — Oklch-picker is a web-based tool for selecting perceptually uniform colors and converting legacy values into the OKLCH… afollestad/material-dialogs — material-dialogs is a Kotlin UI component library that provides a collection of modal dialogs and bottom sheets for… buefy/buefy — Buefy is a lightweight user interface component library built for Vue.js. It serves as a programmatic wrapper for the…

Projects sharing features with React Color

These projects share indexed features with React Color. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • taiga-family/taiga-uitaiga-family avatar

    taiga-family/taiga-ui

    4,002View on GitHub↗

    Taiga UI is an Angular UI component library and accessible design system used for building enterprise web interfaces. It provides a comprehensive collection of reusable interface elements and layout tools, functioning as a mobile-first UI kit with responsive components that adapt to different device capabilities. The library distinguishes itself through an integrated data visualization library featuring various chart types and a dedicated form management framework with built-in validation and formatting for specialized data. It also features AI-driven development workflows by integrating comp

    TypeScriptangularbest-practicescdk
    View on GitHub↗4,002
  • chakra-ui/arkchakra-ui avatar

    chakra-ui/ark

    5,004View on GitHub↗

    Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes

    TypeScriptcomponentsdesign-systemheadless
    View on GitHub↗5,004
  • mantinedev/mantinemantinedev avatar

    mantinedev/mantine

    31,263View on GitHub↗

    Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti

    TypeScriptdark-modedark-themehooks
    View on GitHub↗31,263
  • evilmartians/oklch-pickerevilmartians avatar

    evilmartians/oklch-picker

    1,906View on GitHub↗

    Oklch-picker is a web-based tool for selecting perceptually uniform colors and converting legacy values into the OKLCH color space. It functions as a color space converter that translates color codes between traditional formats like hexadecimal, RGB, or HSL and modern spaces while maintaining perceptual uniformity for design workflows. The application includes wide gamut display preview capabilities that show how color choices appear across different display gamuts. It features automatic fallback indications and P3 color space status displays to verify device and display compatibility and ens

    TypeScript
    View on GitHub↗1,906
Compare all 30 related projects→