Selector de Color
Selector de color es una herramienta gratuita en línea que le permite seleccionar cualquier color visualmente y obtener sus valores exactos en formatos HEXADECIMAL, RGB, HSL, HSV y CMYK. Use el cuadro intuitivo saturación / brillo combinado con el control deslizante tono para identificar el color perfecto, o ingrese un valor conocido para verlo mostrado. La herramienta muestra vistas previas en tiempo real del color seleccionado, muestra colores complementarios y análogos y mantiene un historial de los colores seleccionados recientemente. Perfecto para diseñadores, desarrolladores y cualquier persona que necesite valores de color precisos para diseño web, arte digital, desarrollo de interfaz de usuario o cualquier proyecto creativo.
Qué es
El selector de color proporciona una interfaz interactiva para seleccionar colores visualmente en lugar de requerir que conozca valores numéricos específicos. Es el equivalente digital de una rueda de colores física o una herramienta de muestra de pintura. La interfaz del selector de color consta de: - Un cuadro de saturación / valor 2D: El eje horizontal controla la saturación( gris a color puro), el eje vertical controla el brillo (negro a todo color) - Un control deslizante de tono: Franja vertical u horizontal que muestra el espectro completo (0-360 grados) - Un control deslizante opacidad / alfa: Controla la transparencia de 0 (invisible) a 1 (completamente opaco) - Campos de entrada: Entrada directa de HEX, RGB, HSL u otros valores con conversión automática - Vista previa del color: Muestra grande que muestra el color seleccionado actualmente contra varios fondos Cómo usar cada componente: - Haga clic/arrastre en el cuadro saturación / valor para elegir la intensidad y luminosidad de su color - Arrastre el control deslizante tono para seleccionar la familia de colores base (rojo, naranja, amarillo, verde, azul,morado) - Ajuste el control deslizante alfa para colores semitransparentes - Escriba un código hexadecimal directamente en la entrada HEXADECIMAL para una especificación exacta - Haga clic en cualquier valor para copiarlo al portapapeles Se muestran las relaciones de color: - Color complementario (opuesto en la rueda de colores) - Split-colores complementarios - Colores análogos (tonos adyacentes) - Colores triádicos (espaciados uniformemente) Característica de historial: La herramienta guarda automáticamente los últimos 10 colores seleccionados en el almacenamiento del navegador, lo que le permite volver a visitar selecciones anteriores sin volver a seleccionarlos. Esto es especialmente útil cuando se comparan varios colores entre sesiones.
Cómo usar
- Use el cuadro saturación/valor 2D para seleccionar su color. Muévase horizontalmente para ajustar la saturación (de gris apagado a color vivo) y verticalmente para ajustar el brillo (de oscuro a claro). Un indicador de cruz muestra su posición actual.
- Arrastre el control deslizante tono (franja arcoíris a la derecha) para seleccionar el tono base. Esto cambia toda la familia de colores que se muestra en el cuadro saturación / valor. Haga clic directamente en cualquier tono para saltar allí al instante.
- Ajuste con precisión el color seleccionado utilizando los campos de entrada. Ingrese un código hexadecimal directamente si lo conoce con precisión, o ajuste valores RGB/HSL individuales usando las entradas numéricas y las teclas de flecha para un control preciso.
- Ajuste el control deslizante alfa / transparencia si necesita un color semitransparente. El fondo cuadriculado detrás de la vista previa muestra transparencia visualmente. Las salidas RGBA y hexadecimal de 8 dígitos se actualizan para reflejar el valor alfa.
- Vea los colores complementarios, análogos y triádicos generados automáticamente debajo del selector. Haga clic en cualquier color generado para seleccionarlo como color activo para editarlo o copiarlo.
- Elige tu color del historial si usaste uno recientemente. Los últimos 10 colores se guardan en el almacenamiento del navegador para facilitar el acceso. Haga clic en cualquier muestra de historial para volver a seleccionarla.
- Copie el valor de color seleccionado en su formato preferido utilizando los botones copiar junto a cada formato (HEXA, RGB, HSL). El valor copiado va directamente al portapapeles para pegarlo en CSS, herramientas de diseño o código.
Ejemplos
Entrada: Screen position: x=450, y=320
Proceso: Read pixel → RGB extraction → HEX conversion
Resultado: HEX: #2563EB | RGB(37, 99, 235)
Entrada: Natural color: Select sky blue from image
Proceso: Image sampling → Average pixel color
Resultado: HEX: #87CEEB | RGB(135, 206, 235)
Búsquedas Relacionadas
La gente también busca: selector de color, selector de color, rueda de colores, selector de color.
selector de colorselector de colorrueda de coloresselector de color
Preguntas Frecuentes
¿Cómo elijo un color hexadecimal específico que ya conozco?
Simplemente escriba o pegue el código hexadecimal en el campo de entrada HEXADECIMAL. Se analizará y se mostrará instantáneamente en el selector. Para códigos hexadecimales de 8 dígitos (con alfa), use la entrada RGBA o escriba incluida la parte alfa (#RRGGBBAA). El selector actualiza todos los demás valores de formato y la selección visual automáticamente.
¿Puedo usar el selector de color con mi software de diseño como Figma o Sketch?
Sí. Elija un color con la herramienta y copie el valor hexadecimal o RGBA, luego péguelo directamente en Figma, Sketch, Adobe XD o cualquier software de diseño que acepte valores hexadecimales/RGB. Para Boceto, péguelo en el campo hexadecimal del selector de color. Para Figma, pegue en la entrada hexadecimal en el panel diseño. Los valores RGB y HSL también se pueden usar si su flujo de trabajo prefiere esos formatos.
¿Qué es el HSV y en qué se diferencia del HSL?
HSV (Tono, Saturación, Valor) y HSL (Tono, Saturación, Luminosidad) son modelos de color cilíndricos, pero difieren en cómo definen el brillo. En HSV, el valor controla qué tan brillante es el color a plena saturación. En HSL, la luminosidad controla el punto medio entre el blanco y el negro. Los tonos puros aparecen en V = 100% en HSV pero en L = 50% en HSL. HSL generalmente es más intuitivo para crear tintes claros (aumentar L) o tonos oscuros (disminuir L). La herramienta muestra ambos para compatibilidad con diferentes flujos de trabajo.
¿El selector de color funciona con colores de pantalla (cuentagotas)?
La herramienta funciona con el cuentagotas del sistema si su navegador admite la API del cuentagotas. Haga clic en el icono del cuentagotas y el cursor cambiará a una lupa; haga clic en cualquier píxel de la pantalla para ver su color. Esto captura los colores de cualquier aplicación, página web o elemento de escritorio. Si su navegador no admite la API de cuentagotas, puede usar aplicaciones de selección de color de pantalla de terceros e ingresar el valor hexadecimal manualmente.
¿Por qué mis colores se ven diferentes en la pantalla y en la impresión?
Los colores que se muestran en la pantalla usan RGB (rojo, claro, azul claro), mientras que la impresión usa CMYK (tinta Cian, Magenta, Amarilla, negra). Estos espacios de color tienen gamas diferentes; algunos colores brillantes de la pantalla no tienen un equivalente exacto de CMYK. La herramienta proporciona valores CMYK como referencia, pero para obtener un color de impresión preciso, use los valores del sistema de coincidencia Pantone o consulte los perfiles de color de su impresora. El brillo de la pantalla, la calibración del monitor y la iluminación ambiental también afectan la forma en que aparecen los colores en diferentes dispositivos.