Herramientas de color

Conversor RGB a HEX

Convierte canales de color RGB a códigos hexadecimales (#hex) listos para usar en diseño web y CSS.

Ejecutar herramienta

Este conversor transforma valores numéricos de los canales rojo, verde y azul en códigos de color hexadecimales para diseño web y maquetación CSS. Cada canal admite valores enteros comprendidos entre 0 y 255. Si introduces un valor fuera de ese intervalo, la herramienta ajusta automáticamente la cifra al límite más cercano, asignando 0 a los números negativos y 255 a los que superan el máximo. Al procesar los datos, la pantalla muestra el código hexadecimal en letras minúsculas precedido por la almohadilla, junto con su versión en mayúsculas y las representaciones de texto RGB separadas por comas o espacios. Si dejas los campos vacíos, el sistema aplica los valores predeterminados: 255 para el canal rojo y 0 para el verde y el azul, generando el tono rojo puro (#ff0000). Si introduces un texto no numérico, la herramienta señala el fallo en el panel.

Instrucciones

  1. Introduce el valor del canal rojo (R) entre 0 y 255.
  2. Introduce el valor del canal verde (G) entre 0 y 255.
  3. Introduce el valor del canal azul (B) entre 0 y 255.
  4. Ejecuta la conversión para generar los códigos de color.
  5. Copia el formato hexadecimal obtenido para pegarlo directamente en tu código CSS o diseño.

Ejemplos

  • Entrada: R = 52, G = 152, B = 219 -> Salida: #3498db (azul suave)
  • Entrada: R = 46, G = 204, B = 113 -> Salida: #2ecc71 (verde esmeralda)

Preguntas frecuentes

¿Qué ocurre si introduzco un número mayor que 255 o menor que 0?

La herramienta ajusta el valor automáticamente al rango permitido: los números negativos se convierten en 0 y los superiores a 255 se limitan a 255.

¿Cuáles son los valores por defecto si no relleno los campos?

Se aplican 255 para el canal rojo y 0 para el verde y el azul, lo que produce el color rojo puro (#ff0000).

¿Qué sucede si introduzco caracteres no numéricos?

Si un valor no puede convertirse en un número entero válido, la herramienta muestra un aviso de error en el panel de resultados.

Insertar esta herramienta

Añade esta herramienta funcional de SmartPlusLab a tu sitio web con el siguiente código.