SkillFoxx
Telegram

oklch-skill

Скилл по цветовому пространству OKLCH: перевод цветов, палитры на 9 ступеней, контраст APCA и WCAG, гамма P3 и Tailwind v4.

  • 283 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Минимальный доступ

Почему такой уровень

  • Скилл состоит из текстовых инструкций; агент меняет только файлы со стилями в вашем проекте.
Все причины и проверки

jakubkrehel/oklch-skillАвтор:Jakub Krehel

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/oklch-skill

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скилл состоит из текстовых инструкций; агент меняет только файлы со стилями в вашем проекте.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл `oklch-skill` переводит цвета из `hex`, `rgb` и `hsl` в `oklch(L C H)`, строит шкалы оттенков, проверяет контраст и следит за границами гаммы. Основной файл содержит краткую шпаргалку и пороги: светлым фоном считается яркость L выше 0,6, дрейфом оттенка считается разброс больше 10 градусов по ступеням палитры, обычный текст проходит APCA при значении Lc от 60 и WCAG 2 при отношении 4,5 к 1. Четыре справочных файла разбирают конвертацию форматов, генерацию палитр, доступность и контраст, гамму sRGB и Display P3 вместе с темами Tailwind v4. При ревью скилл выдает изменения таблицей из колонок «Before» и «After», где каждая замененная строка самостоятельна. Палитра по умолчанию имеет девять ступеней от 50 до 950, как в Tailwind.

Для кого. Фронтенд-разработчикам и дизайнерам интерфейсов, которые переводят дизайн-токены на OKLCH и хотят проверять цвета, не считая их вручную.

Подходит, если

  • В CSS накопились цвета в `hex` и `hsl`, и их переводят в `oklch()` для всей темы.
  • Палитру оттенков строят от одного брендового цвета, и синий «уходит в фиолетовый» на светлых ступенях.
  • Текст на фоне не проходит проверку контраста, и подбирают яркость, не трогая оттенок.
  • Тему Tailwind v4 в `@theme` переводят на OKLCH и добавляют запасной вариант для sRGB.
  • Темную тему выводят из светлой, зеркально меняя яркость.

Не подходит, если

  • Нужен выбор брендового цвета и цветовой гармонии: скилл работает с уже выбранными значениями.
  • Проект рассчитан на браузеры без поддержки `oklch()` и не собирает запасные значения.
  • Работа идет с печатью и цветовыми профилями CMYK, где OKLCH не применяется.

Пример запроса к агенту

Переведи цвета из `tokens.css` в OKLCH, сгенерируй девять ступеней от брендового синего и проверь контраст текста по APCA.

Ограничения

Скилл состоит из текстовых правил, а расчеты выполняет агент: готового скрипта конвертации в репозитории нет, поэтому числа стоит сверять с калькулятором. Скилл называет поддержку браузерами базовой с 2023 года при покрытии свыше 96 процентов, но запасное значение для sRGB все равно требует отдельной строки в CSS. Пороги разных стандартов контраста различаются: APCA и WCAG 2 дают разные ответы на одной паре цветов. Для интерактивного подбора автор отсылает к сайту `oklch.fyi`. Последний коммит — октябрь 2026.

Как отключить. Удалите каталог `oklch-skill` из каталога скиллов агента, например из `.claude/skills/`. Уже переведенные в OKLCH цвета в проекте останутся.

Частые вопросы

Как поставить oklch-skill в Claude Code?

Выполните `npx skills add jakubkrehel/oklch-skill` в каталоге проекта. Скилл подгрузится, когда запрос упомянет OKLCH, палитры, контраст или перевод цветов.

Какие задачи решает скилл?

Перевод `hex`, `rgb` и `hsl` в OKLCH, генерация палитр, проверка контраста по APCA и WCAG, ограничение цвета границей гаммы, запасные значения для sRGB и темы Tailwind v4.

Почему OKLCH лучше HSL для палитр?

Равные шаги яркости в OKLCH выглядят одинаково светлыми, а оттенок не дрейфует по шкале: в HSL синий смещается к фиолетовому. Контраст чинят изменением одной яркости, насыщенность на него почти не влияет.

Что делать с цветами за пределами sRGB?

Снизить насыщенность при неизменных яркости и оттенке. Для дисплеев с широкой гаммой добавляют вариант внутри `@media (color-gamut: p3)`, а для остальных оставляют запасное значение.

Как скилл оформляет ревью цветов?

Таблицей с колонками «Before» и «After». В нее попадает каждый измененный цвет, поэтому любую строку можно принять или отклонить отдельно.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Color Expert

color-expert

Скилл по науке о цвете: OKLCH, контраст APCA и WCAG, шкалы для дизайн-систем, генерация палитр, смешение пигментов и история цвета

СкиллМинимальный доступ65618

Swiss Design Skill

swiss-design-skill

Скилл задает агенту швейцарский стиль на Tailwind: сетка из 12 колонок, IBM Plex Sans, один акцент и много воздуха.

СкиллМинимальный доступ163

Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.

СкиллМинимальный доступ95

27 правил oxlint для Tailwind CSS v4 плюс скилл и плагин Claude Code: опечатки в классах, конфликты и устаревшие утилиты.

ПлагинМинимальный доступ108

Сборник скиллов Claude Code по копирайтингу, рекламе, SEO и дизайну интерфейсов: Ogilvy, редактура, правила и CSS-приемы.

СкиллМинимальный доступ469

Скилл дает агенту подборку современных приемов CSS: одно правило вместо набора брейкпоинтов и CSS-возможность прежде скрипта.

СкиллМинимальный доступ403

Коротко о README

README короткий: назначение, ссылка на каталог skills.sh и одна команда установки. Подробности лежат в основном файле скилла и четырех справочниках.

Бейдж для README

Исходный SKILL.md

---
name: oklch-skill
description: OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
---

# OKLCH Colors

OKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. To explore interactively, visit [oklch.fyi](https://oklch.fyi).

## Quick Reference

| Category | When to use | Reference |
| --- | --- | --- |
| Conversion | Hex/rgb/hsl to oklch | [color-conversion.md](color-conversion.md) |
| Palettes | Generate scales, multi-hue, dark mode | [palette-generation.md](palette-generation.md) |
| Contrast | APCA/WCAG checks, fixing failing contrast | [accessibility-contrast.md](accessibility-contrast.md) |
| Gamut & Tailwind | P3 fallbacks, `@theme` scales, gamut clamping | [gamut-and-tailwind.md](gamut-and-tailwind.md) |

## Why OKLCH

- **Perceptual uniformity.** Equal L steps = equal brightness. `oklch(0.5 ...)` is visually mid. HSL's `lightness: 50%` varies wildly by hue.
- **Stable hue.** HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
- **Independent chroma.** Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
- **Finite gamut.** Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip — gamut awareness is required.

## OKLCH Syntax

```
oklch(L C H)
oklch(L C H / alpha)
```

| Channel | Range | Description |
| --- | --- | --- |
| L (Lightness) | 0–1 | 0 = black, 1 = white. Perceptually uniform. |
| C (Chroma) | 0–~0.4 | Colorfulness. 0 = gray. Max depends on L and H. |
| H (Hue) | 0–360 | Hue angle in degrees. |
| alpha | 0–1 | Optional transparency. Slash syntax. |

```css
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)
```

**Formatting:** L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format `-0` as `0`. Browser support: Baseline 2023, 96%+ global coverage.

## Key Thresholds

| Rule | Value |
| --- | --- |

Сообщить о проблеме