Herramientas de Color

Herramientas de color en línea gratuitas para diseñadores y desarrolladores. Convierte colores, verifica contrastes, genera paletas y más.

Verificador de Contraste de Color

Comprueba cualquier par de color de texto y fondo según WCAG 2.1. Obtén la relación de contraste, el resultado AA y AAA en ambos tamaños de texto y una corrección sugerida si falla.

Conversor de Color

Convierte cualquier color entre HEX, RGB, HSL, CMYK, LAB, OKLCH, HWB, HSB, LCH, XYZ y LUV a la vez. Todos los formatos se muestran juntos y se copian con un clic.

Generador de Paletas de Color

Crea una paleta desde cualquier color base con seis reglas de armonía: complementaria, análoga, triádica, tetrádica, complementaria dividida y monocromática. Copia en CSS, Tailwind o JSON.

Simulador de Daltonismo

Mira cualquier color o paleta tal como se percibe con ocho tipos de deficiencia de visión del color, incluidas protanopía, deuteranopía y tritanopía, y detecta los pares que dejan de distinguirse.

Extractor de Color de Imagen

Extrae los colores dominantes de cualquier foto, captura o ilustración. Sube o pega una imagen y obtén una paleta lista con valores hex, RGB y HSL. Nada se envía a un servidor.

Buscador de Color Tailwind

Pega cualquier valor hex, RGB o HSL y encuentra la clase de Tailwind CSS más cercana en toda la paleta v4, con la distancia exacta y los tonos vecinos para comparar.

Conversor de Color CSS

Pega cualquier valor de color CSS (con nombre, hex, rgb(), hsl(), oklch(), color-mix()) y obtén todos los demás formatos CSS, con el alfa conservado y sintaxis moderna junto a la clásica.

Selector de Color

Elige cualquier color y obtén su valor al instante en HEX, RGB, HSL, CMYK y 7 formatos más. Haz clic para copiar.

Generador de Degradados CSS

Crea hermosos degradados CSS con un editor interactivo. Construye degradados lineales, radiales y cónicos con paradas de color y ángulos personalizados.

Generador de Sombras y Matices

Genera sombras y matices de cualquier color. Crea variaciones más claras y más oscuras con códigos hex listos para copiar.

Generador de Colores Aleatorios

Genera colores aleatorios con restricciones opcionales como pastel, vívido, cálido o frío. Obtén códigos hex, RGB y HSL al instante.

Mezclador de Colores

Mezcla dos o más colores con proporciones ajustables. Ve el resultado combinado en HEX, RGB, HSL y más.

Buscador de Nombres de Color

Introduce cualquier color en hex o RGB y encuentra su color con nombre más cercano. Identifica qué color estás viendo a partir de una base de datos de más de 500 colores con nombre.

Verificador de Accesibilidad de Paleta

Comprueba las relaciones de contraste WCAG para cada par de colores en tu paleta. Encuentra qué combinaciones cumplen los estándares de accesibilidad AA y AAA.

Generador de Color de Texto Legible

Ingresa un color de fondo y obtén los mejores colores de texto que cumplen los estándares de accesibilidad WCAG. Encuentra colores de primer plano legibles al instante.

Generador de Paleta de Colores Tailwind

Genera una paleta completa de colores Tailwind CSS (50-950) a partir de un solo color de marca. Obtén tonos perceptualmente uniformes listos para pegar en tu configuración.

Generador de Escala de Colores

Genera escalas de colores uniformemente espaciadas entre dos colores. Compara la interpolación en los espacios de color sRGB, HSL y LAB.

Exportador de Tokens de Color

Convierte tu paleta de colores en tokens de diseño. Exporta como propiedades personalizadas CSS, variables SCSS, configuración Tailwind o tokens JSON.

Extractor de Gradientes de Imagen

Extrae gradientes CSS de imágenes. Sube cualquier imagen y obtén el gradiente CSS lineal o radial más cercano con paradas de color.

Generador de Sombra CSS

Crea y previsualiza sombras CSS box-shadow con un editor interactivo. Ajusta desplazamiento, desenfoque, expansión y color. Apila múltiples sombras.

Generador de Sombra de Texto CSS

Crea y previsualiza sombras de texto CSS. Ajusta el desplazamiento, el desenfoque y el color para dar profundidad y estilo a tu tipografía.

Generador de Border Radius CSS

Crea y previsualiza valores de border-radius CSS con controles individuales por esquina. Soporta radios elipticos y formas complejas.

Previsualizador de Combinaciones de Fuentes

Previsualiza combinaciones de Google Fonts para encabezados y texto del cuerpo. Encuentra la combinación de fuentes perfecta con colores y tamaños personalizados.