#000000

Un generador de colores pensado para crear sin fricción

Este generador de colores produce un tono nuevo cada vez que pulsas un botón, haces clic en el lienzo o presionas la barra espaciadora. Cada color se muestra en grande con sus tres formatos habituales —HEX, RGB y HSL— listos para copiar con un solo toque, junto con su nombre aproximado en español para que te resulte fácil recordarlo y comunicarlo.

Cómo funciona

1. Genera: pulsa «Generar color», haz clic sobre el fondo o usa la barra espaciadora. El color cambia con una transición suave.
2. Copia: toca cualquier chip HEX, RGB o HSL y el código quedará en tu portapapeles al instante.
3. Reutiliza: los últimos 12 colores quedan guardados en tu navegador; haz clic en cualquiera para volver a él.
4. Llévatelo: descarga el color como SVG o compártelo directamente desde tu dispositivo.

HEX, RGB y HSL: en qué se diferencian

Los tres formatos describen el mismo color, pero cada uno brilla en un contexto distinto:

Cómo usarlos en CSS

Cualquiera de los tres valores se pega directamente en tus hojas de estilo. La forma más mantenible es guardarlos en variables personalizadas:

:root {
  --primario: #4a7dff;              /* HEX */
  --sombra: rgba(74, 125, 255, .25); /* RGB con alpha */
  --acento: hsl(223, 100%, 65%);     /* HSL */
}

Con HSL es especialmente fácil derivar paletas: mantén el tono y baja la luminosidad para obtener sombras, o súbelo para conseguir tintes más claros.

Ideas prácticas para tu próximo color

• Paletas rápidas: genera un color que te guste y construye alrededor su tono análogo o complementario usando HSL como referencia.
• Estados de interfaz: a partir de un color base, crea versiones más claras para hover y más oscuras para active.
• Moodboards: descarga los SVG de tus colores favoritos y reúnelos en un tablero antes de decidir la dirección visual.

Preguntas frecuentes