Ingresa un Color
Selector de Color Visual
Ingresa un código HEX de 6 dígitos con o sin el prefijo #
Ingresa un Color para Convertir
Escribe un código HEX, ingresa valores RGB o HSL, usa el selector de color, o haz clic en 'Color Aleatorio' para comenzar. Todos los formatos se actualizan en vivo.
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).