Saltar al contenido

Selector de color

Solo en el navegador HEX · RGB · HSL · HSV · CMYK · OKLCH Cuentagotas de pantalla
Colores de ejemplo
#1E88E5El cuentagotas de pantalla no está disponible en este navegador.
Canales RGBA
Valores de color
HEX#1E88E5
RGBrgb(30, 136, 229)
HSLhsl(208, 79%, 51%)
HSVhsv(208, 87%, 90%)
CMYKcmyk(87%, 41%, 0%, 10%)
OKLCHoklch(0.618 0.167 251)

CMYK es una aproximación derivada de sRGB y no aplica ningún perfil ICC. Para impresión, confirma los valores con tu proveedor.
Herramientas relacionadas Ver todo

Resumen

Elige un color y lee cada formato

Elige un color del espectro o muestrea cualquier píxel de la pantalla, luego cópialo como HEX, RGB, HSL, HSV, CMYK u OKLCH. Todo se ejecuta en tu navegador.

  • Selector de espectro con controles de tono y alfa
  • Cuentagotas de pantalla en navegadores compatibles
  • Seis formatos de salida copiables con un toque
  • Campos HEX y de canales para valores exactos
  • Se ejecuta por completo en tu navegador
  • Se ejecuta por completo en tu navegador — nada se sube a un servidor
  • Nada se almacena ni se registra en un servidor
  • Los datos de color nunca salen de tu dispositivo
  • Elegir un color y copiar su valor HEX, RGB, HSL, HSV, CMYK u OKLCH
  • Muestrear un tono preciso en pantalla con el cuentagotas
  • Convertir un color entre HEX, RGB, HSL, HSV, CMYK y OKLCH para una entrega de diseño
  • Obtener valores de color CSS listos para usar en una hoja de estilos
  • Hacer coincidir un color entre los formatos HEX, RGB y HSL

Primeros pasos

Cómo elegir un color

  1. 1
    Elige un tono

    Arrastra dentro del cuadrado de saturación/brillo para ajustar la viveza y la claridad. Usa las flechas para ajustes finos solo con el teclado.

  2. 2
    Establece el tono base

    Mueve el control arcoíris para elegir el color base, y usa el control alfa de abajo si necesitas transparencia.

  3. 3
    O introduce un valor exacto

    Escribe un código hex en el campo HEX, o ajusta directamente los canales R, G, B y A para una entrada precisa.

  4. 4
    Muestrea desde tu pantalla

    En navegadores compatibles, pulsa el botón Cuentagotas para elegir el color de cualquier píxel de la pantalla.

  5. 5
    Copia el formato que necesites

    Cada fila de valor — HEX, RGB, HSL, HSV, CMYK, OKLCH — tiene un botón de copia que coloca el valor en el portapapeles.

Referencia

Referencia de formatos de color

Referencia de formatos de color
FormatoEjemploIdeal para
HEX#1E88E5Web y CSS — la notación más extendida
RGBrgb(30, 136, 229)Ediciones por canal y herramientas de imagen
HSLhsl(208, 79%, 51%)Ajustes intuitivos de luminosidad y saturación
HSVhsv(208, 87%, 90%)Herramientas de diseño con un eje de valor/brillo
CMYKcmyk(87%, 41%, 0%, 10%)Punto de partida para imprenta (aproximado, sin ICC)
OKLCHoklch(0.618 0.167 251)Sistemas de diseño uniformes y equilibrados

Consejos prácticos

Consejos para trabajar con color

  • Usa OKLCH para paletas

    Como OKLCH es perceptualmente uniforme, mantener su luminosidad fija mientras cambias el tono produce matices que se ven igual de brillantes, útil para escalas de diseño coherentes.

  • Atento al cambio de alfa

    Cuando el alfa baja de 1, HEX pasa a 8 dígitos (#RRGGBBAA) y RGB/HSL cambian a rgba()/hsla(). Vuelve a poner el alfa en 1 si necesitas la notación corta. HSV, CMYK y OKLCH no incluyen un componente alfa en su salida.

  • CMYK es orientativo

    La conversión de pantalla a imprenta depende del papel, la tinta y los perfiles ICC. Usa el valor CMYK para comunicar la intención, no como especificación final.

  • Selección con teclado

    Enfoca el cuadrado del espectro y usa las flechas; mantén Mayús para pasos mayores. Los controles de tono y alfa también responden a las flechas.

Preguntas frecuentes

¿Cómo funciona este selector de color?
Arrastra dentro del cuadrado de saturación/brillo para elegir un tono, luego usa el control de tono para el color base y el control alfa para la opacidad. La herramienta convierte tu selección en HEX, RGB, HSL, HSV, CMYK y OKLCH en tiempo real. Todo se ejecuta en tu navegador.
¿Puedo elegir un color en cualquier parte de la pantalla?
Sí, en navegadores compatibles. Pulsa el botón Cuentagotas para muestrear cualquier píxel de la pantalla con la API nativa EyeDropper. El botón se oculta en navegadores que no la admiten; allí puedes escribir un valor hex o usar el espectro.
¿Cuál es la diferencia entre HEX, RGB, HSL y OKLCH?
HEX (#RRGGBB) es el formato web más común. RGB define los canales rojo, verde y azul de 0 a 255. HSL usa tono, saturación y luminosidad, más intuitivo para muchos diseñadores. OKLCH es un espacio moderno perceptualmente uniforme donde valores de luminosidad iguales se ven igual de brillantes, ideal para paletas equilibradas.
¿Cómo añado transparencia a un color?
Usa el control alfa bajo el control de tono, o escribe un valor de 0 a 1 en el campo A. Cuando el alfa es menor que 1, el valor HEX cambia a 8 dígitos (#RRGGBBAA) y RGB/HSL cambian a sus variantes rgba()/hsla().
¿Por qué el valor CMYK parece aproximado?
CMYK se deriva matemáticamente de sRGB sin perfil ICC, por lo que es una estimación y no una conversión precisa para imprenta. Úsalo como punto de partida y confirma los valores finales con tu proveedor de impresión.
¿Cómo copio un valor de color en el móvil?
Cada fila de formato tiene un botón de copia. Tócalo y el valor pasa al portapapeles, con una confirmación anunciada para lectores de pantalla.