Color Picker: selector y conversor de códigos de color

Sí, el Color Picker es gratis y puedes usarlo sin registrarte. Todas las conversiones se realizan directamente en tu navegador: no se sube nada, no se registra nada ni se envían solicitudes al servidor. Solo se añade el color actual a la URL de la página como ?color= para que puedas compartirlo mediante un enlace o guardarlo en marcadores.

Haz clic en el campo de color junto a «Color CSS más cercano:», elige la saturación y la luminosidad en el recuadro y, debajo, el tono. El código HEX aparece arriba, en el resultado, y puedes copiarlo con el botón correspondiente. Si ya conoces el color en RGB, HSL, HSV o CMYK, escribe el valor en el campo adecuado. Para extraer un color de una foto o captura de pantalla, usa el Image Color Picker: esta herramienta no lee imágenes. Ir al Image Color Picker

Escribe o pega el valor en el campo RGB, por ejemplo, 24, 232, 136 o rgb(24, 232, 136). El campo HEX mostrará inmediatamente #18e888, y HSL, HSV y CMYK también se actualizarán. Para hacerlo a la inversa, introduce el código HEX con o sin # en el campo HEX. Ambas notaciones describen el mismo color de pantalla: HEX expresa los tres valores RGB de 0 a 255 como pares hexadecimales de 00 a ff.

RGB describe un color mediante la proporción de luz roja, verde y azul que mezcla una pantalla. HSL (tono/saturación/luminosidad) y HSV (tono/saturación/valor) son dos conversiones distintas del mismo valor RGB, más intuitivas para las personas. HSL resulta útil para aclarar u oscurecer un color; HSV, para mezclarlo mediante tono, saturación y brillo. CMYK (cian/magenta/amarillo/negro), en cambio, no describe una mezcla de luz, sino una mezcla de tinta o tóner utilizada en impresión.

El valor CMYK es una aproximación simplificada, calculada sin perfil de color y redondeada a porcentajes enteros. Te ayuda a estimar cómo quedaría un color de pantalla al imprimirlo, pero no sustituye una prueba de impresión con el perfil de tu imprenta. Puedes introducir CMYK, por ejemplo, como 0%, 61%, 72%, 0% o cmyk(0%, 61%, 72%, 0%).

Sí. Ajusta la opacidad del 0 al 100 % con el control deslizante; el resultado mostrará el color como rgba() y hsla() para que puedas copiarlo. Si introduces un valor con alfa, como un código HEX de 4 u 8 dígitos (#rrggbbaa), rgba() o hsla(), el control adoptará esa opacidad cuando salgas del campo. El código HEX del resultado seguirá teniendo seis dígitos.

Mide, de 1:1 a 21:1, cuánto destacan entre sí dos colores, como el texto y el fondo. Niveles de la herramienta: AAA a partir de 7:1, AA a partir de 4.5:1 para texto normal y AA (texto grande) a partir de 3:1 para texto grande o en negrita. El Color Picker muestra la relación de contraste de tu color con el negro y el blanco. Para otros colores de primer plano y fondo, usa el Contrast Checker. Ir al Contrast Checker

Junto al campo de color, la herramienta muestra el color CSS más cercano. Para encontrarlo, calcula la distancia euclidiana entre tu color y cada color CSS con nombre en el espacio RGB y muestra el más próximo, por ejemplo, tomato para #ff6347. Si no coincide exactamente, añade «similar». Puedes copiar el nombre y usarlo en CSS en lugar del código HEX, aunque, si aparece «similar», solo es una aproximación.