Selector de color online
Elige un color de forma visual, ajusta su tono, saturación, brillo y transparencia, y copia el código en HEX, RGB, HSL o HSV. Si tu navegador lo permite, captura cualquier color de la pantalla con el cuentagotas.
Tintes y sombras (pulsa para usarlo)
Historial
Cómo usar el selector de color
- Elige el tono con el primer deslizador: 0° es rojo, 60° amarillo, 120° verde, 180° cian, 240° azul y 300° magenta.
- Ajusta saturación y brillo en el recuadro: hacia la derecha el color es más puro, hacia la izquierda más gris; hacia arriba más claro y hacia abajo más oscuro.
- Define la opacidad si vas a usar el color sobre otros elementos. El código pasa a HEX de 8 dígitos y a
rgba(). - Copia el formato que necesites o guarda el color en el historial para compararlo con otros.
También puedes pegar un HEX en el campo de texto para partir de un color conocido, por ejemplo el de tu logotipo. Si tu color está en otro formato (CMYK, HSL, OKLCH), pásalo primero por el conversor de colores.
Cómo funciona: el modelo HSV
El recuadro representa el modelo HSV (tono, saturación, valor), el mismo que usan Photoshop, GIMP o Figma en sus selectores. Para un tono fijo, cada punto se convierte a RGB así:
canal(n) = V − V × S × máx(0, mín(k, 4 − k, 1)) · k = (n + H ÷ 60) mod 6 · n = 5 (R), 3 (G), 1 (B)
Por ejemplo, H = 160°, S = 90 % y V = 48 % dan rgb(12, 122, 86), es decir, #0C7A56: un verde esmeralda oscuro. La esquina superior derecha es siempre el color más puro del tono elegido, la superior izquierda es blanco y todo el borde inferior es negro.
Bajo los códigos se muestra el contraste del color con blanco y con negro según la fórmula WCAG. Si vas a usarlo como fondo de un botón, elige el texto que supere 4,5:1, o compruébalo con más detalle en el comprobador de contraste.
Tintes, sombras y transparencia
La fila de tintes y sombras mezcla el color base con blanco (a la izquierda) y con negro (a la derecha) en pasos del 20 %. Es la forma clásica de construir una escala para una interfaz:
| Uso habitual | Variación recomendada |
|---|---|
| Fondo de aviso o etiqueta | Tinte del 80 % |
| Borde o separador de color | Tinte del 40–60 % |
| Botón principal | Color base |
| Botón al pasar el ratón (hover) | Sombra del 20 % |
| Texto sobre fondo claro | Sombra del 40–60 % |
Para escalas más uniformes entre tonos distintos, o para combinaciones complementarias y triádicas, usa el generador de paletas. Si quieres un punto intermedio exacto entre dos colores, el mezclador de colores calcula la mezcla en varios espacios.
El cuentagotas de pantalla
El botón de cuentagotas usa la API EyeDropper del navegador: te deja capturar el color de cualquier píxel visible, incluso de otra aplicación. Por privacidad, el navegador solo entrega el color del punto que pulsas y únicamente después de tu clic. Si no aparece el botón, tu navegador no lo admite todavía; como alternativa, haz una captura de pantalla y súbela a colores de una imagen, que también extrae la paleta dominante.
Ojo con los perfiles de color: en pantallas de gama amplia (P3) el cuentagotas puede devolver un HEX ligeramente distinto al que ves en otra pantalla. Los códigos que muestra esta herramienta están siempre en sRGB, el espacio estándar de la web.
Preguntas frecuentes
¿Cómo copio el color de algo que veo en la pantalla?
Pulsa Cuentagotas y haz clic en cualquier punto de la pantalla, incluso fuera del navegador. Funciona en Chrome, Edge y Opera de escritorio; en Firefox y Safari usa el selector visual o sube una captura a la herramienta de colores de una imagen.
¿Qué significan los 8 dígitos de un HEX?
Los seis primeros son rojo, verde y azul, y los dos últimos el canal alfa (opacidad). #0B7A6280 es el mismo verde con un 50 % de opacidad, porque 80 en hexadecimal es 128, la mitad de 255.
¿Qué diferencia hay entre un tinte y una sombra?
Un tinte se obtiene mezclando el color con blanco, y una sombra, mezclándolo con negro. Son la forma más rápida de crear estados hover, fondos suaves o bordes a partir de un color de marca.
¿Se guardan mis colores?
Solo en tu navegador (localStorage). El historial no se envía a ningún servidor y puedes borrarlo con el botón Vaciar.