Herramientas de color
Paletas, degradados, conversión de formatos y comprobación de contraste — todo en tu navegador.
#3B82F6 #F6AF3B Herramientas de color gratuitas que funcionan por completo en tu navegador: crea una paleta a partir de cualquier color base con seis esquemas de armonía, diseña degradados CSS lineales, radiales o cónicos con vista previa en vivo, convierte entre HEX, RGB y HSL, y comprueba el contraste del texto frente a los umbrales WCAG AA y AAA. No se sube nada — todo funciona sin conexión.
Acerca de esta herramienta
Lo que proporcionas
- Un color base en HEX, y un esquema de armonía.
- Las paradas del degradado, el tipo de degradado (lineal, radial o cónico) y el ángulo.
- Dos colores para la comprobación de contraste, y si el texto es grande.
Lo que obtienes
- Una paleta que puedes copiar como lista HEX o como variables CSS.
- El CSS del degradado, y el color convertido entre HEX, RGB y HSL.
- Una relación de contraste con un resultado de cumple o no cumple frente a los umbrales WCAG AA y AAA.
Límites
- Trabaja en sRGB de 8 bits — solo HEX, RGB y HSL, sin CMYK ni perfiles de color de imprenta.
- Convertir de ida y vuelta puede desplazar un canal en una unidad, que es el redondeo normal de 8 bits.
- La comprobación de contraste cubre los dos colores que introduces, no el resto de un diseño.
Cómo usarla
Abre un panel
Elige Paleta, Degradado o Convertir y contraste en la fila de pestañas que hay bajo el título.
Arma una paleta
En Paleta, fija el color base con el selector de color o con el campo HEX, elige una armonía (Complementaria, Análoga, Triádica, Tetrádica, Complementaria dividida o Monocromática), luego fija los colores que quieras conservar y pulsa Regenerar para volver a sortear el resto.
Diseña un degradado
En Degradado, elige Lineal, Radial o Cónico, fija «Ángulo (grados)» — disponible para los tipos lineal y cónico — y añade o quita paradas de color con sus posiciones, mientras la vista previa y la línea de CSS de debajo se actualizan sobre la marcha.
Convierte y comprueba el contraste
En Convertir y contraste, escribe en el campo HEX, RGB o HSL y los otros dos lo siguen, luego fija el color del texto y el de fondo y marca Texto grande para leer la relación de contraste con sus resultados AA y AAA.
Copia el resultado
Usa «Copiar la lista HEX» o «Copiar las variables CSS» en la paleta, «Copiar CSS» en el panel de degradado, o «Copiar enlace a este resultado» para compartir los ajustes que lleva la URL.
Preguntas frecuentes
¿Cómo convierto un color entre HEX y RGB?
Usa la función de conversión de formatos de Herramientas de color para convertir colores entre formatos, directamente en tu navegador.
¿Puedo comprobar aquí el contraste de color para accesibilidad?
Sí, Herramientas de color incluye un comprobador de contraste junto a sus funciones de conversión de formatos.
¿Herramientas de color es gratis y funciona por completo en el navegador?
Sí, es gratis y todo funciona por completo en tu navegador.