Selector de color

¿Qué es un selector de color?

Un selector de color es una herramienta en línea que te permite elegir visualmente colores para diseño web, piezas gráficas y diseño de interfaces, y convertirlos a varios formatos (HEX, RGB y HSL). Puedes encontrar el tono que buscas con la rueda de color y el selector de saturación/luminosidad, y como también admite ajuste de opacidad (alfa), puedes generar códigos en RGBA y HSLA.

Esta herramienta funciona directamente en el navegador, así que no hace falta instalar ningún programa aparte. Los navegadores compatibles con la API EyeDropper (Chrome y Edge) pueden usar el cuentagotas para extraer colores desde cualquier zona de la pantalla y capturarlos rápidamente desde referencias de diseño o imágenes.

Cuándo usar esta herramienta

• Desarrollo web – Encuentra y copia con rapidez códigos de color precisos (HEX, RGB, HSL) para aplicarlos en tus hojas de estilo CSS
• Diseño de interfaces – Crea paletas armónicas para botones, fondos y textos de apps o sitios web
• Diseño gráfico – Selecciona y combina colores para carteles, banners e imágenes para redes sociales
• Identidad de marca – Define los colores de tu marca para la empresa o el proyecto y documéntalos en varios formatos
• Pruebas de accesibilidad – Revisa los valores del color para comprobar el contraste entre texto y fondo
• Extracción de colores de referencia – Saca colores directamente de webs o imágenes que te gusten con EyeDropper
• Creación de presentaciones – Encuentra códigos de color para mantener un tema visual coherente en tus materiales

Funciones principales

• Selección con rueda de color – Elige de forma intuitiva el matiz que quieras en una rueda de 360 grados. Muévete con suavidad arrastrando con el ratón o con el dedo.
• Selector 2D de saturación y luminosidad – Ajusta a la vez la saturación y la luminosidad a partir del matiz elegido. Puedes pasar de tonos pastel suaves a colores profundos y oscuros.
• Deslizador alfa (opacidad) – Ajusta la opacidad del 0 % al 100 % para crear colores semitransparentes en formato RGBA y HSLA. Resulta útil para superposiciones y efectos de degradado.
• Compatibilidad con varios formatos – Convierte y muestra HEX, RGB y HSL en tiempo real. Cuando aplicas opacidad cambia automáticamente a RGBA y HSLA.
• Extracción de color con EyeDropper – Haz clic en cualquier punto de la pantalla en Chrome o Edge para extraer colores directamente. También puedes capturar colores de imágenes abiertas en otras pestañas o del escritorio.
• Generación automática de armonías – Genera automáticamente paletas complementarias, análogas, triádicas y monocromáticas a partir del color seleccionado. Así encuentras combinaciones equilibradas basadas en teoría del color.
• Copia de código CSS con un clic – Copia el color seleccionado como código CSS en formato color: #D4AF37;. Puedes elegir entre HEX, RGB y HSL.
• Historial de colores – Los últimos 20 colores seleccionados se guardan automáticamente. El historial se mantiene incluso si cierras el navegador, para que puedas reutilizar colores que ya hayas usado.

Cómo usarlo

1. Selecciona el matiz – Haz clic o arrastra sobre la rueda de color para escoger la familia base (rojo, naranja, amarillo, verde, azul, morado, etc.).
2. Ajusta la saturación y la luminosidad – En el cuadro inferior mueve a izquierda/derecha para cambiar la saturación y arriba/abajo para variar la luminosidad. La esquina superior derecha muestra el color más vivo y brillante.
3. Define la opacidad – Si necesitas un efecto semitransparente, ajusta el deslizador alfa. El 100 % es opaco y el 0 % es totalmente transparente.
4. Revisa y copia los valores – Comprueba los valores HEX, RGB y HSL en el panel derecho y pulsa el botón de copiar de cada formato para llevarlo al portapapeles.
5. Usa el código CSS – En la sección inferior de código CSS selecciona el formato que prefieras (HEX/RGB/HSL) y utiliza el botón «Copiar CSS» para llevarte un código listo para pegar en tu hoja de estilos.

Teoría del color y armonías

Cómo funciona la rueda de color

La rueda de color tiene su origen en el experimento de Isaac Newton de 1666, cuando utilizó un prisma para descomponer la luz. Las ruedas modernas se suelen dividir entre la tradicional (RYB), basada en rojo-amarillo-azul, y la digital (RGB), basada en rojo-verde-azul. Esta herramienta se apoya en el modelo HSL (Hue-Saturation-Lightness), donde el matiz se expresa como un ángulo entre 0° y 360°.

HSL vs RGB vs HEX

• HEX (hexadecimal) – Es el formato más usado en la web. Representa rojo, verde y azul como 00-FF (0-255) en formato #RRGGBB. Por ejemplo, #D4AF37 corresponde a un dorado.
• RGB (rojo, verde, azul) – Se basa en los tres colores primarios de la luz y cada canal se expresa con un valor de 0 a 255. En CSS se usa con el formato rgb(212, 175, 55).
• HSL (matiz, saturación, luminosidad) – Es un modelo muy cercano a la percepción humana del color. Combina matiz (0°-360°), saturación (0 %-100 %) y luminosidad (0 %-100 %). Facilita ajustar brillo o intensidad sin salir del mismo matiz.

Tipos de armonías de color

• Complementarios – Son dos colores situados frente a frente en la rueda. Crean un contraste fuerte y sirven para atraer la atención. Por ejemplo, el complementario del azul (240°) es el amarillo (60°).
• Análogos – Son colores contiguos en la rueda. Aparecen mucho en la naturaleza y transmiten una sensación armónica y agradable. Por ejemplo, naranja, amarillo y verde lima.
• Triádicos – Son colores colocados a intervalos regulares que dividen la rueda en tres partes. Ofrecen contraste equilibrado y más suave que los complementarios. Por ejemplo, rojo, amarillo y azul.
• Monocromáticos – Son colores que cambian solo en saturación y luminosidad dentro de un mismo matiz. Dan una impresión limpia y sofisticada, muy usada en identidad de marca.

Cómo usar la opacidad (alfa)

El canal alfa ajusta la opacidad del color. El 0 % es totalmente transparente y el 100 % totalmente opaco. Los colores semitransparentes se usan mucho en diseño web para superposiciones, degradados y estados hover. Los formatos RGBA y HSLA están disponibles desde CSS3, y los códigos HEX con transparencia (#RRGGBBAA) funcionan en los navegadores modernos.

Sobre la API EyeDropper

La API EyeDropper es una API web que permite extraer colores directamente de la pantalla desde el navegador. Actualmente está disponible en Chrome 95+ y Edge 95+. Firefox y Safari todavía no la admiten.

Con EyeDropper puedes extraer colores no solo de la pestaña actual, sino también de otras pestañas, otras aplicaciones e incluso del escritorio. Es muy útil para obtener rápido valores precisos desde referencias de diseño, webs que te inspiran o fotografías.

Consejos de uso

• Documenta los colores de marca – Cuando tengas definidos los colores principales de tu empresa o proyecto, anota sus valores HEX, RGB y HSL para mantener la coherencia en web, impresión o vídeo.
• Ten en cuenta la accesibilidad – Al elegir colores para texto y fondo, asegúrate de que haya suficiente diferencia de luminosidad. Las pautas WCAG recomiendan un contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande.
• Crea paletas de color – Después de escoger un color principal, usa la función de armonías para montar paletas con aspecto profesional. Lo habitual es combinar 1 color principal, 1 o 2 secundarios y 1 color de acento.
• Usa efectos semitransparentes – Si colocas texto sobre imágenes de fondo, una superposición semitransparente (por ejemplo, rgba(0, 0, 0, 0.5)) puede mejorar mucho la legibilidad.

Detalles

Los resultados descritos en ¿Qué es un selector de color? se generan a partir de los valores y opciones que elijas.

Para decisiones finales, contrástalos con guías oficiales o con una revisión profesional.

Preguntas frecuentes