Generador de colores aleatorios

Ya hay un color aleatorio esperando — pulsa la barra espaciadora para el siguiente y copia HEX, RGB o HSL con un clic.

Cómo se usa

  1. En cuanto se abre la página ya hay un color en pantalla — el primer resultado no necesita ningún clic.
  2. Pulsa la barra espaciadora (o «Generar») para el siguiente color. Elige antes un estilo si quieres otro tipo de aleatoriedad: «Equilibrado» se queda en la zona media utilizable del espacio, «Cualquiera» recorre todo el espacio HSL, y «Vivo» y «Pastel» apuntan a acentos y fondos suaves.
  3. Copia HEX, RGB o HSL con su botón — o haz clic en la muestra grande para copiar el HEX. «Copiar los tres» pone todos los formatos en el portapapeles, uno por línea.

Ejemplo

Ajustes

Estilo «Equilibrado»

Un resultado posible

HEX #A5B3C0
RGB rgb(165, 179, 192)
HSL hsl(210, 18%, 70%)

Los valores son aleatorios, así que nunca obtendrás exactamente estos — comprueba en su lugar la forma: HEX es # más seis dígitos hexadecimales, RGB son tres enteros de 0 a 255, HSL es un tono en grados más dos porcentajes. Las insignias Aa de la muestra indican cómo se lee el texto negro y el blanco sobre el color (contraste WCAG; 21:1 es lo mejor, 1:1 es invisible).

Alcance, límites y preguntas habituales

  • Solo colores opacos: sin alfa y sin HEX de 8 dígitos. Para transparencia, pega el valor en el conversor de colores.
  • Tres formatos: HEX, RGB y HSL. HSV, CMYK y otros espacios de color son tarea del conversor de colores.
  • «Equilibrado», «Vivo» y «Pastel» son rangos utilizables escogidos a mano en HSL — deliberadamente no una elección matemáticamente uniforme. Elige «Cualquiera» para un sorteo uniforme por todo el espacio HSL; los grises turbios y los casi blancos forman parte del trato.
  • La aleatoriedad proviene de crypto.getRandomValues de tu navegador — criptográficamente fuerte, pero no un servicio de «verdadero aleatorio» basado en ruido atmosférico.
  • La franja de colores recientes solo vive durante esta visita: recargar la borra. No se sube, guarda ni escribe nada en la URL, y el botón de compartir solo comparte el enlace de la página.
  • Las insignias Aa comparan el color solo con texto negro y texto blanco (luminancia relativa WCAG 2.x). Otros colores de texto, superposiciones y gestión de color quedan fuera de alcance.
  • El redondeo es a nivel de presentación: convertir el mismo color entre HEX y HSL puede desplazar un canal en 1.

Lo que suele necesitarse después, una vez tienes el color.