Skip to content

Selector de color

In-browser only HEX · RGB · HSL · HSV · CMYK · OKLCH Screen eyedropper
Colores de ejemplo
#1E8CE6El cuentagotas de pantalla no esta disponible en este navegador.
Canales RGBA
Valores de color
HEX#1E8CE6
RGBrgb(30, 140, 230)
HSLhsl(207, 80%, 51%)
HSVhsv(207, 87%, 90%)
CMYKcmyk(87%, 39%, 0%, 10%)
OKLCHoklch(0.627 0.164 249)

CMYK es una aproximacion derivada de sRGB y no aplica ningun perfil ICC. Para impresion, 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 pixel de la pantalla, luego copialo 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
  • No se necesita cuenta ni inicio de sesion para usar el selector
  • 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 diseno
  • 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

Como elegir un color

  1. 1
    Elige un tono

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

  2. 2
    Establece el tono base

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

  3. 3
    O introduce un valor exacto

    Escribe un codigo 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 boton Cuentagotas para elegir el color de cualquier pixel de la pantalla.

  5. 5
    Copia el formato que necesites

    Cada fila de valor — HEX, RGB, HSL, HSV, CMYK, OKLCH — tiene un boton 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 notacion mas extendida
RGBrgb(30, 136, 229)Ediciones por canal y herramientas de imagen
HSLhsl(207, 78%, 51%)Ajustes intuitivos de luminosidad y saturacion
HSVhsv(207, 87%, 90%)Herramientas de diseno con un eje de valor/brillo
CMYKcmyk(87%, 41%, 0%, 10%)Punto de partida para imprenta (aproximado, sin ICC)
OKLCHoklch(0.62 0.16 248)Sistemas de diseno uniformes y equilibrados

Consejos practicos

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, util para escalas de diseno coherentes.

  • Atento al cambio de alfa

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

  • CMYK es orientativo

    La conversion de pantalla a imprenta depende del papel, la tinta y los perfiles ICC. Usa el valor CMYK para comunicar la intencion, no como especificacion final.

  • Seleccion con teclado

    Enfoca el cuadrado del espectro y usa las flechas; manten Mayus para pasos mayores. Los controles de tono y alfa tambien responden a las flechas.

Preguntas frecuentes

Como funciona este selector de color?
Arrastra dentro del cuadrado de saturacion/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 seleccion 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?
Si, en navegadores compatibles. Pulsa el boton Cuentagotas para muestrear cualquier pixel de la pantalla con la API nativa EyeDropper. El boton se oculta en navegadores que no la admiten; alli puedes escribir un valor hex o usar el espectro.
Cual es la diferencia entre HEX, RGB, HSL y OKLCH?
HEX (#RRGGBB) es el formato web mas comun. RGB define los canales rojo, verde y azul de 0 a 255. HSL usa tono, saturacion y luminosidad, mas intuitivo para muchos disenadores. OKLCH es un espacio moderno perceptualmente uniforme donde valores de luminosidad iguales se ven igual de brillantes, ideal para paletas equilibradas.
Como anado 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 digitos (#RRGGBBAA) y RGB/HSL cambian a sus variantes rgba()/hsla().
Por que el valor CMYK parece aproximado?
CMYK se deriva matematicamente de sRGB sin perfil ICC, por lo que es una estimacion y no una conversion precisa para imprenta. Usalo como punto de partida y confirma los valores finales con tu proveedor de impresion.
Como copio un valor de color en movil?
Cada fila de formato tiene un boton de copia. Tocalo y el valor pasa al portapapeles, con una confirmacion anunciada para lectores de pantalla.