Selector de color

¿Qué es un selector de color?

Un selector de color es una herramienta en línea que te deja 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 corre directamente en el navegador, así que no necesitas instalar nada adicional. Los navegadores compatibles con la API EyeDropper (Chrome y Edge) pueden usar el cuentagotas para extraer colores desde cualquier zona de la pantalla y tomarlos rápido desde referencias de diseño o imágenes.

Cuándo conviene usar esta herramienta

• Desarrollo web – Encuentra y copia rápido códigos de color precisos (HEX, RGB, HSL) para aplicarlos en tus hojas de estilo CSS
• Diseño de interfaces – Arma paletas armónicas para botones, fondos y textos de apps o sitios web
• Diseño gráfico – Selecciona y combina colores para pósters, 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 verificar el contraste entre texto y fondo
• Extracción de colores de referencia – Saca colores directamente de sitios o imágenes que te gusten con EyeDropper
• Creación de presentaciones – Encuentra códigos de color para mantener un tema visual consistente 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. Recorre los colores con suavidad arrastrando con el mouse o con el dedo.
• Selector 2D de saturación y luminosidad – Ajusta al mismo tiempo la saturación y la luminosidad a partir del matiz elegido. Puedes pasar de tonos pastel claros a colores profundos y oscuros.
• Control alfa (opacidad) – Ajusta la opacidad de 0 % a 100 % para crear colores semitransparentes en formato RGBA y HSLA. Es ú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 tomar 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 en 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 conserva aunque cierres el navegador, para que puedas reutilizar colores que ya habías 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 control alfa. El 100 % es opaco y el 0 % totalmente transparente.
4. Revisa y copia los valores – Consulta los valores HEX, RGB y HSL en el panel derecho y usa el botón de copiar de cada formato para llevarlos 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 usa 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 nace del experimento de Isaac Newton de 1666, cuando usó un prisma para separar la luz. Las ruedas modernas suelen dividirse entre la tradicional (RYB), basada en rojo-amarillo-azul, y la digital (RGB), basada en rojo-verde-azul. Esta herramienta se basa 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 es un tono 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 forma en que percibimos el 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 colocados frente a frente en la rueda. Generan un contraste fuerte y sirven para llamar la atención. Por ejemplo, el complementario del azul (240°) es el amarillo (60°).
• Análogos – Son colores contiguos en la rueda. Se ven mucho en la naturaleza y dan 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. Dan un 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 sacar rápido valores precisos desde referencias de diseño, sitios que te inspiran o fotografías.

Consejos de uso

• Documenta los colores de marca – Cuando ya definiste los colores principales de tu empresa o proyecto, anota sus valores HEX, RGB y HSL para mantener consistencia en web, impresión o video.
• Toma 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.
• Arma paletas de color – Después de escoger un color principal, usa la función de armonías para crear paletas con aspecto profesional. Lo más común 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, compáralos con guías oficiales o con una revisión profesional.

Preguntas frecuentes