Generador y Conversor de Código de Color

Elige un color o introduce un código HEX — obtén al instante HEX, RGB, HSL, nombre CSS y color complementario.

Resultado instantáneo Funciona en el navegador
Código HEX
#3D7EF7
Valor RGB
rgb(61, 126, 247)
Valor HSL
hsl(218, 91%, 60%)
Nombre CSS
—
Color complementario
#F7823D

Modelos de color

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: estándar web. RGB: basado en pantalla. HSL: tono-saturación-luminosidad, intuitivo para diseñadores.

¿Cómo usar?

  1. 1
    Elegir el colorHacer clic en el selector de color o introducir directamente un código HEX (ej. #FF5733).
  2. 2
    Ver los valoresHEX, RGB y HSL se calculan al instante; el nombre CSS y el color complementario se muestran automáticamente.
  3. 3
    CopiarCopiar el código de color deseado al portapapeles con un clic.

Preguntas frecuentes

¿Qué es un código de color HEX?
Un valor hexadecimal de 6 dígitos en formato #RRGGBB. Cada par representa la intensidad de un canal (Rojo, Verde, Azul) de 00 a FF (0–255), permitiendo 16.777.216 colores.
¿RGB o HSL — cuál usar?
RGB corresponde al hardware de pantalla y es ampliamente usado en CSS. HSL es más intuitivo para diseñadores: cambiar brillo sin perder el tono. Ambos están totalmente soportados en CSS moderno.
¿Para qué sirve el color complementario?
El color complementario está a 180° en la rueda de colores y crea el máximo contraste — ideal para botones de llamada a la acción y visualización de datos.

Códigos de color en la web: HEX, RGB y HSL

En el desarrollo web, los colores se definen principalmente mediante tres formatos: HEX, RGB y HSL. Esta herramienta convierte al instante cualquier color a los tres formatos y muestra también el nombre CSS y el color complementario.

Códigos de color HEX

HEX es el formato de color más común en la web. Se escribe como #RRGGBB, donde cada par indica la intensidad de un canal (Rojo, Verde, Azul) de 00 a FF (0–255). Con 256 valores por canal, HEX soporta 16.777.216 colores. La notación abreviada #RGB también es válida: #F06 → #FF0066. HEX se usa en CSS (color: #FF5733;), Figma y todas las herramientas de diseño.

Modelo de color RGB

RGB refleja la estructura física de las pantallas. Cada canal toma valores de 0 a 255. En CSS: rgb(255, 87, 51) o con transparencia rgba(255, 87, 51, 0.8).

Modelo de color HSL

HSL (Tono-Saturación-Luminosidad) es más intuitivo para diseñadores. Tono (Hue): 0–360° en la rueda cromática. Saturación: 0%=gris, 100%=color vivo. Luminosidad: 0%=negro, 50%=normal, 100%=blanco. Crear tonos claros u oscuros es simple: mantener tono y saturación, ajustar luminosidad.

Colores complementarios

Los colores complementarios están a 180° el uno del otro en la rueda de colores: Rojo ↔ Cian, Verde ↔ Magenta, Azul ↔ Amarillo. Crean el máximo contraste y se usan en botones CTA y visualizaciones de datos.

Accesibilidad web (WCAG)

Aprox. el 8% de los hombres tienen daltonismo. WCAG 2.1 AA exige una relación de contraste de al menos 4,5:1 para texto normal. Nunca transmitas información solo mediante color.

Colores CSS con nombre

CSS define 148 colores con nombre (red, navy, coral, teal, etc.). Esta herramienta los reconoce automáticamente y muestra el nombre.

Privacidad

Todos los cálculos se realizan localmente en tu navegador. No se envían datos a ningún servidor.

Comentarios