# @snack-uikit/color-picker

> `npm i @snack-uikit/color-picker`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/color-picker
pnpm add @snack-uikit/color-picker
yarn add @snack-uikit/color-picker
bun add @snack-uikit/color-picker
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2024-09-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 135.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nikita Ershov |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/color-picker
- Repository: https://github.com/cloud-ru-tech/snack-uikit.git#master
- Homepage: https://cloud-ru-tech.github.io/snack-uikit/packages/color-picker
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/color-picker

## Dependencies (7)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [react-colorful](https://npm.io/package/react-colorful.md) ^5.6.1
- [@snack-uikit/icons](https://npm.io/package/@snack-uikit/icons.md) ^1.0.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/button](https://npm.io/package/@snack-uikit/button.md) ^1.0.1
- [@snack-uikit/input-private](https://npm.io/package/@snack-uikit/input-private.md) ^5.0.0
- [@snack-uikit/segmented-control](https://npm.io/package/@snack-uikit/segmented-control.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.3.60-preview-fc6b5b87.0 — 2026-08-20
- 0.3.59 — 2026-08-07
- 0.3.59-preview-4e8bfebd.0 — 2026-08-07
- 0.3.59-preview-eff3bc02.0 — 2026-08-03
- 0.3.58 — 2026-07-03
- 0.3.58-preview-74429015.0 — 2026-07-03
- 0.3.58-preview-02d918ac.0 — 2026-07-03
- 0.3.58-preview-6a625dbd.0 — 2026-06-30
- 0.3.58-preview-9f7f3a20.0 — 2026-06-30
- 0.3.57 — 2026-06-24
- … 167 more at https://npm.io/package/@snack-uikit/color-picker/versions

## README

# Color Picker

## Installation
`npm i @snack-uikit/color-picker`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/color-picker` предоставляет компонент `ColorPicker` для выбора цвета с визуальным палитр-пикером и текстовыми полями для ручного ввода значений.
- Поддерживает три цветовые модели: **HEX**, **RGB** и **HSV**, между которыми можно переключаться через `SegmentedControl`.
- Работает с альфа-каналом (`withAlpha`): при включённом режиме позволяет управлять прозрачностью цвета.
- Поддерживает два режима применения изменений: **автоматический** (`autoApply={true}`) — изменения применяются сразу при выборе цвета, и **ручной** (`autoApply={false}`) — изменения применяются по кнопке "Применить", с возможностью отмены через кнопку "Отмена".
- Позволяет настраивать доступные цветовые модели через проп `colorMode`, скрывая ненужные варианты (например, только HEX и RGB).
- Визуальный палитр-пикер автоматически подстраивается под выбранную цветовую модель и режим работы с альфа-каналом.
- При выборе цвета в HEX-режиме компонент валидирует введённое значение и показывает ошибку при некорректном формате.
- Конвертирует значения между различными цветовыми моделями и предоставляет полную информацию о выбранном цвете в формате `RawColor` (hex, rgb, rgba, hsl, hsla, hsv, hsva).
- Figma: [`ColorPicker`](https://www.figma.com/design/jtGxAPvFJOMir7V0eQFukN/branch/Rq5wXgsa8hopMLIL5iXxN2/Snack-UI-Kit-4.0.0?node-id=10776-174&node-type=canvas&m=dev).

## Example

```tsx
import { ColorPicker, RawColor } from '@snack-uikit/color-picker';
import { useState } from 'react';

function Example() {
  const [color, setColor] = useState<string>('#000000');
  const [rawValue, setRawValue] = useState<RawColor>({} as RawColor);

  const handleChange = (rawColor: Partial<RawColor>) => {
    if (rawColor.hex) {
      setColor(rawColor.hex);
    }
    setRawValue(rawColor as RawColor);
  };

  return (
    <ColorPicker
      value={color}
      onChange={handleChange}
      withAlpha={true}
      autoApply={false}
      colorMode={{
        hex: true,
        rgb: true,
        hsv: true,
      }}
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## ColorPicker
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value | `Color` | - | Значение |
| onChange | `(rawColor: Partial<RawColor>) => void` | - | Колбек на изменение |
| withAlpha | `boolean` | true | Значение с альфаканалом |
| autoApply | `boolean` | - | Применять изменения автоматически, если значение false - то изменения происходят по кнопке |
| className | `string` | - | Класснейм |
| colorMode | `{ hex?: boolean; rgb?: boolean; hsv?: boolean; }` | - |  |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._