Idioma
English English Vietnamese (Tiếng Việt) Vietnamese (Tiếng Việt) Chinese (简体中文) Chinese (简体中文) Portuguese (Brazil) (Português do Brasil) Portuguese (Brazil) (Português do Brasil) Spanish (Español) Spanish (Español) Indonesian (Bahasa Indonesia) Indonesian (Bahasa Indonesia)

Elige y explora colores con un selector visual. Obtén valores en HEX, RGB, HSL, HSV y CMYK al instante, con gotero, historial y favoritos.

Selector de color para HEX, RGB, HSL, HSV y CMYK

Selector de Color es un selector de color online que te permite elegir cualquier color de forma visual y leer su valor en todos los formatos habituales a la vez. Arrastra dentro del cuadro de color, desliza las barras de tono y opacidad o escribe un código HEX, y los valores HEX, RGB, RGBA, HSL, HSV y CMYK se actualizan al instante.

Está pensado para desarrolladores web, diseñadores de interfaces y gráficos, y para cualquiera que necesite un código de color exacto sin saltar entre conversores. El gotero integrado toma un color directamente de tu pantalla, mientras que el historial y los favoritos mantienen tus colores recientes y guardados a un clic de distancia.

Privado por diseño: cada color se calcula en tu navegador, y tu historial y favoritos se guardan únicamente en el almacenamiento local de tu navegador. Nada se sube nunca a un servidor.

Cómo usar el selector de color

1

Elige un color

Haz clic o arrastra dentro del cuadro de color para ajustar la saturación (de izquierda a derecha) y el brillo (de abajo hacia arriba). Arrastra el control de Tono para cambiar el color base por todo el espectro de 0°–360°.

2

Ajusta la opacidad

Arrastra el control de Opacidad para que el color pase de totalmente transparente a totalmente sólido. La vista previa a cuadros y los valores RGBA y HEX de 8 dígitos reflejan el canal alfa que elijas.

3

O escribe un código HEX

Escribe directamente en el campo HEX para saltar a un color conocido. Admite valores de 3 dígitos (#FFF), 6 dígitos (#FFFFFF) y 8 dígitos (#FFFFFFAA), y el selector se ajusta para coincidir.

4

Copia el valor que necesites

Usa el botón de copiar junto a cualquier formato, o Copiar todo para copiar HEX, RGB, RGBA, HSL, HSV y CMYK a la vez, cada uno en su propia línea. Pulsa el corazón para guardar el color en tus favoritos.

Funciones

Selector de color visual

Elige colores de forma intuitiva con un cuadro de color HSV más controles de tono y opacidad, todo actualizándose en tiempo real.

Múltiples formatos de color

Lee cada color en HEX, RGB, RGBA, HSL, HSV y CMYK al mismo tiempo, listo para web o impresión.

Gotero de pantalla

Toma cualquier color de cualquier punto de tu pantalla con el gotero nativo del navegador, disponible en Chrome y Edge.

Generador de color aleatorio

Genera un color nuevo con saturación y brillo equilibrados cuando necesites inspiración rápida.

Historial y favoritos

Tus últimos 50 colores elegidos se registran automáticamente, y los favoritos quedan guardados para reutilizarlos con un clic.

Tus datos siguen siendo privados

Todo el procesamiento se ejecuta en tu navegador y tus colores quedan en el almacenamiento local, sin subirse ni rastrearse.

Preguntas frecuentes

¿Cómo elijo un color de mi pantalla?

Pulsa el botón de gotero Tomar de la pantalla y luego haz clic en cualquier píxel de tu pantalla. El selector lee ese color exacto y muestra sus valores HEX, RGB y demás. Usa el gotero nativo del navegador (EyeDropper), así que funciona en Chrome y Edge.

¿Qué es un código de color HEX?

Un código HEX es el formato web estándar que escribe un color como #RRGGBB usando dígitos hexadecimales, por ejemplo #FF5733. Contiene la misma información de rojo, verde y azul que un valor RGB como rgb(255, 87, 51), solo que en una notación más corta. Un HEX de 8 dígitos como #FF5733AA añade un canal alfa (opacidad).

¿Cómo convierto HEX a RGB?

Escribe o pega el código HEX en el campo HEX y el valor RGB aparece al instante en su propio recuadro, listo para copiar. No tienes que hacer ningún cálculo; el selector se encarga de las conversiones entre HEX, RGB, RGBA, HSL, HSV y CMYK al mismo tiempo.

¿Cuándo conviene usar HSL frente a HSV?

HSL (Tono, Saturación, Luminosidad) cuenta con amplio soporte en CSS y en el diseño web. HSV (Tono, Saturación, Valor) es habitual en herramientas de diseño como Photoshop y Figma, porque el Valor se aproxima a cómo percibimos el brillo. Ambos describen el mismo selector; elige el que coincida con tu herramienta.

¿Para qué se usa CMYK?

CMYK (Cian, Magenta, Amarillo y Negro/Key) es el modelo de color que se usa para impresión. Si estás preparando un arte para imprimir, copia el valor CMYK para que tus colores se reproduzcan en papel con más fidelidad que un valor RGB pensado para pantalla.

¿Qué hace el valor de opacidad / alfa?

La opacidad controla cuán transparente es el color. Al 100% es totalmente sólido, y al 0% es totalmente transparente. Bajarla resulta útil para superposiciones, sombras y diseños en capas, y el canal alfa se refleja en el valor RGBA y en el código HEX de 8 dígitos.

¿Por qué no aparece el botón del gotero?

El gotero depende de la API nativa EyeDropper del navegador, que por ahora está disponible en Chrome y Edge. En navegadores que no la admiten, como Firefox y Safari, el botón queda oculto. Aun así, puedes establecer cualquier color escribiendo su código HEX.

¿Mis colores guardados se almacenan en línea?

No. Tus favoritos y tu historial se guardan únicamente en el almacenamiento local de tu navegador, así que permanecen en tu dispositivo y se conservan entre sesiones. Nada se sube, y puedes borrar el historial o los favoritos cuando quieras.

Favoritos
Aún no hay favoritos
Historial
Aún no hay historial
Arrastra dentro del cuadro de color para ajustar la saturación y el brillo
Usa el control de Tono para cambiar el color base
Pulsa el botón de copiar junto a cualquier formato para copiarlo al instante
Usa el gotero para tomar colores de cualquier punto de la pantalla (Chrome/Edge)
Pulsa el icono de corazón para guardar el color actual en favoritos
Todo el procesamiento ocurre en tu navegador: no se sube ningún dato
¿Quieres aprender más? Leer documentación →
1/7
Comience a escribir para buscar...
Buscando...
No se encontraron resultados
Pruebe con otras palabras clave