Cómo usar: Selector de color
- Arrastra dentro del cuadro de color y mueve el control de tono, escribe un valor HEX o usa el cuentagotas para tomar un color de tu pantalla.
- Haz clic en cualquier fila para copiar el color en HEX, RGB, HSL u OKLCH.
- Usa los tonos y las armonías para crear una paleta y comprueba el contraste del texto.
- Para poner el selector en tu web, ajusta sus opciones en Insertar este selector y copia el código.
¿Qué formato de color debo usar?
- HEX es la forma corta que se usa en CSS y en las herramientas de diseño.
- RGB indica los canales rojo, verde y azul, útil cuando una herramienta pide números.
- HSL es más fácil de ajustar a mano: cambia la luminosidad para obtener un tinte o un tono más oscuro.
- OKLCH es perceptualmente uniforme, así que los pasos de luminosidad iguales se ven iguales. Todos los navegadores principales actuales lo admiten.
Insertar el selector
El código para insertar es un elemento personalizado autocontenido, sin librerías ni peticiones externas. Pégalo en cualquier página, escucha el evento input y lee event.detail.value. Sus estilos viven en un shadow root, así que no pueden chocar con los de tu sitio. En Webflow, Copy to Webflow lo pega como un elemento Embed.
¿Necesitas más? Convierte valores con el Conversor de color, mezcla dos colores con el Mezclador de color, extrae una paleta de una foto con la Paleta de colores de imagen o comprueba la legibilidad con el Comprobador de contraste.
También se busca como: selector de color html, selector de color hex, selector de color rgb, selector de color online, selector de color de pantalla, insertar selector de color, selector de color javascript.
Herramientas que combinan con: Selector de color
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
- Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.
- Variables CSS a Tailwind — Convierte tus variables de color :root en un tema de Tailwind de un solo pegado: Tailwind v3 con tailwind.config.js o v4 con @theme, con valores literales o referencias var().
Preguntas frecuentes
¿Cómo tomo un color de mi pantalla?
Pulsa el botón del cuentagotas en el selector y haz clic en cualquier parte de tu pantalla. Funciona en Chrome y Edge en escritorio. Otros navegadores abren su propio diálogo de color, que puede incluir un selector de pantalla.
¿Puedo usar el selector insertado en un sitio comercial?
Sí. El código es gratuito para proyectos personales y comerciales, sin necesidad de atribución.
¿Cómo leo el color elegido desde el código insertado?
Añade un listener del evento input al elemento y lee event.detail.value, o consulta su propiedad value en cualquier momento.
¿El código insertado carga algo desde devpack?
No. Todo está dentro del fragmento que pegas, así que sigue funcionando si te desconectas.
¿Puedo instalar Selector de color como aplicación web y utilizarla sin conexión?
Sí. Selector de color es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.