# Chroma Panel

> React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.

A React color picker with a wheel, sliders, palettes and an eyedropper. Install it with `npm install chroma-panel`. Source at https://github.com/re-sohail/chroma-panel.

The full documentation as a single file is at https://chroma-panel.dev/llms-full.txt.
Any page is available as markdown by appending `.md` to its URL.

## Overview

- [Quick start](https://chroma-panel.dev/react/overview/quick-start.md): Install chroma-panel and render your first color picker.
- [Accessibility](https://chroma-panel.dev/react/overview/accessibility.md): Keyboard and screen reader support, and the two contrast helpers.
- [Releases](https://chroma-panel.dev/react/overview/releases.md): Every published release, and how this package is versioned.
- [About](https://chroma-panel.dev/react/overview/about.md): Why this picker keeps the full HSVA value, and what it costs.

## Handbook

- [Theming](https://chroma-panel.dev/react/handbook/theming.md): Change how the panel looks with CSS custom properties.
- [Styling with Tailwind](https://chroma-panel.dev/react/handbook/tailwind.md): Pass Tailwind classes per panel part instead of writing CSS.
- [Composition](https://chroma-panel.dev/react/handbook/composition.md): Add a mode to the panel, or drive your own UI from the colour store.
- [Forms](https://chroma-panel.dev/react/handbook/forms.md): Using ColorInput as a native form control.
- [Controlled and uncontrolled](https://chroma-panel.dev/react/handbook/controlled.md): Which props you own and which the panel keeps.
- [Server rendering](https://chroma-panel.dev/react/handbook/server-rendering.md): Using chroma-panel with Next.js, Remix and other SSR setups.
- [Browser support](https://chroma-panel.dev/react/handbook/browser-support.md): The minimum browser versions, and the two features that are not everywhere.
- [TypeScript](https://chroma-panel.dev/react/handbook/typescript.md): The exported types and how to use them.
- [Common mistakes](https://chroma-panel.dev/react/handbook/common-mistakes.md): The five things that most often go wrong, and what to do instead.

## Components

- [ColorInput](https://chroma-panel.dev/react/components/color-input.md): A swatch button that opens the panel in a popover.
- [ChromaPanel](https://chroma-panel.dev/react/components/chroma-panel.md): The panel by itself, always visible.
- [Popover](https://chroma-panel.dev/react/components/popover.md): The positioned surface ColorInput opens into.
- [ModeToolbar](https://chroma-panel.dev/react/components/mode-toolbar.md): The tablist that switches between picker modes.
- [PanelFooter](https://chroma-panel.dev/react/components/panel-footer.md): The footer row showing the current colour and recent colours.
- [ColorArea](https://chroma-panel.dev/react/components/color-area.md): A two-axis saturation and brightness square.
- [ColorDisc](https://chroma-panel.dev/react/components/color-disc.md): The circular hue and saturation wheel.
- [ChannelSlider](https://chroma-panel.dev/react/components/channel-slider.md): A single-channel slider backed by a native range input.
- [ColorField](https://chroma-panel.dev/react/components/color-field.md): A text input that parses any CSS color string.
- [NumberField](https://chroma-panel.dev/react/components/number-field.md): A numeric input for a single colour channel.
- [Swatch](https://chroma-panel.dev/react/components/swatch.md): A single colour button.
- [SwatchGrid](https://chroma-panel.dev/react/components/swatch-grid.md): A grid of colour buttons with roving focus.
- [SegmentedControl](https://chroma-panel.dev/react/components/segmented-control.md): A segmented set of mutually exclusive options.

## Modes

- [Wheel](https://chroma-panel.dev/react/modes/wheel.md): The circular hue and saturation wheel with a brightness slider.
- [Sliders](https://chroma-panel.dev/react/modes/sliders.md): Per-channel sliders across RGB, HSL and HSV.
- [Palettes](https://chroma-panel.dev/react/modes/palettes.md): Swatch sets, either the built-in ones or your own.
- [Image](https://chroma-panel.dev/react/modes/image.md): Sample colours out of an image.
- [Pencils](https://chroma-panel.dev/react/modes/pencils.md): A 120-colour grid modelled on the macOS pencil picker.
- [Custom modes](https://chroma-panel.dev/react/modes/custom.md): Register your own tab in the panel.

## Utils

- [Color engine](https://chroma-panel.dev/react/utils/color-engine.md): The colour functions the panel is built on, usable on their own.
- [Parsing](https://chroma-panel.dev/react/utils/parsing.md): Turn any CSS colour string into an HSVA value.
- [Serializing](https://chroma-panel.dev/react/utils/serializing.md): Turn a colour into a string in any supported format.
- [Converting](https://chroma-panel.dev/react/utils/converting.md): Convert between HSVA, RGBA, HSLA and HWBA.
- [Contrast](https://chroma-panel.dev/react/utils/contrast.md): APCA and WCAG contrast helpers.
- [Named colors](https://chroma-panel.dev/react/utils/named-colors.md): Opt in to the 148 CSS colour names.
- [useColorStore](https://chroma-panel.dev/react/utils/use-color-store.md): The colour store behind the panel, and the hooks that read it.
- [useEyedropper](https://chroma-panel.dev/react/utils/use-eyedropper.md): Grab a colour from anywhere on screen, where the browser supports it.
- [Entry points](https://chroma-panel.dev/react/utils/entry-points.md): Every subpath the package exports, and what each one costs.