Selector de color
Comprueba el contraste WCAG, crea degradados CSS y genera paletas de color.
¿Solo necesitas elegir un color o convertir HEX ↔ RGB ↔ HSL (con cuentagotas)? Usa el Conversor HEX RGB.
Ejemplos
Comprobación de contraste
Entrada
#1A1A1A sobre #F5F5F5
Salida
≈ 16:1 — pasa AA y AAA
Gradiente CSS
Entrada
#3B82F6 → #9333EA, 90°
Salida
background: linear-gradient(90deg, #3B82F6, #9333EA);
Paleta
Entrada
#3B82F6
Salida
Tonos + colores complementarios, análogos, triádicos
Acerca de esta herramienta
Este estudio de color online y gratuito reúne tres esenciales: un comprobador de contraste WCAG con aprobado/no aprobado AA/AAA y vista previa de texto en vivo; un generador de gradientes CSS con declaración lista para copiar; y un generador de paletas para tonos y colores complementarios, análogos y triádicos. Cada pestaña tiene un selector de color integrado, y todo se ejecuta en tu navegador sin subir nada. Para la conversión pura HEX ↔ RGB ↔ HSL y un cuentagotas en pantalla, usa el {link}.
Cómo se usa
- Contraste: fija colores de texto y fondo para comprobar la accesibilidad WCAG.
- Gradiente: elige dos colores y un ángulo, luego copia el CSS.
- Paleta: introduce un color base y haz clic en cualquier muestra para copiarla.
Para quién es
Diseñadores y desarrolladores que comprueban el cumplimiento de accesibilidad, construyen fondos CSS y crean paletas coherentes — sin hacer malabares con herramientas separadas.
Preguntas frecuentes
¿Qué puede hacer esta herramienta de color?
Tres cosas en un solo lugar: comprobar el contraste WCAG entre dos colores, crear un gradiente CSS y generar paletas de tonos y armonías a partir de un color base. Cada pestaña tiene un selector de color integrado.
¿Es gratis?
Sí — completamente gratis, sin registro, y todo se ejecuta en tu navegador sin subir nada.
¿Cómo funciona el comprobador de contraste?
Introduce un color de texto y uno de fondo y muestra la relación de contraste WCAG más aprobado/no aprobado para AA y AAA en texto normal y grande, con vista previa en vivo.
¿Qué relación de contraste necesito?
WCAG AA necesita al menos 4.5:1 para texto normal y 3:1 para texto grande; AAA necesita 7:1 y 4.5:1 respectivamente. El comprobador marca cada nivel por ti.
¿Puedo copiar el gradiente CSS y los colores de la paleta?
Sí. La pestaña de gradiente da una declaración background: lista para copiar, y cada muestra de la paleta copia su hex al hacer clic.
¿Dónde elijo un color o convierto HEX/RGB/HSL?
Usa el Conversor HEX RGB dedicado — elige un color (con cuentagotas en pantalla en Chrome/Edge) y muestra HEX, RGB y HSL. Este estudio se centra en lo que haces con los colores: contraste, gradientes y paletas.
¿Puedo capturar un color de una página web o imagen?
Sí — usa el cuentagotas del Conversor HEX RGB (y su bookmarklet) para capturar un color de cualquier parte de la pantalla en Chrome y Edge, y trae el hex aquí.
Herramientas relacionadas