Convierte HEX, RGB, HSL, HSV, CMYK — vista previa en vivo, sombras, tintes y contraste de accesibilidad
Los códigos de color son el lenguaje universal del diseño digital. Ya sea que estés construyendo un sitio web, creando arte digital, diseñando una aplicación móvil o eligiendo colores de marca, entender los códigos de color es esencial. Cada color en pantalla se define matemáticamente como una combinación de valores que le indican a la pantalla cuánta luz roja, verde y azul emitir — y cada herramienta de diseño profesional habla este lenguaje en múltiples dialectos: HEX, RGB, HSL, HSV, CMYK, y más.
Entendiendo los Códigos de Color y los Espacios de Color
¿Qué Son los Códigos de Color?
Un código de color es una forma estandarizada de representar un color específico como un valor numérico o conjunto de valores. Las pantallas digitales mezclan luz roja, verde y azul a diferentes intensidades para crear cualquier color visible — esto se llama mezcla de color aditiva. Los códigos HEX representan estos valores RGB en notación base-16 (hexadecimal): #FF0000 significa rojo máximo (FF), sin verde (00), sin azul (00). La notación RGB expresa los mismos valores como enteros decimales de 0 a 255. HSL y HSV separan el tono (el tipo de color) de la saturación (riqueza del color) y la luminosidad o valor (brillo), que son más intuitivos para que los humanos razonen. CMYK, utilizado en impresión, trabaja con mezcla de color sustractiva usando tintas cian, magenta, amarilla y negra. Cada formato es matemáticamente equivalente — todos describen el mismo conjunto de colores, solo en diferentes notaciones optimizadas para diferentes casos de uso.
¿Cómo se Calculan las Conversiones de Color?
Convertir entre formatos de color implica fórmulas matemáticas precisas. HEX a RGB es sencillo: cada par de dígitos hexadecimales (00-FF) se convierte en un entero decimal (0-255) usando aritmética base-16. RGB a HSL requiere normalizar los valores RGB a 0-1, encontrar los valores máximos y mínimos de los canales, calcular el delta y derivar el tono de qué canal es dominante, la saturación del delta relativo a la luminosidad y la luminosidad como el promedio de máximo y mínimo. RGB a CMYK primero identifica el componente clave (negro) como 1 menos la proporción máxima de RGB, luego deriva C, M, Y de la tinta restante necesaria. CMYK a RGB invierte esto: cada canal se calcula como 255 veces (1 menos la fracción de tinta) veces (1 menos la fracción de negro). Todas las conversiones preservan la precisión matemática a través de todo el espectro de colores mostrables.
¿Por Qué Importan los Códigos de Color para el Diseño?
El uso consistente de códigos de color es fundamental para el trabajo de diseño profesional. Sin códigos de color precisos, los colores pueden cambiar entre herramientas de diseño, navegadores y entornos de impresión, rompiendo la consistencia de la marca. Los diseñadores web utilizan códigos HEX y RGB para asegurar un emparejamiento de color perfecto entre navegadores y dispositivos. Los diseñadores impresos dependen de los valores CMYK para comunicar proporciones exactas de tinta a las imprentas, ya que las pantallas y las impresoras utilizan métodos de mezcla de color completamente diferentes. Las pautas de accesibilidad (WCAG) requieren proporciones mínimas de contraste entre los colores del texto y del fondo para asegurar la legibilidad para personas con baja visión o daltonismo — verificar las proporciones de contraste es un requisito legal para muchas organizaciones. Los sistemas de diseño utilizan tokens de color definidos con precisión (generalmente valores HEX o HSL) para mantener la consistencia entre productos, y HSL a menudo es preferido porque permite ajustes programáticos como hacer un color un 10% más claro sin cambiar su tono.
Limitaciones y Consideraciones del Espacio de Color
Si bien HEX, RGB, HSL y CMYK cubren la gran mayoría de las necesidades prácticas de diseño, hay limitaciones importantes que entender. El modelo de color RGB es dependiente del dispositivo — los mismos valores RGB pueden verse diferentes en diferentes pantallas debido a variaciones en la calibración del monitor, perfiles de color (sRGB vs Display P3) y luz ambiental. Los valores CMYK mostrados en esta herramienta son aproximaciones para la conversión estándar de sRGB a CMYK; el trabajo de impresión profesional a menudo requiere gestión de perfiles de color con herramientas como Adobe Illustrator o InDesign para un emparejamiento preciso de Pantone. Los 140 colores nombrados en CSS están definidos por la especificación de Color CSS y son exactos — sin embargo, la función de 'color nombrado más cercano' utiliza la distancia euclidiana en el espacio RGB, que es una aproximación perceptual. Los espacios de color modernos como OKLCH y OKLAB (no incluidos aquí) ofrecen gradientes más uniformes perceptualmente pero requieren soporte de navegador para CSS Color Level 4.
Cómo Usar la Tabla de Códigos de Color
Ingresa Tu Color
Escribe un código HEX directamente (por ejemplo, #FF5733) en el campo HEX, ingresa valores RGB decimales (0–255 cada uno), introduce valores HSL o CMYK, o haz clic en la muestra de color para abrir el selector de color visual. También puedes hacer clic en 'Color Aleatorio' para inspiración instantánea. Todos los métodos de entrada actualizan el resultado en vivo a medida que escribes.
Ver Todos los Formatos Convertidos
El panel de resultados muestra tu color en formatos HEX, RGB, HSL, HSV, CMYK y entero simultáneamente. Cada formato tiene un botón de copiar para que puedas obtener exactamente lo que necesitas. Usa el botón 'Copiar Todo' para copiar cada formato a la vez, o exporta a CSV para documentación.
Generar Sombras, Tintes y Verificar Accesibilidad
Desplázate hacia abajo en los resultados para ver una franja de 9 sombras (variantes más oscuras) y 9 tintes (variantes más claras) — haz clic en cualquier muestra para cargar esa variante en el conversor. La sección de contraste WCAG muestra las relaciones de contraste contra blanco y negro, con indicadores de aprobación AA/AAA para verificar que tu color cumple con los estándares de accesibilidad.
Navegar por la Referencia de Colores Nombrados
Cambia a la pestaña 'Tabla de Colores Nombrados' para explorar los 140 colores nombrados en CSS organizados por familia (rojos, verdes, azules, morados, etc.). Cada fila muestra la muestra de color, nombre CSS, código HEX y valores RGB. Haz clic en 'Usar Color' en cualquier fila para cargarlo instantáneamente en el conversor.
Preguntas Frecuentes
¿Cuál es la diferencia entre los códigos de color HEX y RGB?
HEX y RGB describen exactamente el mismo color utilizando diferentes sistemas de notación. RGB separa los canales rojo, verde y azul en tres enteros decimales de 0 a 255. Por ejemplo, rgb(59, 130, 246) es un azul medio. HEX representa estos mismos tres valores en hexadecimal (base-16): 59 se convierte en 3B, 130 se convierte en 82, y 246 se convierte en F6, dando #3B82F6. HEX es más compacto y es el formato estándar para HTML y CSS. RGB es más fácil de leer matemáticamente y se utiliza en CSS así como en software de diseño gráfico. Ambos son equivalentes: cualquier color expresable en un formato puede ser expresado en el otro.
¿Por qué es mejor HSL para ajustes de diseño que HEX o RGB?
HSL (Tono, Saturación, Luminosidad) separa la identidad del color puro (tono, 0–360 grados) de cuán vívido es (saturación) y cuán claro u oscuro es (luminosidad). Esto lo hace mucho más intuitivo para el trabajo de diseño. Por ejemplo, para hacer un color un 20% más claro, simplemente aumentas el valor L en 20 — en HEX o RGB, la misma operación requeriría calcular los tres canales por separado. HSL también es cómo los humanos describen naturalmente los colores: 'un azul brillante y de medio claro' se traduce directamente a alta saturación y luminosidad media en un tono azul. CSS admite nativamente la notación hsl(), y herramientas de diseño como Figma utilizan modelos similares a HSL internamente. Muchos sistemas de diseño definen tokens de color en HSL por esta razón.
¿Qué es CMYK y cuándo debo usarlo?
CMYK significa Cian, Magenta, Amarillo y Clave (Negro) — los cuatro colores de tinta utilizados en la impresión a color. A diferencia de RGB, que suma luz (mezcla aditiva), CMYK resta luz al superponer tintas que absorben ciertas longitudes de onda (mezcla sustractiva). Por eso, un color que se ve vívido en pantalla puede parecer más apagado al imprimirse — el gamut RGB (rango de colores que se pueden mostrar) es más amplio que lo que la impresión CMYK puede reproducir. Usa valores CMYK al preparar archivos para impresión profesional, incluyendo tarjetas de presentación, folletos, carteles y empaques. La mayoría de las imprentas profesionales y software de diseño (Adobe Illustrator, InDesign) trabajan en CMYK para proyectos de impresión. Para diseño web y de pantalla, mantente en HEX o RGB.
¿Qué es la relación de contraste WCAG y por qué es importante?
La relación de contraste WCAG (Directrices de Accesibilidad del Contenido Web) mide cuán diferentes aparecen un color de primer plano y un color de fondo para alguien con baja visión o daltonismo. Se calcula utilizando la luminancia relativa — una medida de la luminosidad percibida. Una relación de 1:1 significa sin contraste (mismo color), mientras que 21:1 es el máximo contraste (negro sobre blanco). El estándar WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande. WCAG AAA requiere 7:1. Cumplir con estos estándares asegura que tu sitio web sea legible para usuarios con discapacidades visuales y a menudo es requerido para el cumplimiento legal con la ADA (Ley de Estadounidenses con Discapacidades) y los estándares WCAG 2.1/2.2. Esta herramienta calcula automáticamente las relaciones de contraste contra blanco y negro para cualquier color que ingreses.
¿Cómo se generan las sombras y los tintes?
Una sombra se crea mezclando un color con negro — matemáticamente, multiplicando cada canal RGB por un factor menor que 1. Por ejemplo, una sombra del 50% de rojo (255, 0, 0) sería (128, 0, 0). Un tinte se crea mezclando con blanco — fusionando el valor del canal original hacia 255. Un tinte del 50% de rojo sería (255, 128, 128). Esta herramienta genera 9 sombras espaciadas uniformemente (desde casi negro hasta el original) y 9 tintes espaciados uniformemente (desde el original hasta casi blanco), dándote un total de 19 variantes. Estas franjas son muy útiles para construir paletas de sistemas de diseño — por ejemplo, Tailwind CSS utiliza una escala de 10 sombras similar desde 50 (más claro) hasta 950 (más oscuro) para cada una de sus 22 familias de colores.
¿Cuáles son los 140 colores nombrados en CSS?
Los 140 colores nombrados en CSS son un conjunto de palabras clave de color definidas en la especificación de Color CSS (CSS Colors Level 4). Incluyen colores web clásicos como 'rojo', 'azul' y 'verde', así como nombres descriptivos como 'azulacielo', 'rubor de lavanda' y 'crema de papaya'. Cada nombre se asigna a un valor HEX/RGB específico que es consistente en todos los navegadores y sistemas operativos. Se originaron en el sistema de color X11 utilizado en entornos Unix y fueron estandarizados posteriormente para CSS. Aunque son convenientes para colores comunes, los colores nombrados cubren solo una pequeña fracción de los 16.7 millones de colores representables en RGB de 24 bits. Para trabajos de diseño precisos, siempre usa valores HEX o RGB en lugar de depender de colores nombrados, ya que los nombres pueden ser engañosos (por ejemplo, 'gris' y 'grey' son ligeramente diferentes).