¿Qué es un selector de color?

Un selector de color te permite elegir un color a simple vista en lugar de escribir números. La mayoría de las aplicaciones de diseño lo presentan de la misma manera: un control deslizante de tono permite elegir el color base del arcoíris y un cuadrado a su lado determina cuánto hay de ese tono (saturación, de izquierda a derecha) y qué tan brillante es (de arriba abajo). Esta disposición corresponde al modelo de color HSV, y cada color que puede mostrar una pantalla tiene un lugar en él.

Descripción de la herramienta

Arrastra por el cuadrado y el control deslizante de tono para encontrar un color, o escribe o pega uno que ya tengas en HEX, RGB, HSL u otro formato. En Chrome y Edge, el botón del cuentagotas permite elegir un color de cualquier lugar de la pantalla, incluso fuera del navegador. Ajusta la opacidad para obtener colores translúcidos y copia el resultado en el formato que necesites: HEX para CSS y la mayoría de las herramientas de diseño, RGB y HSL para CSS, HSV para aplicaciones de diseño, OKLCH para CSS moderno y CMYK como punto de partida para impresión.

Funciones

  • Cuadrado de saturación y brillo con un control deslizante de tono; se puede usar con ratón, pantalla táctil o teclado
  • Cuentagotas de pantalla en Chrome y Edge
  • Escribe o pega un color en HEX, RGB, HSL, HWB, CMYK y otros formatos
  • Opacidad, mostrada sobre una cuadrícula de transparencia
  • Valores HEX, RGB, HSL, HSV, OKLCH y CMYK, todos listos para copiar
  • Más formatos, como HWB, LAB, LCH y XYZ, en la lista de formatos del color seleccionado
  • Funciona en el navegador

Cómo funciona

La herramienta conserva el color como tono, saturación y valor, de modo que el tono no cambia al arrastrar hacia el blanco, el negro o el gris. Los demás formatos se calculan a partir de estos valores: HEX y RGB se redondean a números enteros de 0 a 255; HSL y HSV, a grados y porcentajes enteros; y OKLCH se convierte a través del espacio de color sRGB. Cuando la opacidad es inferior al 100 %, HEX recibe un cuarto par de dígitos y los formatos CSS, un valor alfa. CMYK no tiene alfa y se calcula mediante una conversión sencilla, sin perfil de impresora.

Consejos

  • No se conserva la opacidad propia de un color pegado, como la de rgba(); ajústala con el campo Opacidad.
  • Haz clic en el cuadrado o en el control deslizante y usa las teclas de flecha para cambiar el valor en incrementos del 1 %, o del 10 % con Mayús.
  • Para elegir colores de una foto o una captura de pantalla, usa el Selector de color de imagen, que analiza la imagen directamente.
  • Consulta con tu imprenta qué valores CMYK debes usar, ya que un mismo color puede imprimirse de forma distinta según la impresora y el papel.