Kit de herramientas
Herramientas de color online
Herramientas de color gratuitas para diseñadores y desarrolladores: conversión, contraste, mezcla, nombres, opacidad, paletas desde imágenes, degradados, OKLCH, equivalencias de Tailwind y escalas de tonos para UI. Todo funciona en tu navegador.
Herramientas de estudio
Elige una herramienta según la tarea
Empieza por el problema que tienes delante. Los resultados se actualizan al instante.
Convertir
Conversor de RGB a Hex con RGBA, HSL y OKLCH
Convierte valores RGB y RGBA a Hex, Hex8, HSL, HSV y OKLCH al instante para CSS, tokens de diseño y sistemas de color de interfaces.
Conversor de Hex a RGB con HSL, HSV y OKLCH
Convierte códigos de color Hex de 3, 4, 6 u 8 dígitos a RGB, RGBA, HSL, HSV y OKLCH, incluida la transparencia alfa.
Calculadora de opacidad de color - RGBA y Hex alfa
Convierte porcentajes de opacidad a valores RGBA, HSLA y Hex alfa de ocho dígitos, con vista previa en tiempo real sobre blanco, negro y fondos personalizados.
Tabla de opacidad Hex - Valores alfa para CSS
Convierte porcentajes de opacidad a valores Hex alfa de dos dígitos y a códigos de color Hex de ocho dígitos con vista previa RGBA.
Conversor OKLCH - De Hex, RGB y HSL a OKLCH
Convierte colores Hex, RGB o HSL a OKLCH y copia la sintaxis de color CSS moderna junto a los valores Hex, RGB, HSL y HSV.
Convertidor de RGB a CMYK: valores HEX a CMYK
Convierte colores RGB, HEX o HSL a porcentajes CMYK para imprimir. Consulta cian, magenta, amarillo y negro, la cobertura total de tinta y todos los formatos web.
Convertidor de CMYK a HEX: de CMYK a RGB
Convierte porcentajes CMYK a códigos de color HEX, RGB y HSL para la web. Ajusta cian, magenta, amarillo y negro con deslizadores y copia el equivalente en pantalla.
Convertidor de HSL a HEX: HSL y HSLA a hexadecimal
Convierte colores HSL y HSLA a HEX, RGB y OKLCH. Ajusta tono, saturación y luminosidad con deslizadores y copia el código hexadecimal para tu CSS al instante.
Comprobar
Verificador de contraste de color - WCAG AA y AAA
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.
Buscador de nombres de color - Nombres CSS y chinos
Encuentra el nombre de color CSS y el nombre de color tradicional chino más cercanos a cualquier valor Hex, RGB o HSL con una comparación perceptual en OKLab.
Conversor de colores Tailwind - Encuentra la clase más cercana
Convierte cualquier color Hex, RGB o HSL al color más cercano de la paleta de Tailwind CSS y copia las clases bg, text, border y ring.
Simulador de daltonismo para paletas e imágenes
Simula protanopia, deuteranopia, tritanopia y acromatopsia en una paleta o imagen y encuentra los pares de colores que las personas daltónicas pueden confundir.
Crear
Mezclador de colores online y calculadora de mezclas
Mezcla dos colores digitales en cualquier proporción, copia el valor resultante en Hex, RGB o HSL y genera transiciones suaves de 5 o 10 pasos.
Extractor de paletas de imagen - Colores desde fotos
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.
Generador de degradados CSS con pasos de color
Crea un degradado lineal CSS de dos colores, ajusta el ángulo, copia el CSS del fondo y exporta pasos de color intermedios suaves.
Generador de tonos de color - Escala UI de 50 a 900
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.
Generador de paletas de colores: bloquea y exporta
Genera paletas de colores con un clic: pulsa Espacio para cambiar, bloquea los colores que te gustan y exporta CSS, SCSS, Tailwind o JSON.
Generador de colores aleatorios: HEX, RGB y HSL
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.
Buscador de colores complementarios y opuestos
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.
¿Quieres entender primero los formatos de color?
Aprende Hex, RGB, HSL, contraste y opacidad en las guías y luego aplícalo con las herramientas.