🎨 Color Converter — Conversor de Colores Online Gratis

Demo: miguelacm.es/tools/color-converter Portfolio: miguelacm.es

Herramienta web gratuita para convertir colores entre HEX, RGB, HSL y HSV al instante. Incluye paleta de matices, colores relacionados, contraste WCAG 2.1 e historial de sesión. Funciona 100% en el navegador, sin registro, sin servidor.

---

✨ Características

• 4 formatos simultáneos — HEX, RGB, HSL, HSV y variable CSS, todos visibles y copiables
• Conversión en tiempo real — edita cualquier campo o slider y todos los formatos se actualizan al instante
• Selector de color nativo — integrado con el picker del navegador
• Color aleatorio — genera un color al azar con un clic
• Sliders con gradientes — cada componente muestra su rango visual (R de negro a rojo puro, H en espectro completo, etc.)
• Paleta de 9 matices — variaciones de luminosidad del 10% al 90% del color actual
• Colores relacionados — análogos (±30°), complementario (+180°) y triádico (+120°)
• Contraste WCAG 2.1 — ratio AA (≥4.5:1) y AAA (≥7:1) sobre blanco y negro
• Historial de sesión — últimos 8 colores usados; se borra al recargar
• Embebible — frame-ancestors *, sin X-Frame-Options, listo para iframe

---

🔢 Matemáticas de color (sin librerías externas)

HEX → RGB

r = parseInt(hex.slice(1,3), 16)
g = parseInt(hex.slice(3,5), 16)
b = parseInt(hex.slice(5,7), 16)

RGB → HEX

'#' + [r,g,b].map(v => Math.round(v).toString(16).padStart(2,'0')).join('')

RGB → HSL

r/=255; g/=255; b/=255
max=Math.max(r,g,b); min=Math.min(r,g,b); l=(max+min)/2
s = max===min ? 0 : l<0.5 ? d/(max+min) : d/(2-max-min)
h = (según canal dominante) * 360

HSL → RGB

// Algoritmo eficiente basado en la función f(n)
a = s * min(l, 1-l)
f(n) = l - a * max(-1, min(k(n)-3, min(9-k(n), 1)))
donde k(n) = (n + h/30) % 12
RGB = [f(0), f(8), f(4)] * 255

RGB → HSV

v = max(r,g,b) / 255
s = (v===0) ? 0 : (max-min) / max
h = (mismo cálculo que HSL)

HSV → RGB

f(n) = v - v*s * max(0, min(k, 4-k, 1))
donde k = (n + h/60) % 6
RGB = [f(5), f(3), f(1)] * 255

Contraste WCAG 2.1

// Luminancia relativa
linearize(c) = c/255 <= 0.03928 ? c/(255*12.92) : ((c/255+0.055)/1.055)^2.4
L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin

// Ratio de contraste
ratio = (max(L1,L2) + 0.05) / (min(L1,L2) + 0.05)
// AA: ratio >= 4.5 | AAA: ratio >= 7

---

🏗 Estructura

color-converter/
├── src/
│   ├── app/
│   │   ├── globals.css         # Variables de color + .glass
│   │   ├── layout.tsx          # Metadatos, autor, footer
│   │   └── page.tsx            # Landing: herramienta + how-to + FAQ + embed
│   └── components/
│       └── ColorConverter.tsx  # Componente principal (client-side)
├── package.json
├── next.config.ts              # Headers de seguridad, frame-ancestors *
├── tsconfig.json
└── postcss.config.mjs

---

🚀 Instalación y uso

npm install
npm run dev
# → http://localhost:3000

Variables de entorno (opcionales)

NEXT_PUBLIC_SITE_URL=https://tu-dominio.com/tools/color-converter
NEXT_PUBLIC_EMBED_URL=https://tu-dominio.com/embed/color-converter

---

📋 Cómo embeber

<iframe
  src="https://miguelacm.es/embed/color-converter"
  width="100%"
  height="800"
  style="border:none;border-radius:12px;"
  title="Conversor de Colores — miguelacm.es"
  loading="lazy"
></iframe>

---

📄 Licencia

MIT © Miguel Ángel Colorado Marin (MACM)

---

Built with ❤️ by MACM — Full Stack Developer & Cybersecurity Specialist from Guadalajara, Spain.