Saltar al contenido

Selector de color online

Elige cualquier color en el cuadro o pega un código y copia su valor en HEX, RGB, HSL u OKLCH. Con sombras, tonos, armonías y un cuentagotas para tomar colores de tu pantalla.

Conversión de color

Consulta el código de este color en diez formatos distintos, listos para copiar.

Cómo elegir y convertir un color

El selector de color permite encontrar un color exacto de tres formas: haciendo clic en el cuadro de saturación y luminosidad, deslizando el matiz en la barra inferior, o introduciendo un código Hex, RGB, HSL u OKLCH que ya conozcas.

A diferencia del círculo cromático, pensado para explorar armonías girando una rueda, esta herramienta está pensada para cuando ya tienes un color concreto en mente y necesitas su código exacto o convertirlo a otro formato, ya sea para CSS, para imprenta o para cualquier otro uso.

Cómo usar el selector de color

  1. 1. Elige el tono

    Arrastra el control de la barra de colores para escoger el matiz: rojos, amarillos, verdes, azules… Es la vuelta completa del círculo cromático, de 0° a 360°.

  2. 2. Ajusta saturación y brillo

    En el cuadro grande, mueve el punto hacia la derecha para un color más intenso y hacia arriba para uno más luminoso. Abajo del todo siempre está el negro.

  3. 3. Copia el código

    Elige el formato (HEX, RGB, HSL u OKLCH) y cópialo con un clic. Si ya tienes un código, pégalo en el campo de arriba y el selector se sitúa en ese color.

Qué formato de color usar

Este es #2C71DE en los formatos más habituales, y para qué sirve cada uno.

HEX#2C71DEEl estándar en CSS, HTML y herramientas de diseño como Figma: seis dígitos hexadecimales.
RGBrgb(44, 113, 222)Rojo, verde y azul de 0 a 255. Útil en código y cuando necesitas transparencia.
HSLhsl(217, 73%, 52%)Tono, saturación y luminosidad. El más cómodo para crear variantes más claras u oscuras de un color.
HSV / HSBhsv(217 80 87)Tono, saturación y brillo (también HSB). Es el modelo del cuadro del selector y de muchos programas de diseño.
OKLCHoklch(0.5663 0.1805 259.49)El formato moderno de CSS: la luminosidad se percibe uniforme, ideal para escalas y sistemas de color.
CMYKC80 M49 Y0 K13Cian, magenta, amarillo y negro para imprenta. Es una conversión aproximada: confírmala con tu imprenta.

Toma cualquier color de tu pantalla

Con el cuentagotas puedes capturar el color exacto de cualquier cosa que tengas abierta: una web, una captura, un documento… Pulsa el icono del cuentagotas, haz clic donde quieras y el selector te dará su código al instante.

Funciona en Chrome, Edge y otros navegadores de escritorio basados en Chromium. Si el color está en una foto, súbela al selector de color de imagen y extrae su paleta completa.

Abrir el selector de color de imagen

Más de 16 millones de colores

Puede parecer una cifra exagerada, pero un monitor moderno es capaz de representar 16.777.216 colores diferentes.

Esto se debe a que el sistema RGB utiliza tres canales de color:

  • Rojo (Red)
  • Verde (Green)
  • Azul (Blue)

Cada canal puede tener un valor entre 0 y 255.

Al combinar esos tres valores obtenemos exactamente:

256 × 256 × 256 = 16.777.216 colores.

Aunque muchos de ellos sean muy parecidos entre sí, disponer de esta enorme gama te permite encontrar el tono exacto que necesitas, con una precisión extraordinaria, sea cual sea tu proyecto.

Aquí es donde un buen selector de colores se convierte en una herramienta imprescindible.

Preguntas frecuentes

Es una herramienta para elegir un color de forma visual, con un cuadro de saturación y brillo y una barra de tono, y obtener su código exacto en HEX, RGB, HSL u otros formatos para usarlo en diseño o en código.

Es la forma de escribir un color con seis dígitos hexadecimales después de la almohadilla: dos para el rojo, dos para el verde y dos para el azul. Por ejemplo, #2C71DE.

Introduce el Hex en el selector. La tabla de conversión muestra automáticamente RGB, HSL, HSV, OKLCH y CMYK listos para copiar.

HSL usa luminosidad, que es la mezcla con blanco o negro, y HSB (también llamado HSV) usa brillo, o valor. Ambos parten del matiz y la saturación, pero el tercer eje se calcula de forma distinta, así que un mismo color puede mostrar números diferentes según el modelo que uses.

OKLCH es un espacio de color perceptual: L (luminosidad), C (croma) y H (matiz) se ajustan a cómo vemos el color realmente. RGB describe luces de pantalla (rojo, verde, azul) y HSL reorganiza ese mismo modelo de forma más intuitiva, pero ninguno garantiza que dos colores con la misma luminosidad se vean igual de claros. OKLCH sí lo garantiza, lo que permite crear paletas más uniformes y degradados más naturales.

CMYK (cian, magenta, amarillo y negro) es el modelo de impresión, mezcla tintas sobre papel. Tu monitor trabaja en RGB, que es luz. El selector muestra el código CMYK para cuando necesitas preparar algo que irá a imprenta o a un PDF listo para impresión. En pantalla, el formato correcto sigue siendo RGB, Hex, HSL u OKLCH.

Usa el cuentagotas del selector para capturar cualquier píxel de tu pantalla (en Chrome y Edge de escritorio). Si el color está en una foto, súbela al selector de color de imagen.

Herramientas relacionadas