Selector de color

Elige cualquier tono desde la rueda visual y conviértelo a formatos hex, rgb y hsl con este Color picker gratis. No necesitas registrarte para usar esta herramienta online.

Cómo la rueda de color calcula los formatos

Haces clic en un punto de la rueda visual y la herramienta calcula las coordenadas exactas en el espacio de tono, saturación y luminosidad. Luego pasa esas coordenadas por matrices de conversión estándar para devolver los valores equivalentes en otros espacios de color. Obtienes el código hex puro, el triplete rgb y los valores hsl de una sola vez. Todo este cálculo matemático ocurre al instante en tu navegador.

El modelo base trata el color como un cilindro tridimensional. El tono envuelve el borde circular. La saturación va del centro gris hasta el borde exterior más vivo. La luminosidad escala de negro puro abajo a blanco puro arriba. Mover un solo deslizador actualiza los demás porque están ligados matemáticamente. También puedes teclear números exactos en los campos si ya conoces los valores objetivo.

Cuándo usar un Color picker gratis

Los diseñadores lo usan para extraer valores exactos de un mockup cuando el cliente pide un tono específico de azul. Los frontend developers lo necesitan para traducir una elección visual a una variable css válida. A lo mejor solo quieres encontrar un tono complementario para una diapositiva. La herramienta cierra la brecha entre la intuición visual y los requisitos estrictos del código.

Es muy útil cuando construyes un design system y necesitas asegurar que las ratios de contraste se mantengan. Puedes elegir un color base, revisar su valor hex y luego ajustar manualmente el deslizador de luminosidad hasta que el texto siga siendo legible sobre un fondo oscuro.

• Extraer códigos hex exactos de una imagen de manual de marca.
• Generar paletas complementarias o análogas para el tema de un sitio web nuevo.
• Convertir un valor rgb de una captura de pantalla en un código hex usable.
• Probar el contraste de texto ajustando la luminosidad hasta que la ratio pase.

Límites del Color picker online

Esta herramienta opera enteramente dentro del espacio de color estándar srgb. No puede generar valores para pantallas de gama ancha como display-p3 o rec2020. Si diseñas para móviles de gama alta que soportan gamas más amplias, los valores hex y rgb que obtengas aquí se recortarán o mapearán mal al renderizarse en esos dispositivos específicos.

Tampoco puedes introducir un valor cmyk directamente para verlo en la rueda. La conversión de cmyk a rgb depende mucho del perfil icc específico de la impresora destino. La herramienta asume una conversión genérica estándar, lo cual está bien para diseño web pero es impreciso para producción de impresión profesional. Verifica siempre las pruebas de impresión físicas.

Cómo usar el Color picker

1. Haz clic en cualquier parte del cuadrado de color grande para definir la saturación y el brillo base.
2. Arrastra el deslizador vertical de la derecha para ajustar el tono general.
3. Ajusta los valores exactos usando los campos de entrada numéricos para hex, rgb o hsl.
4. Copia el código generado directamente desde el cuadro de texto junto a tu formato preferido.
5. Ajusta el deslizador de opacidad si necesitas un valor rgba o hsla con un canal alfa específico.

Comparación de formatos de color

Distintos entornos requieren distintos formatos de cadena, y saber cuál usar previene bugs de renderizado.

Frequently asked questions

¿El uso de este Color picker es gratis?

Sí. La herramienta es totalmente gratis y no exige crear una cuenta ni iniciar sesión. Puedes generar tantos códigos de color como necesites sin toparte con un muro de pago.

¿Cómo extraigo un color de una imagen?

Esta herramienta en concreto se basa en la rueda visual y los deslizadores, no en un cuentagotas de imágenes. Para sacar un color de una foto, primero tienes que usar un selector de color de pantalla a nivel de sistema operativo o una herramienta de extracción de imágenes dedicada. Una vez tengas el valor inicial, pega el código hex resultante en el campo de entrada aquí para ajustarlo.

¿Por qué mi código hex se ve distinto en mi móvil?

La calibración de pantalla varía muchísimo entre dispositivos. Un código hex representa un valor matemático absoluto en el espacio srgb, pero la pantalla física altera cómo se emite esa luz. Si el color se ve mal, el problema es el perfil del monitor, no el código generado.

¿Puedo convertir cmyk a hex aquí?

Puedes introducir valores cmyk, pero el código hex resultante es solo una aproximación. Cmyk es un modelo de color sustractivo para tinta, mientras que hex es un modelo aditivo para luz. A la conversión le falta el perfil icc específico de la impresora que se necesita para una precisión real.

¿Funciona la herramienta en navegadores móviles?

Sí. La interfaz es responsive y las áreas táctiles de los deslizadores y el cuadrado de color son lo bastante grandes para input con el dedo. Puedes copiar los códigos generados al portapapeles igual que lo harías en un escritorio. El diseño simplemente apila los controles en vertical en pantallas pequeñas para evitar que los elementos se solapen.