Generador de colores HEX, RGB y HSL

Qué puedes hacer aquí

• Crear un color sRGB aleatorio y mostrarlo a la vez como HEX, RGB y HSL.
• Copiar cualquiera de los tres formatos o pulsar una muestra de la paleta para copiar su HEX.
• Generar cinco colores independientes para explorar direcciones visuales.
• Calcular luminancia relativa y contraste frente a negro y blanco con dos decimales.
• Elegir automáticamente el texto negro o blanco de mayor contraste en cada muestra.

Respuesta rápida: cómo usar un color aleatorio

Pulsa «Generar color» para obtener una muestra y copia HEX, RGB o HSL según el programa de destino. La página presenta el contraste con negro y blanco; para texto normal, busca al menos 4.5:1, y para texto grande, 3:1. Si el diseño exige el nivel AAA, el umbral de texto normal es 7:1. Confirma el tamaño y el peso tipográfico antes de decidir.

Una muestra al azar sirve para explorar, probar estados de una interfaz o desbloquear un boceto. No debería convertirse directamente en color de marca. Revisa cómo convive con el fondo, enlaces, botones, estados de foco, gráficos y mensajes de error. Después documenta un conjunto reducido de tokens con usos concretos; una buena paleta de producto necesita jerarquía y pruebas, no una colección de valores interesantes.

Qué representan HEX, RGB y HSL

HEX escribe los canales rojo, verde y azul con dos dígitos hexadecimales cada uno. `#FF0000` equivale a rojo 255, verde 0 y azul 0. RGB expresa esas cantidades en base decimal: `rgb(255, 0, 0)`. Ambos describen el mismo color opaco dentro del espacio sRGB utilizado habitualmente por CSS y pantallas.

HSL separa tono en grados, saturación y luminosidad en porcentajes. Puede resultar cómodo para crear variaciones, aunque no es perceptualmente uniforme: aumentar diez puntos de luminosidad no produce la misma diferencia visual en todos los tonos. La conversión de esta página redondea tono, saturación y luminosidad a enteros, de modo que al reconstruir RGB podría aparecer una pequeña diferencia por redondeo.

Cómo se crea el color y qué significa aleatorio

La herramienta genera por separado tres enteros entre 0 y 255 mediante `Math.random`, los convierte a dos dígitos HEX y calcula el HSL correspondiente. Para inspiración visual no se necesita una fuente criptográfica: el resultado no protege una cuenta ni decide un sorteo con consecuencias. No utilices estos valores como token, clave, identificador secreto o prueba de imparcialidad.

Las 16 777 216 combinaciones posibles de RGB no se perciben como una distribución uniforme de matices o luminosidad. El espacio contiene muchas muestras oscuras o claras que pueden parecer próximas, y una secuencia corta puede repetir familias. «Aleatorio» describe el procedimiento de canales, no una selección equilibrada de colores agradables, accesibles, imprimibles o distintos entre sí.

Contraste con negro y blanco

El cálculo transforma cada canal sRGB a un valor lineal, obtiene la luminancia relativa con los coeficientes definidos por WCAG y aplica `(L1 + 0.05) / (L2 + 0.05)`, colocando la luminancia mayor en L1. El resultado va de 1:1, sin diferencia, a 21:1 para negro puro frente a blanco puro. Se muestran dos relaciones para comparar texto negro y blanco sobre la muestra.

La indicación «mejor texto» elige el mayor de los dos valores, pero no afirma automáticamente que sea suficiente para el uso previsto. Una relación de 3.8:1 podría aprobar texto grande y fallar texto normal. El tamaño visual, el peso, el antialiasing, la imagen de fondo y los estados interactivos importan. Mide la combinación exacta que llegará a producción.

Umbrales WCAG 4.5:1, 3:1 y 7:1

En WCAG 2.2, el criterio 1.4.3 de nivel AA exige 4.5:1 para texto normal y 3:1 para texto grande. La definición de texto grande depende del tamaño y del peso, no de que una frase parezca un título. El criterio 1.4.6 de nivel AAA eleva el texto normal a 7:1 y el grande a 4.5:1. Logotipos y texto puramente decorativo tienen un tratamiento distinto.

Los componentes no textuales, como límites de controles y estados necesarios para reconocer una interfaz, pueden estar sujetos a 3:1 respecto de colores adyacentes. Esta página solo compara la muestra con negro y blanco; no inspecciona iconos, bordes, foco ni otros fondos. Si eliges otro color de texto, calcula esa pareja en una herramienta de contraste dedicada antes de aprobarla.

Una paleta aleatoria no es una armonía

El botón de paleta crea cinco colores independientes. No busca complementarios, análogos, tríadas ni escalas de luminosidad; tampoco evita dos tonos casi iguales. Úsala para descubrir una dirección, luego conserva una o dos muestras y construye variaciones con una intención: fondo, superficie, texto, acento, éxito, advertencia y error.

En una interfaz, cada función necesita estados normal, hover, activo, foco y deshabilitado. Comprueba contraste en todos ellos y evita que el único cambio sea cromático. En gráficos, añade etiquetas, patrones, iconos o diferencias de forma para que una persona con visión cromática reducida pueda interpretar categorías. El color puede reforzar significado, pero no debería ser la única señal.

De la muestra a un sistema de diseño

Guarda el valor elegido con un nombre semántico, por ejemplo `--color-acento`, en lugar de multiplicar códigos sueltos. Crea escalas claras y oscuras de forma controlada y registra dónde puede utilizarse cada tono. Prueba el conjunto en páginas reales con texto largo, formularios, tablas, modo oscuro, zoom y preferencias de alto contraste.

Incluye personas y contenidos representativos en la revisión. Una combinación que funciona con una palabra puede fallar cuando el botón crece o el texto se traduce. Los colores de éxito y error deben conservar claridad sin depender únicamente de verde y rojo. Añade mensajes, iconos y estados de foco visibles. La accesibilidad es una propiedad del componente completo.

Pantalla, CSS e impresión

Los valores generados pertenecen al modelo sRGB habitual en la web. Dos pantallas pueden mostrarlos de forma diferente por calibración, brillo, modo nocturno, perfil de color y entorno. CSS también puede usar espacios más amplios como Display-P3, que esta herramienta no genera. Si el proyecto tiene gestión de color avanzada, convierte y documenta los valores dentro de ese flujo.

HEX de pantalla no equivale directamente a una tinta CMYK o Pantone. Papel, acabado, absorción y proceso de impresión alteran el resultado. Para una pieza física, pide una prueba al proveedor y trabaja con el perfil requerido. No selecciones un color corporativo definitivo mirando solo un teléfono; conserva muestras aprobadas y especificaciones separadas para web e impresión.

Privacidad, copia y límites

La generación y las conversiones se ejecutan en el navegador; no hay una imagen ni un archivo que enviar. Al copiar, el código pasa al portapapeles y puede ser leído por funciones del sistema. Los colores no suelen ser información sensible, pero un proyecto confidencial puede requerir igualmente seguir las normas del equipo y evitar pegar tokens internos en servicios no autorizados.

FunnyTools no guarda favoritos ni crea un enlace permanente a la paleta. Copia los valores que quieras conservar y registra el contexto. El resultado no evalúa daltonismo, legibilidad sobre fotografías, preferencias de usuario, brillo físico, impresión ni consistencia de marca. Utiliza la página para explorar y comprobar negro o blanco, después completa la revisión en el producto real.

Cómo utilizarla paso a paso

1. Pulsa «Generar color» o enfoca el área y usa la barra espaciadora fuera de controles de formulario.
2. Copia HEX, RGB o HSL y confirma que el programa de destino interpreta el mismo espacio sRGB.
3. Compara los ratios con negro y blanco según el tamaño y nivel WCAG del texto.
4. Genera cinco muestras si necesitas explorar, pero selecciona y organiza después una paleta intencional.
5. Prueba el color en componentes reales, estados interactivos, distintos contenidos y pantallas.

Situaciones en las que resulta útil

• Buscar un acento inicial para un prototipo y comprobar texto negro y blanco.
• Copiar un HEX para una propiedad CSS y documentar su equivalente RGB.
• Generar muestras para una presentación y descartar las que no alcanzan el contraste necesario.
• Comparar cómo cambia un tono entre pantalla y una prueba física de impresión.

Ejemplos completos

Límites y comprobaciones importantes

• La paleta contiene colores independientes al azar; no aplica teoría de armonía ni escalas perceptuales.
• HSL se redondea a enteros, por lo que una conversión inversa puede variar ligeramente.
• 4.5:1 corresponde a texto normal de nivel AA; el contexto decide qué umbral utilizar.
• Elegir el texto de mayor contraste entre negro y blanco no garantiza que todo el componente sea accesible.
• Math.random es suficiente para inspiración visual, pero no para seguridad, sorteos auditables o identificadores secretos.

Preguntas frecuentes