palette Conversor de Color star

Cómo Funciona

Estas tres notaciones describen exactamente el mismo color subyacente — simplemente codifican los niveles de luz roja, verde y azul que una pantalla combina para producirlo. RGB almacena cada canal como un número decimal de 0 a 255. HEX es simplemente RGB escrito en base 16: cada canal se convierte en un par hexadecimal de dos dígitos, así que rgb(255, 128, 0) se convierte en #ff8000 (ff = 255, 80 = 128, 00 = 0). En esta conversión no se gana ni se pierde ninguna información de color — es pura notación.

HSL es diferente: reformula el color a lo largo de tres ejes perceptuales — matiz, saturación y luminosidad — calculados matemáticamente a partir de los canales RGB. El matiz (0–360°) es el ángulo en una rueda de color, calculado a partir de qué canal es mayor y qué tan separados están los canales: para #ff8000, el rojo es máximo (255) y el azul es mínimo (0), y la fórmula 60 × ((verde − azul) / (máx − mín)) da 60 × (128/255) ≈ 30°, ubicándolo en la banda naranja. La luminosidad es el promedio del canal más alto y el más bajo — aquí (255 + 0) / 2 ≈ 50%. La saturación mide qué tan lejos está el color del gris en esa luminosidad — 100% aquí, ya que un canal está al máximo y otro en cero. Juntos se leen como hsl(30, 100%, 50%) — el mismo naranja que #ff8000, descrito de otra manera.

Por esto exactamente los diseñadores prefieren HSL sobre RGB: para hacer un color un 20% más oscuro conservando su matiz, HSL solo necesita bajar el valor de luminosidad — RGB requeriría recalcular los tres canales de forma proporcional. Elige un color con el selector o escribe cualquier código HEX y esta herramienta convierte a ambas notaciones al instante.

Lo Que Debes Saber

El HEX corto de 3 dígitos (#f80) y las formas de 4/8 dígitos con canal alfa (#ff8000cc, rgba(255,128,0,0.8)) son variantes habituales; esta herramienta trabaja con HEX opaco estándar de 6 dígitos y sus equivalentes RGB/HSL. Los nombres de color como orange se corresponden con valores HEX fijos definidos en la especificación CSS, pero no todos los colores con nombre tienen un código HEX fácil de recordar, lo cual es otra razón por la que los desarrolladores convierten de un lado a otro. Dos colores que se ven idénticos en un monitor pueden mostrarse ligeramente diferentes en otro, porque las pantallas de consumo varían en gama de color y calibración — los valores HEX/RGB/HSL son números exactos, pero la luz que producen no está garantizada a ser idéntica en todas las pantallas. Al elegir colores de texto y fondo, ten en cuenta que el valor de luminosidad de HSL no es lo mismo que el contraste perceptual — un amarillo saturado y un azul saturado pueden compartir el mismo valor de L pero verse muy diferentes sobre blanco, así que las comprobaciones de accesibilidad deberían usar un cálculo de ratio de contraste adecuado, no solo el número L.

CSS también acepta RGB basado en porcentajes, como rgb(100%, 50%, 0%), como equivalente exacto de rgb(255, 128, 0) — útil al trabajar con herramientas de diseño que expresan el color como porcentajes en lugar de enteros de 0 a 255. Las funciones de color CSS más nuevas como oklch() y lab() van un paso más allá que HSL: están construidas para ser perceptualmente uniformes, es decir, pasos numéricos iguales en luminosidad se ven igual de diferentes al ojo humano en cualquier matiz, algo que HSL no garantiza del todo. Aun así, para el trabajo cotidiano de web y UI, HEX, RGB y HSL siguen siendo los tres formatos que encontrarás en casi cualquier base de código, guía de estilo y herramienta de diseño.