Selector y convertidor de colores

Formatos de código de color que acepta

#36c  #3366cc            hex de 3 y 6 dígitos (también 4 y 8 dígitos con alfa)
3366CC                   sin almohadilla y en mayúsculas
rgb(51, 102, 204)        sintaxis clásica con comas
rgb(51 102 204 / 50%)    sintaxis moderna de CSS; el alfa se ignora
hsl(220, 60%, 50%)       tono, saturación, luminosidad
hsl(220deg 60% 50%)      sintaxis moderna con unidades

Todos describen el mismo azul, y el resultado siempre es #3366cc, rgb(51, 102, 204) y hsl(220, 60%, 50%). La transparencia (alfa) se acepta en la entrada pero no aparece en el resultado, porque HEX, RGB y HSL describen el color en sí. Si la necesitas, vuelve a añadirla en tu código: #3366cc80 o rgb(51 102 204 / 0.5).

El conversor no reconoce nombres de color como red ni formatos como oklch(), y en HSL solo admite números enteros. Con una entrada que no entiende, muestra el aviso Use HEX, rgb(r,g,b), or hsl(h,s%,l%). en lugar de un resultado. Los valores RGB por encima de 255 se ajustan a 255.

Cómo funciona un código de color hexadecimal

Un código hexadecimal es un color RGB escrito en base 16. #3366cc son tres pares de dígitos: 33 es el rojo (51), 66 el verde (102) y cc el azul (204), cada uno de 00 (0) a ff (255). La forma corta de tres dígitos duplica cada uno, así que #36c equivale a #3366cc. Mayúsculas y minúsculas significan lo mismo.

#ffffff  blanco        #000000  negro         #808080  gris medio
#ff0000  rojo          #00ff00  verde         #0000ff  azul
#ffff00  amarillo      #00ffff  cian          #ff00ff  magenta

Un código de ocho dígitos añade la transparencia: #3366cc80 es el mismo azul con un 50 % de opacidad aproximadamente, porque 80 en hexadecimal es 128 de 255. Estos códigos hex de colores son los mismos que se usan en HTML, en CSS y en programas como Figma o Photoshop.

RGB y HSL: cuándo usar cada uno

RGB y hexadecimal son el mismo color con distinta notación, y ambos son lo que exportan las herramientas de diseño. HSL describe el color como un ángulo de tono (0–360°), una saturación y una luminosidad, lo que hace muy intuitivos los ajustes. Bajar la luminosidad da simplemente un azul más oscuro:

hsl(220 60% 50%)   #3366cc   color base
hsl(220 60% 40%)   #2952a3   hover: más oscuro
hsl(220 60% 90%)   #d6e0f5   fondo suave

Por eso HSL es cómodo para sacar estados hover, fondos y sombras a partir de un solo color de marca. Su punto débil es que la misma luminosidad no se percibe igual de clara en todos los tonos: un amarillo y un azul al 50 % no tienen el mismo contraste sobre blanco.

Elegir un color con el selector

La muestra grande es el selector de color nativo de tu sistema operativo. En la mayoría de navegadores de escritorio incluye un cuentagotas para capturar un color de cualquier parte de la pantalla, y en el móvil abre el selector del sistema. El color elegido aparece a la vez en HEX, RGB y HSL, listo para copiar. Funciona también al revés: al escribir un código, la muestra cambia a ese color.

Usar códigos de colores en CSS

:root {
  --marca: #3366cc;
  --marca-hover: hsl(220 60% 40%);
  --marca-fondo: rgb(51 102 204 / 0.12);
}
.boton { background: var(--marca); }
.boton:hover { background: var(--marca-hover); }

Guarda cada color de marca una sola vez en una propiedad personalizada y deriva de ella las variantes, en lugar de repartir códigos hex ligeramente distintos por todas las hojas de estilo.

Comprobar el contraste

Un color que se ve bien por sí solo puede ser ilegible como texto sobre un fondo concreto. WCAG 2.2 lo mide como la relación de contraste entre la luminancia relativa de los dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). El texto normal necesita al menos 4,5:1 y el texto grande, 3:1; el nivel AAA pide 7:1.

#3366cc sobre blanco   5,37:1   apto para texto normal
#2952a3 sobre blanco   7,42:1   cumple incluso AAA
#0891b2 sobre blanco   3,68:1   solo texto grande
#6699ff sobre blanco   2,78:1   no apto ni para texto grande

Los colores de marca de tono medio son el problema habitual. Si el tuyo no llega, úsalo para fondos, bordes e iconos, y para el texto y los enlaces elige una versión más oscura del mismo tono, que con HSL se encuentra bajando la luminosidad.

Precisión y redondeo

HEX y RGB se convierten entre sí sin pérdida. HSL se muestra redondeado a grados y porcentajes enteros, así que ir y volver puede mover uno o dos puntos: hsl(220 60% 90%) da #d6e0f5, y ese hex vuelve como hsl(221, 61%, 90%). La diferencia no se ve, pero conserva el código hexadecimal original como referencia cuando los valores exactos importan, por ejemplo en un manual de marca.

Frequently asked questions

¿Cómo paso un color de HEX a RGB?

Pega el código hexadecimal, por ejemplo #3366cc, en el conversor y copia el valor RGB, rgb(51, 102, 204). Cada par de dígitos hexadecimales es un canal de 0 a 255.

¿Cómo paso de RGB a HEX?

Escribe el color como rgb(51, 102, 204) o rgb(51 102 204) y el conversor muestra #3366cc. Cada canal se convierte a dos dígitos en base 16.

¿Qué es un código de color hexadecimal?

Es un color escrito como #rrggbb, donde cada par indica el rojo, el verde y el azul de 00 a ff. #ffffff es blanco y #000000 es negro.

¿Cómo elijo un color de la pantalla?

Haz clic en la muestra para abrir el selector de color del sistema. La mayoría de navegadores de escritorio incluyen ahí un cuentagotas que captura cualquier color visible en pantalla.

¿Qué diferencia hay entre RGB y HSL?

Describen los mismos colores de forma distinta. RGB mezcla luz roja, verde y azul; HSL usa tono, saturación y luminosidad, lo que facilita crear versiones más claras u oscuras de un color.

¿Por qué el valor HSL cambia un poco al volver a convertir?

Porque HSL se muestra redondeado a números enteros, y una conversión de ida y vuelta puede mover el RGB uno o dos puntos. Guarda el código hex original cuando necesites valores exactos.