Generador de colores aleatorios

Qué hace el generador de colores aleatorios

Cada vez que pulsas Generar se elige un color nuevo al azar y se muestra su código en tres formatos: HEX, RGB y HSL. El modo paleta te da cinco colores a la vez: bloquea los que te gusten y vuelve a generar el resto hasta que el conjunto te convenza.

Junto a cada color hay una comprobación de contraste. Indica lo legible que sería un texto blanco y un texto negro encima de ese color, con la misma relación de contraste que usan las pautas de accesibilidad web (WCAG).

Cómo usar el generador de colores

1. Pulsa Generar (o la barra espaciadora) para obtener un color aleatorio nuevo.
2. Copia el valor que necesites. Los códigos HEX, como #3A7BD5, sirven en casi todas las herramientas de diseño y páginas web; RGB indica las partes de rojo, verde y azul, y HSL describe el tono, la saturación y la luminosidad.
3. Cambia al modo Paleta de 5 para ver cinco colores uno junto a otro.
4. Bloquea los colores que quieras conservar. Al generar de nuevo, solo cambian los que no están bloqueados.
5. Revisa el contraste. Cada color muestra su relación con texto blanco y con texto negro, para que veas de un vistazo cuál se lee mejor.

Ideas para usar un generador de paletas de colores

Proyectos de diseño

¿No das con la combinación de colores de un cartel, una presentación, una web o una invitación? Genera una paleta, bloquea uno o dos colores que encajen y sigue probando hasta que el resto encuentre su sitio.

Práctica de arte e ilustración

Ponte un reto: pinta o dibuja algo usando solo los cinco colores de la pantalla. Los límites al azar te obligan a mezclar, superponer y probar combinaciones que nunca elegirías a propósito.

Programación y pruebas

Un color HEX aleatorio viene muy bien para fondos provisionales, datos de prueba y experimentos rápidos con temas. Copia el código directamente en tu hoja de estilos.

Manualidades y decoración

Tejer, coser, hacer tarjetas o pintar una habitación empieza siempre eligiendo colores. Usa la paleta como punto de partida y ajústala a los materiales que tengas.

Clases sobre el color

Enseña a tus alumnos cómo HEX, RGB y HSL describen el mismo color de formas distintas. La comprobación de contraste es una manera sencilla de explicar por qué algunos textos cuestan de leer sobre ciertos fondos.

Consejos para trabajar con colores

• Lee un código HEX por parejas. Los seis caracteres que siguen a # son tres parejas para rojo, verde y azul, cada una de 00 (nada) a FF (máximo).
• Usa HSL para aclarar u oscurecer. Mantén el tono y cambia la luminosidad en tu herramienta de diseño para obtener versiones más claras y más oscuras del mismo color.
• Busca un buen contraste. El nivel AA de las WCAG pide una relación de al menos 4,5:1 para texto normal y 3:1 para texto grande.
• Primero bloquea, luego genera. Si ya tienes un color que te encanta, bloquéalo y deja que el generador te proponga los demás.
• La pantalla y el papel no son iguales. Los colores pueden verse distintos al imprimirlos, así que haz una prueba antes de una impresión grande.
• ¿También buscas ideas de arte? Combina una paleta con el generador de imágenes aleatorias o con una lista de cosas para dibujar.