Herramientas de color gratuitas
Convierte colores, genera paletas, comprueba el contraste de accesibilidad, simula el daltonismo y mucho más.
Todas las herramientas de color
Convertidor de colores
Convierte colores entre HEX, RGB y HSL al instante. Vista previa en vivo con selector de colores. Copia valores CSS. Gratis, sin registro.
Generador de paletas de colores gratis en línea
Genera hermosas paletas de colores al azar o a partir de un color base. Bloquea favoritos, copia códigos HEX, exporta como CSS o imagen.
Verificador de contraste de colores
Compruebe la relación de contraste de los colores para verificar el cumplimiento de las normas de accesibilidad WCAG 2.1.
Generador de tonos de color
Elige cualquier color y genera tonos más claros y más oscuros al instante. Copia valores HEX, RGB o HSL. Gratis, se ejecuta en tu navegador.
Mezclador de colores
Mezcla dos o más colores y observa el resultado en tiempo real. Obtén valores HEX, RGB y HSL. Gratis, sin registro.
Simulador de daltonismo
Simulador gratuito de daltonismo. Cargue una imagen o introduzca colores para ver cómo les aparecen a las personas con protanopia, deuteranopia.
Selector de color de imagen
Cargue cualquier imagen y haga clic para extraer los colores. Obtenga los valores HEX, RGB y HSL al instante.
Convertidor HEX a RGB
Convierte códigos de color HEX a valores RGB al instante. Previsualización de color en vivo, conversión por lotes y salida CSS lista para copiar.
Buscador de nombres de colores CSS
Buscador gratuito de nombres de colores CSS. Introduce un color hexadecimal o RGB y encuentra al instante el color CSS con nombre más cercano con.
Rueda de colores gratuita
Explora armonías cromáticas con una rueda de colores interactiva. Encuentra colores complementarios, análogos.
Generador de fondos de pantalla con degradado gratuito
Crea y descarga fondos de pantalla con degradado personalizados para escritorio o móvil. Elige colores, ángulo y resolución, descarga como PNG.
Extractor de paleta de colores gratuito
Extrae los colores dominantes de cualquier imagen para crear una paleta de colores.
Generador de paletas de colores accesibles
Genere paletas de colores que cumplan los requisitos de contraste WCAG 2.2. Cada combinación se comprueba en tiempo real con las normas AA y AAA.
Sobre nuestras herramientas de color
Absolutool incluye 7 herramientas de color especializadas para diseñadores, desarrolladores y profesionales de la accesibilidad. Convierte entre los formatos HEX, RGB, HSL y HSB. Genera paletas armoniosas usando la teoría del color. Comprueba las ratios de contraste WCAG para asegurarte de que tus diseños sean accesibles para todos.
El simulador de daltonismo utiliza matrices de investigación Brettel/Viénot para modelar con precisión 8 tipos de deficiencia de visión cromática · sube una imagen o prueba colores individuales. Usa el generador de tonalidades para tokens de sistemas de diseño, el mezclador de colores para mezclas precisas y el selector de color de imagen para extraer colores de cualquier foto. Todas las herramientas se ejecutan íntegramente en tu navegador.
Los modelos de color en la web
Cada píxel de una página web moderna se describe con un valor de color que el navegador interpreta y pide a la GPU que represente. Los dos formatos que verás con más frecuencia son HEX (un triplete hexadecimal de seis dígitos como #3b82f6) y RGB (valores decimales como rgb(59 130 246)). Ambos describen lo mismo: cuánta luz roja, verde y azul mezclar en una pantalla que usa color aditivo. Una pantalla estándar de 24 bits ofrece 256 niveles por canal, lo que significa que se pueden direccionar 16,78 millones de colores únicos. El HEX es más corto, el RGB es más fácil de calcular, y ambos son intercambiables.
HSL (tono, saturación, luminosidad) y HSB (tono, saturación, brillo) describen el mismo color de pantalla pero en coordenadas más cercanas a cómo lo percibimos los humanos. El tono es la posición del color en la rueda cromática, de 0° (rojo) a 360°. La saturación indica lo vivo que es el color, del gris al puro. La luminosidad controla cuánto blanco o negro se mezcla. El HSL es el formato que los diseñadores suelen elegir al construir sistemas de diseño, porque ajustar un solo canal produce un cambio predecible, como oscurecer un botón un 10 % para el estado al pasar el cursor. CSS admite de forma nativa HEX, RGB, HSL y los más recientes LCH y OKLCH.
Detrás de todos estos formatos hay un espacio de color, que define exactamente qué significa «rojo 255» en términos físicos. El valor por defecto de la web es sRGB, normalizado por la CEI en 1996 y la gama que cubre casi todas las pantallas de ordenador y de teléfono. Los dispositivos Apple recientes, OLED y de gama alta admiten Display P3, una gama más amplia que añade alrededor de un 25 % más de rojos y verdes saturados. CSS ahora te permite escribir color(display-p3 1 0 0) para aprovecharla. La mayoría de las herramientas de color de este sitio trabajan en sRGB y llegan a todos los navegadores; el P3 amplía lo disponible sin cambiar el flujo de trabajo.
Entender el contraste de color de las WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) fijan umbrales numéricos para el contraste entre el texto y su fondo. El nivel AA, el que persiguen la mayoría de las auditorías de accesibilidad, exige una relación de al menos 4,5:1 para el texto normal y 3:1 para el texto grande (18 pt normal o 14 pt en negrita y superiores). El nivel AAA los endurece a 7:1 y 4,5:1. La relación se calcula a partir de la luminancia relativa de cada color, un valor de brillo perceptual derivado de las primarias sRGB mediante la fórmula IEC 61966-2-1. Dos colores que parecen «casi iguales» pueden aun así aprobar, y dos colores que parecen totalmente distintos pueden fallar si uno es gris sobre gris.
Estas cifras importan porque alrededor del 5 % de la población adulta mundial tiene una reducción medible de la sensibilidad al contraste por cataratas, glaucoma, retinopatía diabética o cambios maculares relacionados con la edad. La luz solar intensa reduce el contraste efectivo para todos. Las pantallas móviles vistas en ángulo lo reducen aún más. Los umbrales de las WCAG están diseñados para mantener el texto legible en esas condiciones reales, no en un monitor calibrado en una oficina con poca luz. Un algoritmo más reciente llamado APCA (el candidato a sustituirlo que llegará en las WCAG 3.0) tiene en cuenta cosas que las WCAG 2.x ignoran, como el grosor y la polaridad del texto. Por ahora, el 4,5:1 AA sigue siendo el estándar al que se refieren la mayoría de los reguladores.
El daltonismo y el diseño inclusivo
Alrededor del 8 % de los hombres y el 0,5 % de las mujeres de ascendencia noreuropea tienen alguna forma de deficiencia de la visión del color rojo-verde, y las cifras mundiales son de magnitud similar. Los tres tipos más comunes afectan a cómo responden los conos de la retina a longitudes de onda concretas. La deuteranomalía (la más común, alrededor del 5 % de los hombres) reduce la sensibilidad a la luz verde de longitud de onda media. La protanomalía reduce la sensibilidad a la luz roja de longitud de onda larga. La tritanomalía afecta a la percepción azul-amarillo y es mucho más rara. Los simuladores de este sitio usan la derivación por matriz de color de Brettel, Viénot y Mollon (1997), la referencia estándar para estas transformaciones en la ciencia del color.
La regla práctica de diseño es «no te bases solo en el color». Un icono de error rojo y un icono de éxito verde parecen idénticos a muchos usuarios con deuteranomalía. Añadir una forma distinta (una cruz frente a una marca de verificación), una etiqueta («Error» o «Éxito») o un patrón lo soluciona sin coste alguno para los demás usuarios. Los diseños de gráficos y paneles son los infractores más frecuentes, porque las leyendas suelen basarse en una muestra de color. El simulador de daltonismo de este sitio te permite previsualizar una captura de pantalla real a través de cada deficiencia común antes de publicar, para que detectes los elementos que habrían fallado en producción.
Teoría del color para paletas
La rueda cromática ordena los tonos según su ángulo alrededor del círculo: rojo a 0°, amarillo a 60°, verde a 120°, cian a 180°, azul a 240°, magenta a 300°. Los colores complementarios se sitúan directamente opuestos entre sí (rojo y cian, azul y naranja) y producen el contraste más fuerte. Las paletas análogas usan de dos a cuatro tonos contiguos en la rueda y resultan tranquilas y unificadas, muy adecuadas para fondos y degradados. Las paletas triádicas usan tres tonos equidistantes separados 120°, lo que aporta equilibrio con variedad. Las paletas tetrádicas usan cuatro tonos que forman un rectángulo. Estas reglas surgieron de los manuales de artistas del siglo XIX pero coinciden con lo que la investigación perceptual ha confirmado desde entonces.
Un sistema de marca típico necesita unos cinco colores: un color de marca principal, un color de acento (a menudo complementario), un gris neutro, más un verde de éxito y un rojo de error. El generador de paletas de este sitio elige primero la armonía y luego ofrece escalas de tintes y sombras de 10 pasos para cada color elegido, la misma estructura que usan sistemas de diseño como Tailwind, Material y Carbon. La herramienta de paleta accesible limita la generación a combinaciones que cumplen el contraste WCAG AA sobre un fondo blanco u oscuro. Ambas herramientas funcionan por completo en tu navegador, así que los colores que eliges para una marca aún no lanzada nunca se envían a ningún sitio.
Preguntas frecuentes
¿Por qué el mismo color se ve distinto en pantallas diferentes?
La mayoría de los monitores apuntan a la gama sRGB, pero cada panel tiene una calibración del punto blanco, un brillo y una gamma ligeramente distintos. Dos pantallas recién sacadas de la caja pueden mostrar #3b82f6 con una diferencia medible de tono y luminosidad. El diseño profesional se apoya en monitores calibrados (sondas de hardware X-Rite o Calibrite) para mantener esto dentro de la tolerancia. Para el trabajo diario, elegir un valor en HSL te da las mejores probabilidades de que las relaciones de color que pretendías (un cursor por encima un 10 % más oscuro, por ejemplo) sobrevivan de una pantalla a otra.
¿Es siempre suficiente un contraste de 4,5:1 para la accesibilidad?
Es el listón AA, el mínimo legal al que se refieren la mayoría de los reguladores (la Sección 508 en EE. UU., la EAA en Europa, la AODA en Ontario). Para texto donde la legibilidad es crítica, usuarios con baja visión, interfaces legibles a la luz del sol o contenido para públicos mayores, apunta a la relación más estricta AAA 7:1. Para elementos de interfaz que no son texto (iconos, bordes de botones), se aplica la regla de contraste de elementos no textuales de 3:1 de las WCAG 2.1.
¿Cuál es la diferencia entre HSL y HSV/HSB?
Ambos comparten los canales de tono y saturación pero difieren en su tercer eje. La luminosidad de HSL es simétrica en torno al 50 %: el 0 % es negro, el 50 % es el tono puro y el 100 % es blanco. El brillo de HSV/HSB es asimétrico: el 0 % es negro y el 100 % es el tono puro sin blanco. El HSL es más cómodo para sistemas de diseño donde mezclas hacia ambos extremos. El HSV es más común en la edición de imágenes porque se ajusta a la intuición del artista.
¿Son los códigos hexadecimales lo mismo que los colores Pantone o RAL?
No. Los códigos hexadecimales describen un color de pantalla mezclado a partir de luz roja, verde y azul (aditivo, proyectado). Los sistemas Pantone, RAL y similares describen pigmentos físicos impresos sobre papel (sustractivo, reflejado). El equivalente hexadecimal de «Pantone 286» es una aproximación en pantalla, no una coincidencia perfecta, porque las gamas no se solapan por completo. Para trabajos de marca que cruzan pantalla e impresión, los diseñadores suelen especificar ambos: el Pantone para la imprenta y un hexadecimal para lo digital.
¿Por qué simular el daltonismo en un diseño?
Alrededor de 1 de cada 12 hombres en el mundo tiene alguna forma de deficiencia de la visión del color, así que cualquier diseño usado por un público general llega a usuarios que no pueden distinguir ciertos tonos. Un indicador de estado rojo frente a verde puede parecerles idéntico. Pasar una captura de pantalla por un simulador antes de publicar revela qué partes del diseño se basan solo en el color, para que puedas añadir una etiqueta, un icono o un patrón y que el significado se transmita sin el color.
¿Suben estas herramientas de color mis imágenes o paletas a algún sitio?
No. Cada herramienta de esta categoría funciona por completo en tu navegador. Las imágenes subidas se procesan con JavaScript en un elemento canvas local, los datos de la paleta viven en localStorage, y no se envía nada a un servidor. Puedes comprobarlo abriendo las herramientas de desarrollo del navegador y observando la pestaña Red mientras usas cualquiera de las herramientas. Las únicas solicitudes que verás son para recursos estáticos y Google Analytics, nunca los bytes de tus imágenes ni tus valores de color.