O que oklch-skill faz?
Espaço de cores OKLCH para projetos web. Converta hex/rgb/hsl para oklch, gere paletas, verifique contraste, lide com limites de gama e theme com Tailwind v4. Aciona-se com: oklch, conversão de cores, geração de paletas, taxa de contraste, gama, display p3, tokens de design, desvio de matiz, croma, cores de modo escuro.
Visão Geral
O OKLCH é um espaço de cores perceptual uniforme que oferece melhor precisão e consistência visual em comparação com sRGB, HSL ou outros espaços de cores tradicionais. Esta skill simplifica o uso do OKLCH em projetos web, fornecendo funções para conversão, geração de paletas, verificação de contraste e integração com Tailwind CSS v4.
Funcionalidades
- Conversão de Cores: Converta entre hex, RGB, HSL e OKLCH.
- Geração de Paletas: Crie paletas de cores harmônicas baseadas em ângulos de matiz, croma e luminosidade.
- Contraste WCAG: Calcule taxas de contraste usando a fórmula WCAG 2.1 e 2.2.
- Limites de Gama: Detecte e corrija cores que estão fora dos limites de gama (por exemplo, Display P3 vs. sRGB).
- Tokens de Design: Extraia variáveis de design para CSS moderno (
color()). - Modo Escuro: Gere automaticamente versões escuras de cores com ajuste de croma e luminosidade.
- Tailwind v4: Gere configuração de cores personalizadas para Tailwind CSS v4.
Como Usar
Conversão de Cores
converter #ff6b35 para oklch
Geração de Paletas
gerar paleta a partir de oklch(0.65 0.15 25)
Verificação de Contraste
verificar contraste entre #ffffff e #333333
Modo Escuro
modo escuro para #4a90d9
Integração com Tailwind v4
tags de design tailwind v4 com oklch
Exemplos de Conversão
| Formato de Entrada | Exemplo de Saída OKLCH |
|---|---|
#ff6b35 | oklch(0.65 0.15 25) |
rgb(255, 107, 53) | oklch(0.65 0.15 25) |
hsl(16, 100%, 60%) | oklch(0.65 0.15 25) |
Paleta de Cores
Gere paletas com base em um matiz base:
matiz: 25, croma inicial: 0.15, número de cores: 5
Limites de Gama
Quando uma cor está fora do espaço de gama alvo, a skill ajusta croma para trazê-la de volta ao limite, mantendo o matiz e a luminosidade:
cor: oklch(0.8 0.3 120), gama alvo: sRGB
Tokens de Design
Extraia tokens de design como variáveis CSS:
--cor-primaria: oklch(0.65 0.15 25);
--cor-secundaria: oklch(0.55 0.12 200);
Integração com Tailwind v4
// tailwind.config.js (v4)
colors: {
primaria: 'oklch(0.65 0.15 25)',
secundaria: 'oklch(0.55 0.12 200)',
}
Modo Escuro Automático
A partir de uma cor clara, a skill gera uma versão escura preservando o matiz e reduzindo croma/luminosidade:
claro: #4a90d9 -> escuro: oklch(0.45 0.1 250)
Contribuição
Contribuições são bem-vindas. Sinta-se à vontade para abrir issues e pull requests.
Licença
MIT