Herramientas abiertas · 0

Acerca de

HEX a RGB

Pega un código de color hex, con o sin su #, y su valor RGB queda listo para copiar, junto con HSL, OKLCH y el resto. Un código de tres dígitos se lee como su forma de seis, y ocho dígitos llevan un alfa, que sale como rgba(). Un rgb() pegado al revés da su hex igual de bien.

Qué hace

  • Cada par de dígitos hex es un canal de 0 a 255: #ff8800 es rgb(255, 136, 0).
  • Los códigos cortos duplican cada dígito, así que #f80 es #ff8800, y #f808 el mismo naranja con cerca de la mitad de opacidad.
  • Un alfa sale como rgba(255, 136, 0, 0.502), con tres decimales, y la línea HEX conserva los ocho dígitos.
  • Seis u ocho dígitos no necesitan #, ni tres o cuatro con una letra; el 123 a secas sí, porque podría ser un número.
  • 0xFF8800 también se lee como hex, y 0xCCFF8800 con el alfa primero, como escriben los colores Android y Flutter.
  • Un punto y coma al final, sobrante de una hoja de estilos, se ignora.
  • HEX en mayúsculas o minúsculas, como prefieras, y se recuerda para la próxima vez.

Cómo se usa

  1. Pega el código hex en el campo de color.
  2. Copia la línea RGB, o el formato que pida tu código.
  3. Mueve el control deslizante Opacidad para obtener el rgba() del mismo color.

Qué no hace

  • La forma con espacios rgb(255 136 0) en la salida: las comas las lee cualquier navegador y herramienta, y en la entrada se leen las dos formas.
  • Códigos hex de cinco, siete o más de ocho dígitos: CSS no define ninguno, así que se rechazan en lugar de adivinarse.

Preguntas

¿Cómo convierto hex a RGB a mano?

Divide el código en tres pares y lee cada uno como un número en base 16: el primer dígito por 16, más el segundo. Para #1E90FF son 1×16+14 = 30, 9×16+0 = 144 y 15×16+15 = 255, así que rgb(30, 144, 255).

¿RGB es más preciso que hex?

No. Los dos dan rojo, verde y azul de 0 a 255, hex en base 16 y rgb() en base 10, así que los tres canales se convierten con exactitud en ambos sentidos. Un alfa se escribe con tres decimales en rgba(), y aun así se lee de vuelta como los mismos dos dígitos hex.

¿Qué significa un código hex de ocho dígitos?

Los dos últimos dígitos son el alfa, la opacidad, de 00 para transparente a FF para opaco: #1E90FF80 es ese azul con cerca de la mitad de opacidad. Android escribe el alfa primero, y por eso un código pegado con 0x se lee así.

¿Cómo obtengo el código hex de un color rgb()?

Pega el rgb() en el mismo campo y copia la línea HEX. También sirve un 255, 136, 0 a secas, y rgb(255 136 0) con espacios.

Todo lo de aquí funciona en tu navegador. Nada de lo que escribes, pegas o abres se sube, y no hay cuenta ni cola. Cómo funciona.

Se usa a menudo con

  • Creador de paletas: el color convertido en una escala de tintes y sombras al estilo de Tailwind

Todas las herramientasAcerca de utilbrewPrivacidad