Conversor de colores

El formato hexadecimal representa un color como seis dígitos en base 16 (0–9, A–F), agrupados en tres pares: rojo, verde y azul. Por ejemplo, #FF0000 es rojo puro. Es el más común en HTML y CSS.

RGB (Red, Green, Blue) describe un color mediante tres valores numéricos entre 0 y 255, uno por cada canal. rgb(255, 0, 0) es rojo puro. En CSS también existe rgba() que agrega un canal de opacidad (alpha).

HSL representa el color en términos de Hue (tono, 0–360°), Saturation (saturación, 0–100%) y Lightness (luminosidad, 0–100%). Es el formato más intuitivo para ajustar colores manualmente porque sus dimensiones corresponden a cómo percibimos el color.

Usa HEX para colores fijos de marca (variables CSS o design tokens). Usa RGB/RGBA cuando necesites opacidad dinámica. Usa HSL cuando construyas paletas o quieras variar tono/saturación/luminosidad programáticamente, por ejemplo en themes o generación de variantes de color.

OKLCH es un espacio de color perceptivamente uniforme introducido en CSS Color Level 4. A diferencia de HSL, los colores con el mismo valor L (luminosidad) se perciben con el mismo brillo real para el ojo humano. Esto hace que crear paletas accesibles y armónicas sea mucho más predecible. Los tres valores son: L (luminosidad, 0–1), C (croma, 0–0.4 aprox.) y H (tono, 0–360°). Chrome, Firefox y Safari ya lo soportan con la función oklch().

El canal alfa define la opacidad de un color, de 0 (totalmente transparente) a 1 (totalmente opaco). En CSS se usa con rgba(255, 0, 0, 0.5) o con la notación hexadecimal de 8 dígitos #FF000080. También puedes separar la opacidad del color con la propiedad opacity. La diferencia clave: rgba() hace transparente solo ese color sin afectar a los elementos hijos; opacity aplica la transparencia a todo el elemento y su contenido.

El contraste de color es la diferencia de luminosidad relativa entre dos colores, generalmente texto y fondo. WCAG 2.1 exige un ratio mínimo de 4,5:1 para texto normal (nivel AA) y 3:1 para texto grande (18pt o 14pt negrita). Un contraste insuficiente dificulta la lectura a personas con baja visión o daltonismo. Puedes medir el ratio directamente en el panel de accesibilidad del inspector de Chrome o con el verificador de contraste de WebAIM.

Diseñadores web y UI/UX lo usan a diario para convertir colores entre HEX, RGB, HSL y HSB al trabajar con código CSS, Figma, Sketch o Adobe XD, donde cada herramienta tiene su formato preferido. Desarrolladores front-end lo necesitan para aplicar colores con precisión en CSS y Tailwind, y para entender qué valores numéricos corresponden a un color visual. Diseñadores gráficos y de branding lo consultan para trasladar paletas de marca entre software (Illustrator, Canva, Photoshop) y asegurarse de que el color sea idéntico en todos los formatos. Diseñadores de impresión lo usan para convertir entre RGB (pantalla) y los valores equivalentes más cercanos antes de exportar a CMYK. Especialistas en accesibilidad lo emplean para obtener los valores precisos de luminosidad y verificar el ratio de contraste según las pautas WCAG 2.1.

En el escritorio, pulsa Ctrl + D (Windows/Linux) o Cmd + D (Mac) en Chrome, Firefox o Edge para añadir esta página a tus marcadores al instante. En Safari para Mac usa Cmd + D o ve a Marcadores → Añadir marcador. En el móvil con Chrome (Android), toca el menú de tres puntos (⋮) y elige «Añadir a pantalla de inicio» o «Añadir a marcadores». En el móvil con Safari (iPhone/iPad), toca el botón de compartir (□↑) y luego «Añadir a pantalla de inicio». Tenerla en favoritos significa que la próxima vez que encuentres un HEX en un diseño y necesites el RGB para CSS, ya la tienes a un clic.