Перейти к подбору цвета

Бесплатный API для цвета

Разбор, перевод между форматами, проверка контраста, шкалы и палитры, симуляция цветовой слепоты и экспорт дизайн-токенов по обычному HTTP. Без ключа и регистрации, JSON на входе и выходе.

  • Без ключа и регистрации
  • GET с параметрами или POST с JSON
  • CORS открыт, можно звать с любого сайта
  • Та же математика, что на сайте: CSS Color 4
Спецификация OpenAPI 3.1Работаете с ИИ-ассистентом? Подключите MCP-сервер

Методы

  • Describe a color

    GET, POST /api/v1/parse-color

    Read any color and describe it: HEX, RGB, HSL and OKLCH values, the closest human name, the closest Tailwind class, its hue family, whether it fits sRGB and Display P3, and which text color, white or black, reads better on it.

    Попробовать: /api/v1/parse-color?color=oklch%2862%25+0.21+260%29

    Тело POST

    curl -X POST https://pickshade.com/api/v1/parse-color \
  -H 'Content-Type: application/json' \
  -d '{"color":"oklch(62% 0.21 260)"}'

  • Convert a color

    GET, POST /api/v1/convert-color

    Convert a color between formats: hex, rgb, hsl, hsv, hwb, cmyk, lab, lch, oklab, oklch, display-p3, rec2020, xyz and platform code (swiftui, uikit, flutter, android). Values follow CSS Color 4.

    Попробовать: /api/v1/convert-color?color=%23ff5733&formats=oklch%2Chsl%2Ccmyk

    Тело POST

    curl -X POST https://pickshade.com/api/v1/convert-color \
  -H 'Content-Type: application/json' \
  -d '{"color":"#ff5733","formats":["oklch","hsl","cmyk"]}'

  • Check text contrast

    GET, POST /api/v1/check-contrast

    Check text contrast against a background with both WCAG 2 (ratio, AA and AAA for normal and large text) and APCA (Lc value and the usage level it allows). Also suggests the nearest text color that passes AA and AAA while keeping its hue.

    Попробовать: /api/v1/check-contrast?text=%236b7280&background=%23ffffff

    Тело POST

    curl -X POST https://pickshade.com/api/v1/check-contrast \
  -H 'Content-Type: application/json' \
  -d '{"text":"#6b7280","background":"#ffffff"}'

  • Check gamut

    GET, POST /api/v1/check-gamut

    Check whether a color fits the sRGB, Display P3 and Rec. 2020 gamuts, and get the closest sRGB fallback that keeps lightness and hue (CSS Color 4 gamut mapping in OKLCH).

    Попробовать: /api/v1/check-gamut?color=oklch%2870%25+0.3+145%29

    Тело POST

    curl -X POST https://pickshade.com/api/v1/check-gamut \
  -H 'Content-Type: application/json' \
  -d '{"color":"oklch(70% 0.3 145)"}'

  • Find color names

    GET, POST /api/v1/nearest-names

    Find the closest named colors, CSS color keywords and Tailwind CSS classes for a color, ranked by perceptual distance (deltaE OK).

    Попробовать: /api/v1/nearest-names?color=%231e3a8a&limit=3

    Тело POST

    curl -X POST https://pickshade.com/api/v1/nearest-names \
  -H 'Content-Type: application/json' \
  -d '{"color":"#1e3a8a","limit":3}'

  • Compare two colors

    GET, POST /api/v1/compare-colors

    Compare two colors: CIEDE2000 and deltaE OK difference with a plain verdict (identical, nearly, similar, different, opposite), lightness shift in percent, chroma and hue shift, and the contrast between them.

    Попробовать: /api/v1/compare-colors?first=teal&second=turquoise

    Тело POST

    curl -X POST https://pickshade.com/api/v1/compare-colors \
  -H 'Content-Type: application/json' \
  -d '{"first":"teal","second":"turquoise"}'

  • Generate a 50–950 scale

    GET, POST /api/v1/generate-scale

    Build an 11-step tint and shade scale (50, 100 … 900, 950) from one color in OKLCH, the same shape as Tailwind palettes, with even perceived lightness steps.

    Попробовать: /api/v1/generate-scale?color=%233b82f6

    Тело POST

    curl -X POST https://pickshade.com/api/v1/generate-scale \
  -H 'Content-Type: application/json' \
  -d '{"color":"#3b82f6"}'

  • Color harmonies

    GET, POST /api/v1/harmonies

    Get color harmonies for a base color, computed in OKLCH so lightness stays even: complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic.

    Попробовать: /api/v1/harmonies?color=%23ff5733&kind=triadic

    Тело POST

    curl -X POST https://pickshade.com/api/v1/harmonies \
  -H 'Content-Type: application/json' \
  -d '{"color":"#ff5733","kind":"triadic"}'

  • Mix two colors

    GET, POST /api/v1/mix-colors

    Mix two colors at a ratio in a chosen color space, like CSS color-mix(). OKLab keeps the middle bright, sRGB tends to turn gray. Returns the result and a ready color-mix() expression.

    Попробовать: /api/v1/mix-colors?first=%23ff5733&second=%233b82f6&amount=30&space=oklab

    Тело POST

    curl -X POST https://pickshade.com/api/v1/mix-colors \
  -H 'Content-Type: application/json' \
  -d '{"first":"#ff5733","second":"#3b82f6","amount":30,"space":"oklab"}'

  • Generate a palette

    GET, POST /api/v1/generate-palette

    Generate a harmonious palette in OKLCH. Keep colors you already have, pick a style (auto, analogous, complementary, triadic, monochromatic, pastel, vivid, muted, dark) and pass a seed to get the same palette every time.

    Попробовать: /api/v1/generate-palette?keep=%230f172a&mode=analogous&size=5&seed=brand

    Тело POST

    curl -X POST https://pickshade.com/api/v1/generate-palette \
  -H 'Content-Type: application/json' \
  -d '{"keep":["#0f172a"],"mode":"analogous","size":5,"seed":"brand"}'

  • Simulate color blindness

    GET, POST /api/v1/simulate-cvd

    Show how colors look with protanopia, deuteranopia, tritanopia and achromatopsia (Machado 2009 at full severity), and list the pairs that become hard to tell apart.

    Попробовать: /api/v1/simulate-cvd?colors=%23e11d48%2C%2316a34a%2C%232563eb

    Тело POST

    curl -X POST https://pickshade.com/api/v1/simulate-cvd \
  -H 'Content-Type: application/json' \
  -d '{"colors":["#e11d48","#16a34a","#2563eb"]}'

  • Export colors as code

    POST /api/v1/export-tokens

    Turn a list of colors into ready code: CSS custom properties, a Tailwind v4 @theme block, SCSS variables, JSON, W3C design tokens (DTCG), a JavaScript array or an SVG swatch strip. Unnamed colors get their closest color name.

    Тело POST

    curl -X POST https://pickshade.com/api/v1/export-tokens \
  -H 'Content-Type: application/json' \
  -d '{"colors":[{"color":"#0f172a","name":"ink"},{"color":"#f97316"}],"format":"tailwind","values":"oklch"}'

  • Build a design system

    GET, POST /api/v1/build-system

    Build a full color system from a brand color: 50–950 scales for primary, secondary, accent, neutral and status colors, light and dark theme roles, exported as a Tailwind v4 theme, CSS variables, shadcn/ui globals.css or DTCG tokens, with a contrast audit of text and surface pairs.

    Попробовать: /api/v1/build-system?primary=%236d4aff&format=shadcn

    Тело POST

    curl -X POST https://pickshade.com/api/v1/build-system \
  -H 'Content-Type: application/json' \
  -d '{"primary":"#6d4aff","format":"shadcn"}'

Ограничения

С одного IP можно отправлять около 10 запросов в секунду с короткими всплесками. Сверх этого API отвечает 429 с заголовком Retry-After. Неизменные результаты кешируются на сутки, повторные вызовы отвечают мгновенно.

Вопросы и ответы

Нужен ли ключ API?

Нет. API бесплатный и открытый. Вызывайте методы по HTTPS с сервера, из скрипта или прямо из браузера.

Какие форматы цвета он понимает?

Любой цвет CSS: HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() и color(display-p3 …), а также имена CSS вроде navy, обычные названия вроде «королевский синий» и классы Tailwind вроде sky-500.

Как сообщаются ошибки?

Ошибки приходят в формате application/problem+json с заголовком и пояснением, что исправить, например если строку нельзя прочитать как цвет.