Open-source ColorShot: продвинутый колор-пикер для реального CSS

#frontend#color-picker#open-source#css#react#vue

Заметил, что большинство готовых color picker-ов для фронтенда либо урезаны до простого выбора цвета, либо не умеют работать с реальными CSS-градиентами и сложными цветами вроде oklch. Особенно когда речь про редакторы шаблонов, где дизайнеры и маркетологи требуют сохранить фирменные цвета и копировать/вставлять любые CSS-строчки без багов, это начинает сильно напрягать.

В нашем проекте Orshot тоже столкнулся с этим: стандартный пикер валидировал цвета слишком строго и ломался на валидных CSS-градиентах. В итоге написал свой — ColorShot, и недавно залил в open source. В статье расскажу, как он устроен и где реально помогает, а где всё ещё есть нюансы.

Почему обычные color picker-ы не работают с реальным CSS

Большинство популярных библиотек — будь то react-color, react-spectrum и подобные — заточены под простые форматы: hex, rgb(a), hsl(a). Они либо не парсят CSS-градиенты вообще, либо делают это криво. В итоге:

В нашем редакторе шаблонов нужен был именно picker, который бы принимал любой валидный CSS цвет или градиент, не менял то, что не нужно, но при этом давал UI для удобного выбора и сохранения цветов.

Что умеет ColorShot

ColorShot — это минималистичный, zero-dep модуль (~14 КБ gzipped), который умеет:

Самое крутое — если вбить в инпут сложный CSS-градиент, ColorShot его не “перепишет” и не сломает. Он рендерит визуальный редактор для стопов, но при этом сохраняет остальные параметры, как были.

Как это работает на практике: разбираем пример

Вот упрощённый пример использования в React:

import { ColorShot } from "colorshot";

const brandColors = [
  "#0052cc",
  "rgb(255, 87, 51)",
  "oklch(0.6 0.3 120)",
];

export function GradientEditor() {
  const [color, setColor] = React.useState("linear-gradient(90deg, #0052cc 0%, #ff5733 100%)");

  return (
    <ColorShot
      value={color}
      onChange={setColor}
      swatches={{
        brand: brandColors,
        recent: [],
        saved: [],
      }}
      enableEyeDropper={true}
      accessibleLabels={{
        colorInput: "Введите цвет или градиент",
        swatchGroup: "Группа цветов",
      }}
    />
  );
}

Что здесь важно:

В UI вы увидите визуальные маркеры для каждого цвета в градиенте, сможете перетаскивать стопы, менять прозрачность и т.д. При этом все незначимые части градиента (например, углы, повторения) сохраняются, даже если UI их не отображает напрямую.

Где ColorShot реально полезен, а где стоит быть осторожным

Плюсы на практике

Ограничения и что стоит учесть

Итоги и что попробовать дальше

Если вы делаете редактор, где нужны реальные CSS цвета и градиенты, и вас раздражают ограничения популярных библиотек — загляните в ColorShot. Он не панацея, но решает реальную боль с валидацией и поддержкой новых цветовых моделей.

Попробуйте интегрировать в небольшой проект, поиграйте с градиентами, попробуйте drag & drop для стопов и eye-dropper. Если что-то не нравится, можно подать пулл-реквест или обсудить UX с автором.

Мне кажется, такой подход — open-source, zero-dep, с фокусом на реальные CSS свойства — будет всё важнее, особенно когда фронтендеры начинают тесно работать с дизайнерами, а не просто перекладывают готовый цвет из Figma.

В ближайших планах — улучшить поддержку drag & drop, добавить больше кастомизации UI и расширить accessibility. Если вы в теме vibe coding и agentic workflows, где UI подстраивается под контекст и задачи пользователя, ColorShot может стать хорошей базой для создания гибких интерфейсов выбора цвета.

GitHub и демки:

Если вам интересно, как делают кастомные инструменты под реальные задачи в фронтенде — рекомендую попробовать и поделиться впечатлениями.

Попробуй сам: Cursor — AI-редактор для разработчиков.

Источник: https://orshot.com/open-source/colorshot