Herramientas de color gratuitas para diseñadores y desarrolladores
Encuentra los colores perfectos para tu próximo proyecto
Escribe o elige cualquier color para obtener al instante Hex, RGB, HSL y OKLCH; después comprueba el contraste, crea tonos y encuentra la paleta ideal.
Gratis, siempre
Todas las herramientas sin costo y sin límites.
Ver herramientasSin registro
Entra y empieza: no necesitas crear una cuenta.
Elegir un color100 % privado
Tus imágenes y colores no salen de tu navegador.
Sacar colores de una fotoEn cualquier pantalla
Funciona con el dedo en teléfonos y tabletas.
Explorar paletas¿Qué quieres crear hoy?
Elige tu proyecto y te mostramos paletas que encajan.
Colores por familia
Paletas destacadas
Una selección para inspirarte. Desliza para ver más.
Herramientas para cada paso
Elige, convierte, comprueba y crea sin salir del navegador.
Generador de paletas
Genera paletas de colores con un clic: pulsa Espacio para cambiar, bloquea los colores que te gustan y exporta CSS, SCSS, Tailwind o JSON.
Verificador de contraste
Comprueba el contraste entre el color del texto y el del fondo según WCAG AA y AAA. Previsualiza texto normal, texto grande, botones, enlaces y combinaciones en modo oscuro.
Generador de tonos
Genera una escala de tonos de 50 a 900 a partir de un color base, copia las variables CSS y previsualiza tonos claros, oscuros y tokens de color listos para UI.
Extractor de paletas de imagen
Sube una foto o captura de pantalla y extrae sus colores Hex dominantes localmente en tu navegador. Copia una paleta para diseño de interfaces, branding y moodboards.
Color complementario
Encuentra el color complementario (opuesto) de cualquier color HEX o RGB, además del complementario perceptual OKLCH, el color invertido y esquemas divididos y triádicos.
Color aleatorio
Genera colores aleatorios con códigos HEX, RGB y HSL. Elige estilo claro, oscuro, pastel, vivo o neutro, genera uno o una cuadrícula y cópialos con un clic.
Aprende sobre el color
Cómo comprobar el contraste del color del texto según WCAG
Mide el contraste entre el texto y el fondo, entiende los umbrales AA y AAA y corrige el texto que no cumple sin tener que adivinar.
Leer la guía Cálculo de colorLa mezcla de colores digital y la opacidad, explicadas
Aprende cómo se mezclan los colores en pantalla, cómo la composición alfa cambia el resultado visible y cómo crear escalas de transición útiles.
Leer la guía Estados CSSEstilos accesibles para el color de enlaces y placeholders en CSS
Elige colores de enlace, hover, visitado y placeholder que sigan siendo reconocibles, legibles y cómodos con el teclado.
Leer la guíaGuarda tus colores favoritos
Toca el corazón en cualquier color y encuéntralo después en Mis paletas. Gratis y sin registro.