Curso gratuito de JavaScript
Demo · Variables CSS + HSL + JS

Color con intención

Por qué HSL es mejor que hex cuando quieres manipular color desde código — y cómo las variables CSS conectan CSS con JS.

hsl(12, 65%, 52%)
H · S · L
H 12°
S 65%
L 52%
Historial
HSL

¿Por qué HSL en lugar de hex?

H
Hue · tono
0 – 360°
S
Saturation · viveza
0 – 100%
L
Lightness · brillo
0 – 100%

Con hex (#c84b2f) no puedes saber qué color es sin verlo. Con HSL (hsl(12, 65%, 52%)) puedes leer: es un rojo-naranja, bastante saturado, tono medio.

Para manipular color desde código, HSL es superior porque cada número controla una propiedad visual independiente. Si quieres variar solo el tono sin tocar viveza ni brillo, cambias solo H. Con hex tendrías que recalcular los tres canales.

Regla práctica: fija S y L en valores que siempre den buenos resultados (S: 55–70%, L: 45–60%) y solo randomiza H. Así nunca obtienes colores feos.
CSS

Variables CSS — --propiedad

Las variables CSS (también llamadas custom properties) guardan valores que puedes reutilizar en todo tu stylesheet. Se definen en :root para que estén disponibles globalmente.

/* Definir */
:root {
  --h: 12;
  --s: 65;
  --l: 52;
}

/* Usar — calc() convierte el número a % */
background: hsl(
  var(--h),
  calc(var(--s) * 1%),
  calc(var(--l) * 1%)
);

El truco de calc(var(--s) * 1%) existe porque las variables CSS guardan el número puro (65) y hsl() necesita el símbolo de porcentaje. Al multiplicar por 1%, CSS convierte 65 → 65%.

¿Por qué separar H, S y L en variables distintas? Para poder cambiar cada una de forma independiente desde JS. Si guardas el string completo "hsl(12, 65%, 52%)" en una variable, tendrías que reconstruirlo entero cada vez.
JS

setProperty — tocar variables CSS desde JS

document.documentElement es el elemento <html> — la raíz del documento, donde viven las variables de :root. style.setProperty cambia el valor de cualquier propiedad CSS, incluyendo variables.

// Cambiar una variable CSS desde JS
document.documentElement.style.setProperty('--h', 240)

// El CSS reacciona automáticamente —
// cualquier elemento que use var(--h) se actualiza

Esto es poderoso porque un solo cambio en JS actualiza todo el CSS que depende de esa variable. No tienes que tocar cada elemento individualmente.

// Función completa del generador
function generarAleatorio() {
  let h = Math.floor(Math.random() * 360)

  document.documentElement.style.setProperty('--h', h)

  // S y L no cambian — el color siempre se ve bien
}

Comparado con el generador hex de la clase anterior, este código es más corto, más legible y más predecible: sabes exactamente qué está cambiando y por qué el resultado siempre funciona visualmente.

setProperty vs style directo: para propiedades normales puedes usar element.style.color = "red", pero para variables CSS (--h) es obligatorio usar setProperty — la sintaxis de punto no las reconoce.
JS

Sliders — evento input

Los sliders usan el evento input (no click) porque se dispara en cada movimiento del slider, no solo al soltar. Eso da la sensación de respuesta en tiempo real.

const sliderH = document.querySelector('#slider-h')

sliderH.addEventListener('input', () => {
  let valor = sliderH.value  // e.g. "240"

  document.documentElement.style
    .setProperty('--h', valor)
})

sliderH.value devuelve el valor actual del input como string. En este caso CSS lo acepta directamente. Si necesitaras operar matemáticamente con él, usarías Number(sliderH.value) o parseInt(sliderH.value) para convertirlo a número.