Las herramientas de color de ToolDeck te permiten convertir entre formatos de color, verificar ratios de contraste de accesibilidad, generar paletas, construir gradientes CSS y buscar nombres de color o clases de Tailwind directamente en tu navegador. El Convertidor de Colores maneja HEX, RGB, HSL y HSV en ambas direcciones. El Verificador de Contraste prueba el cumplimiento WCAG 2.1 AA y AAA. El Generador de Paletas de Color crea esquemas complementarios, análogos, triádicos y tetrádicos a partir de cualquier color base. El Generador de Gradiente CSS produce código de gradiente lineal y radial listo para copiar. El Buscador de Nombres de Color asocia cualquier valor al color CSS con nombre más cercano, y el Buscador de Colores Tailwind mapea colores arbitrarios a clases de utilidad de Tailwind. Todas las herramientas se ejecutan en el lado del cliente sin enviar datos a ningún servidor.
¿Qué Son las Herramientas de Color?
Las herramientas de color son utilidades que ayudan a desarrolladores y diseñadores a trabajar con valores de color digitales. Cada color en pantalla se almacena como números: tres canales para RGB (rojo, verde, azul), un triplete hexadecimal para la notación abreviada de CSS, o matiz angular más saturación y luminosidad para HSL. Pasar entre estas representaciones a mano es lento y propenso a errores, especialmente cuando también hay que tener en cuenta la transparencia alpha o modelos más recientes como OKLCH.
Más allá de la conversión de formatos, el trabajo con color implica pruebas de accesibilidad, creación de paletas y diseño de gradientes. WCAG 2.1 define ratios de contraste mínimos (4.5:1 para texto normal en AA, 7:1 para AAA) que son difíciles de verificar a simple vista. Generar esquemas de color armoniosos requiere cálculos angulares precisos sobre la rueda de color HSL. Los gradientes CSS necesitan sintaxis correcta para dirección, paradas de color y valores de reserva. Hacer cualquiera de estas cosas manualmente en un sistema de diseño con decenas de tokens se vuelve tedioso rápidamente.
Las herramientas de color automatizan estas tareas. Aceptan un color en un formato, calculan la matemática y devuelven el resultado que necesitas, ya sea un valor convertido, un veredicto de accesibilidad aprobado/rechazado, un conjunto de muestras armoniosas o un fragmento de código CSS. Cuando la herramienta se ejecuta en el navegador, también evitas subir tokens de diseño sensibles a servicios de terceros.
¿Por Qué Usar Herramientas de Color en ToolDeck?
Las herramientas de color de ToolDeck se ejecutan íntegramente en tu navegador. Ningún valor de color sale de tu máquina, no se requiere cuenta y cada herramienta carga al instante sin instalar extensiones ni software de escritorio.
🎨Convierte formatos en un solo paso
Pega un código HEX y obtén valores RGB, HSL y HSV simultáneamente. Sin necesidad de encadenar múltiples conversores ni recordar fórmulas de conversión.
🔒Mantén tus design tokens privados
Todo el procesamiento ocurre en el lado del cliente. Los colores de tu marca, las decisiones de paleta no publicadas y los valores internos de tu sistema de diseño permanecen en tu dispositivo.
♿Verifica la accesibilidad al instante
Comprueba cualquier par primer plano/fondo contra los umbrales WCAG 2.1 AA y AAA para texto normal y grande. Obtén el ratio de contraste exacto, no solo una etiqueta de aprobado/rechazado.
⚡Copia resultados listos para producción
Cada herramienta produce valores que puedes pegar directamente en CSS, en la configuración de Tailwind o en los campos de entrada de herramientas de diseño. Sin necesidad de reformatear.
Casos de Uso de las Herramientas de Color
Aquí hay seis escenarios comunes donde las herramientas de color de ToolDeck ahorran tiempo.
Mantenimiento de Sistemas de Diseño
Al actualizar un sistema de diseño, a menudo recibes colores en HEX de un diseñador pero necesitas HSL para las propiedades personalizadas de CSS. El
Convertidor de Colores traduce entre formatos para que puedas rellenar los archivos de tokens sin hacer cálculos manuales.
Auditorías de Accesibilidad
Durante una auditoría de cumplimiento WCAG, cada combinación texto/fondo debe cumplir los ratios de contraste mínimos. El
Verificador de Contraste de Color muestra el ratio exacto y el estado de aprobación AA/AAA para tamaños de texto normal y grande.
Exploración de Paletas de Marca
Partiendo de un único color de marca, necesitas variantes de acento y neutras. El
Generador de Paletas de Color calcula armonías complementarias, análogas, triádicas y tetrádicas para que puedas evaluar opciones antes de comprometerte con una paleta.
Estilos de Fondo con CSS
Construir una sección hero o el fondo de una tarjeta con un gradiente requiere sintaxis CSS correcta para ángulos, paradas de color y prefijos de proveedor. El
Generador de Gradiente CSS te permite construir el gradiente visualmente y copiar el código.
Migración a Tailwind
Al migrar un proyecto a Tailwind CSS, necesitas mapear los valores HEX o RGB existentes a la clase de utilidad de Tailwind más cercana. El
Buscador de Colores Tailwind encuentra la coincidencia más cercana y muestra la diferencia para que puedas decidir si la aproximación es aceptable.
Revisión de Código y Documentación
Durante una revisión de código, un valor HEX sin procesar como #708090 no significa nada a simple vista. El
Buscador de Nombres de Color lo identifica como SlateGray, haciendo las revisiones y la documentación más legibles.
Referencia de Modelos de Color CSS
CSS admite múltiples modelos de color. La tabla a continuación resume los seis formatos más comunes, su sintaxis y casos de uso típicos. Todos están soportados por el Convertidor de Colores de ToolDeck.
| Modelo | Sintaxis CSS | Canales | Rango de Valores | Uso Típico |
|---|
| HEX | #rrggbb | Rojo, Verde, Azul | 00–ff por canal | El más común en CSS, entregas de diseño, guías de marca |
| RGB | rgb(r, g, b) | Rojo, Verde, Azul | 0–255 por canal | API canvas de JavaScript, estilos calculados, procesamiento de imágenes |
| HSL | hsl(h, s%, l%) | Matiz, Saturación, Luminosidad | 0–360 / 0–100% / 0–100% | Design tokens, generación de temas, variantes de tono programáticas |
| HSV | N/A (no en CSS) | Matiz, Saturación, Valor | 0–360 / 0–100% / 0–100% | Selectores de color (Photoshop, Figma), calibración de color de hardware |
| OKLCH | oklch(L C H) | Luminosidad, Croma, Matiz | 0–1 / 0–0.4 / 0–360 | Paletas perceptualmente uniformes (especificación CSS Color Level 4) |
| Named | ej. slategray | Mapeado a RGB internamente | 148 nombres predefinidos | Prototipado, código legible, demostraciones rápidas |
CSS Color Level 4 (W3C) también define las funciones lab(), lch() y color(). HEX y RGB siguen siendo los más ampliamente soportados en navegadores y herramientas de diseño.
Cómo Elegir la Herramienta de Color Adecuada
Cada herramienta de color resuelve un problema diferente. Usa la guía a continuación para encontrar la adecuada para tu tarea.
- 1
Si necesitas convertir un color entre los formatos HEX, RGB, HSL o HSV → Convertidor de Colores - 2
Si necesitas verificar que un par de colores texto/fondo cumple los estándares de accesibilidad WCAG → Verificador de Contraste de Color - 3
Si necesitas generar un conjunto de colores armoniosos a partir de un único color base → Generador de Paletas de Color - 4
Si necesitas construir un gradiente CSS lineal o radial y obtener el código → Generador de Gradiente CSS - 5
Si necesitas encontrar el nombre CSS legible más cercano a un valor de color dado → Buscador de Nombres de Color - 6
Si necesitas mapear un color arbitrario a la clase de utilidad de Tailwind CSS más cercana → Buscador de Colores Tailwind
Las seis herramientas aceptan entrada en múltiples formatos. Si no estás seguro del formato en que está tu color, comienza con el Convertidor de Colores, que detecta automáticamente la notación HEX, RGB, HSL y HSV.
Preguntas Frecuentes
¿Cuál es la diferencia entre los formatos de color HEX y RGB?
HEX y RGB representan el mismo espacio de color. Un código HEX como #ff6600 es una codificación hexadecimal de los tres canales RGB: ff = 255 (rojo), 66 = 102 (verde), 00 = 0 (azul). La única diferencia es la notación. HEX es más compacto en hojas de estilo CSS, mientras que RGB es más fácil de manipular programáticamente porque cada canal ya es un entero decimal.
¿Cuándo debería usar HSL en lugar de HEX o RGB?
HSL separa el matiz (el color en sí) de la saturación y la luminosidad. Esto facilita la creación de variantes de tono: mantén el matiz fijo, reduce la luminosidad para un tono más oscuro, auméntala para uno más claro. Los sistemas de diseño que generan temas claro/oscuro a partir de un único color base suelen almacenar tokens en HSL por esta razón. Las propiedades personalizadas de CSS también se combinan bien con HSL porque puedes sobreescribir canales individuales.
¿Qué ratio de contraste exige WCAG 2.1 para el texto?
WCAG 2.1 Nivel AA exige un ratio de contraste mínimo de 4.5:1 para texto normal (inferior a 18pt o 14pt en negrita) y 3:1 para texto grande (18pt+ o 14pt+ en negrita). El Nivel AAA eleva esos umbrales a 7:1 y 4.5:1 respectivamente. Estos ratios se calculan a partir de la luminancia relativa de los colores de primer plano y fondo usando la fórmula definida en el Criterio de Éxito 1.4.3 de WCAG 2.1.
¿Cuántos colores con nombre admite CSS?
CSS define 148 colores con nombre, heredados de las especificaciones de color SVG 1.1 y CSS3. Van desde nombres comunes como red, blue y white hasta nombres específicos como MediumSlateBlue, PapayaWhip y LavenderBlush. Los colores con nombre se mapean a valores RGB fijos. La especificación CSS Color Level 4 mantiene los mismos 148 nombres y no añade nuevos. Los navegadores también reconocen la palabra clave transparent (equivalente a rgba(0,0,0,0)).
¿Puedo usar colores OKLCH en CSS hoy?
Sí. La función oklch() está soportada en Chrome 111+, Firefox 113+ y Safari 15.4+. OKLCH forma parte de la especificación CSS Color Level 4 publicada por W3C. Su principal ventaja sobre HSL es la uniformidad perceptual: dos colores con el mismo valor de luminosidad en OKLCH parecen igualmente brillantes al ojo humano, lo cual no es cierto para HSL. Esto hace que OKLCH sea una mejor opción para generar paletas accesibles con brillo percibido consistente.
¿Cuál es la diferencia entre HSL y HSV?
HSL y HSV usan ambos una representación cilíndrica con el matiz como ángulo, pero definen el brillo de manera diferente. En HSL, la luminosidad al 50% es el color puro; 0% es negro, 100% es blanco. En HSV, el valor al 100% es el color puro; 0% es negro. HSV no tiene forma nativa de alcanzar el blanco sin reducir también la saturación. Los diseñadores y selectores de color (Photoshop, Figma) suelen usar HSV, mientras que CSS usa HSL de forma nativa.
¿Cómo encuentro la clase de Tailwind para un color HEX arbitrario?
Tailwind CSS incluye una paleta fija de unas 220 clases de color (22 matices por 10 tonos cada uno, más negro, blanco y transparente). Para encontrar la clase más cercana a un valor HEX dado, se calcula la distancia euclidiana en un espacio de color perceptual (como CIELAB u OKLCH) entre tu color y cada muestra de Tailwind. El Buscador de Colores Tailwind en ToolDeck hace esto automáticamente y muestra la coincidencia más cercana junto con la diferencia de color para que puedas juzgar si la aproximación es suficientemente buena.
¿Es seguro pegar colores de marca confidenciales en una herramienta online?
Depende de la herramienta. Cualquier herramienta que envíe tu entrada a un servidor expone esos valores en el tráfico de red y los registros del servidor. Las herramientas de color de ToolDeck se ejecutan íntegramente en tu navegador usando JavaScript en el lado del cliente. Ninguna petición HTTP lleva tus datos de color a ningún backend. Puedes verificarlo abriendo la pestaña Red de tu navegador mientras usas la herramienta. Para máxima precaución, también puedes usar las herramientas sin conexión después de la carga inicial de la página.