Herramientas de color para diseñadores
El trabajo con color tiene dos mitades: elegir valores y demostrar que funcionan. Acá están las dos: selectores, armado de paletas, degradados y conversión entre HEX, RGB y HSL, junto con verificadores que te dan la relación de contraste exacta. La segunda mitad es la más útil. Una combinación de 4,4 a 1 no aprueba WCAG AA para texto de cuerpo, y conviene mucho más enterarse acá que en una revisión.
Herramientas de esta categoría
- Conversor de HEX a RGB Convierte códigos de color HEX a valores RGB al instante en tu navegador.
- Conversor de RGB a HEX Convierte valores de color RGB y RGBA a códigos HEX al instante en tu navegador.
- Conversor de RGB a HSL Convierte valores de color RGB y RGBA a códigos HSL al instante en tu navegador.
- Conversor de HSL a RGB Convierte valores de color HSL y HSLA a códigos RGB al instante en tu navegador.
- Conversor de HEX a HSL Convierte códigos de color HEX a valores HSL al instante en tu navegador.
- Conversor de HSL a HEX Convierte valores de color HSL y HSLA a códigos de color HEX al instante en tu navegador.
- Generador de Gradientes CSS Crea gradientes CSS lineales y radiales con vista previa en vivo y copia el código.
- Generador Avanzado de Gradientes CSS Crea gradientes CSS lineales, radiales y cónicos con paradas de color ilimitadas, ajustes preestablecidos y vista previa en vivo.
- Generador de Box Shadow CSS Diseña sombras CSS (box-shadow) de forma visual con vista previa en vivo y controles deslizantes de desplazamiento, desenfoque, expansión, color, opacidad e inset.
- Generador de Border Radius CSS Genera border-radius CSS de forma visual con vista previa en vivo, controles por esquina, opción para enlazar todas las esquinas y unidades en px o porcentaje.
- Generador de CSS Clamp Genera un valor clamp() de CSS fluido y responsive a partir de un tamaño mínimo y máximo y sus viewports, con unidades px o rem y una vista previa en vivo de la fórmula.
- Generador de Colores Tailwind Genera una escala de colores completa de Tailwind CSS (50–950) a partir de cualquier color base, con muestras en vivo y salida lista para copiar en formato @theme de Tailwind v4 o config de v3.
- Verificador de Contraste de Colores Comprueba la relación de contraste WCAG entre dos colores y descubre si superan los niveles de accesibilidad AA y AAA.
- Verificador de Colores Accesibles Comprueba si los colores de tu texto y fondo son accesibles y obtén sugerencias de colores compatibles con WCAG que pasan AA o AAA cuando fallan.
- Generador de Paletas de Colores Genera paletas de colores bonitas a partir de cualquier color base usando reglas de armonía — complementaria, análoga, tríada, tétrada, monocromática y tonos — con muestras en vivo y variables CSS listas para copiar.
- Generador de Colores Aleatorios Genera uno o muchos colores aleatorios a la vez en HEX, RGB y HSL. Bloquea los colores que te gusten, vuelve a generar el resto y copia cualquier color o el lote completo, todo en tu navegador.
- Generador de Colores Material Genera una paleta de colores Material Design completa a partir de cualquier color base, con todos los tonos primarios (50–900), colores de acento (A100–A700), muestras en vivo y salida lista para copiar en CSS, SCSS o JSON.
- Generador de Favicon Convierte cualquier imagen en PNGs de favicon en todos los tamaños que necesites.
- Generador de Placeholder SVG Genera imágenes de placeholder en SVG ligeras con tamaño, colores y texto personalizados. Copia el código SVG o el data URI, o descarga el archivo.
- Generador de Filtros CSS Crea efectos de filtro CSS visualmente con vista previa en vivo y deslizadores para desenfoque, brillo, contraste, escala de grises, rotación de matiz, inversión, opacidad, saturación y sepia.