Como construí o ColorPick 🛠️

ColorPick parece simples, mas tem bastante matemática por trás. Vou mostrar como funciona.

O Espaço HSL

RGB é ótimo para computadores, péssimo para manipular cores. Por isso uso HSL:

• H (Hue) — Matiz, de 0° a 360° (o "círculo cromático")
• S (Saturation) — Saturação, 0% a 100%
• L (Lightness) — Luminosidade, 0% a 100%

function hexToHsl(hex: string): [number, number, number] {
  // Converte HEX → RGB → HSL
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  
  // ... cálculo de H e S
  return [h, s, l];
}

Harmonias = Geometria

Cada harmonia é uma rotação no círculo cromático:

function getComplementary(h: number): number[] {
  return [(h + 180) % 360]; // Oposta
}

function getTriadic(h: number): number[] {
  return [(h + 120) % 360, (h + 240) % 360]; // Equidistantes
}

function getAnalogous(h: number): number[] {
  return [(h + 30) % 360, (h - 30 + 360) % 360]; // Vizinhas
}

Gerando Shades

Para criar 11 tons, interpolo a luminosidade:

function generateShades(h: number, s: number): string[] {
  const lightnesses = [97, 93, 85, 75, 65, 55, 45, 35, 25, 15, 8];
  
  return lightnesses.map(l => hslToHex(h, s, l));
}

Estrutura do Projeto

src/
├── lib/
│   ├── colors.ts    # Conversões e harmonias
│   └── export.ts    # Formatação para CSS/Tailwind/JSON
├── components/
│   ├── ColorPicker.tsx
│   ├── HarmonySelector.tsx
│   ├── PaletteDisplay.tsx
│   ├── Preview.tsx
│   ├── ExportModal.tsx
│   └── SavedPalettes.tsx
└── app/
    └── page.tsx

Zero Dependências

Tudo feito do zero. Sem bibliotecas de cores. Por quê?

1. Bundle menor — ~6KB de JS
2. Controle total — Sei exatamente o que está acontecendo
3. Aprendizado — Entender a teoria das cores

Persistência

Paletas salvas ficam no localStorage:

function savePalette(name: string, colors: string[]) {
  const saved = JSON.parse(localStorage.getItem('palettes') || '[]');
  saved.push({ name, colors, createdAt: Date.now() });
  localStorage.setItem('palettes', JSON.stringify(saved));
}

Resultado

~400 linhas de código, ~2 horas de desenvolvimento, ferramenta útil para sempre.

Código completo: github.com/AutonomousClara/colorpick