Convertir colores

Obtén los valores HEX, RGB y HSL de un color.

Tus archivos se procesan aquí, en tu dispositivo

No enviamos el contenido de tus archivos o textos a un servidor de procesamiento. No necesitas una cuenta y no hay un cupo diario de operaciones. Cada herramienta tiene límites de tamaño para cuidar la memoria de tu dispositivo.

Necesitas conexión para cargar el sitio y sus recursos. El alojamiento puede recibir datos técnicos de las visitas. Los favoritos guardan solo identificadores de herramientas en este navegador.

Cómo tratamos tus datos →

Cómo usar esta herramienta

  1. Selecciona HEX, RGB o HSL como formato de entrada.
  2. Introduce un color opaco con los valores que corresponden a ese formato.
  3. Compara vista previa y valores redondeados antes de usarlos en un diseño.

Un ejemplo que puedes comprobar

Traduce un color opaco entre las representaciones usadas en CSS y diseño.

Datos de ejemplo

#ff0000

OpcionesFormato de entrada: HEX.

Resultado esperado

HEX #FF0000; RGB rgb(255, 0, 0); HSL hsl(0, 100%, 50%).

No se procesa canal alfa. Los canales RGB y los valores HSL se redondean según la conversión indicada.

Convertir colores: usos y recomendaciones

Convertir colores entre HEX, RGB y HSL permite expresar una misma elección con la notación que utiliza un editor o una hoja de estilo. HEX codifica canales mediante dígitos hexadecimales; RGB describe rojo, verde y azul; HSL expresa tono, saturación y luminosidad. La herramienta transforma estas representaciones dentro de sus formatos admitidos. No modifica una imagen completa ni analiza el color de una fotografía cargada.

Comprueba el formato seleccionado antes de pegar el valor. Un HEX abreviado tiene tres dígitos y uno completo seis. RGB utiliza canales entre cero y doscientos cincuenta y cinco. En HSL, saturación y luminosidad se expresan como porcentajes dentro de su rango. Los canales alfa o notaciones de otros espacios de color no deben asumirse compatibles cuando el formulario solo indica estos formatos.

La salida HSL se redondea y una conversión de ida y vuelta puede no reproducir exactamente todos los componentes iniciales. Conserva el valor de referencia cuando una identidad visual exige una especificación concreta. El aspecto mostrado también depende de la pantalla y del contexto; una conversión de notación no garantiza equivalencia de impresión ni preserva perfiles profesionales de color. Para un recurso que debe imprimirse, utiliza el flujo de gestión de color adecuado a ese trabajo.

Revisa el código y su vista previa sobre el fondo de uso. Dos colores pueden parecer adecuados por separado y tener un contraste insuficiente al combinarse. Esta herramienta no evalúa accesibilidad ni verifica relaciones de contraste. Para generar variantes claras y oscuras desde una base, utiliza Paleta de colores. Guarda los valores junto a su función, como fondo, texto o acento, para evitar intercambiar códigos válidos que cumplen papeles diferentes en el diseño.

Una comprobación práctica antes de utilizar el resultado

Para una hoja de estilo, copia una muestra en cada notación admitida y comprueba que representan el color previsto en el navegador de destino. Conserva el código de referencia original cuando la salida HSL se redondea. Si el diseño utiliza transparencia, revisa ese requisito aparte: estos canales no incluyen automáticamente un valor alfa. Prueba además el color junto a la tipografía y fondo reales para evaluar su función, sin deducir contraste desde el número HEX. Guarda valores y usos en una referencia compartida cuando varias páginas deban seguir la misma identidad. Una notación válida facilita introducir el color, pero su aplicación sigue necesitando decisiones visuales y comprobaciones en contexto.

Continúa tu tarea

Descarga el resultado o copia el texto antes de abrir otra herramienta. Después puedes cargarlo o pegarlo en el siguiente paso; no se transfiere automáticamente.

Preparar una paleta de color

Crea tonos a partir de un HEX y obtén sus valores RGB y HSL.

  1. Crear los tonos
  2. Convertir un colorAquí
Opciones y límites

Elige el formato e introduce un color opaco. Por ejemplo: #3659D9, rgb(54, 89, 217) o hsl(227, 68%, 53%). La conversión redondea los canales RGB a enteros y HSL a grados y porcentajes.

Guías