Selector de color
Arrastra en el campo de color y en la barra de tono, o escribe cualquier código, y todos los formatos se actualizan al instante: HEX, RGB, HSL, HSV y CMYK. Toma un color de cualquier parte de tu pantalla con el cuentagotas, guarda tus favoritos y copia CSS listo para usar.
Última actualización:
Tintes mezclados con blanco
Sombras mezcladas con negro
Armonías
Cómo usar Selector de color
- Elige un tono en la barra arcoíris y luego arrastra el círculo en el campo grande: de izquierda a derecha aumenta la saturación y de abajo arriba aumenta el brillo.
- O escribe un código: pega un valor HEX, números RGB, HSL, HSV o CMYK y el selector salta a ese color.
- Toma un color de tu pantalla con el botón Tomar de la pantalla y haz clic en cualquier píxel de cualquier ventana (compatible con Chrome, Edge y Opera).
- Copia el formato que necesites con su botón Copiar. Haz clic en un tinte, sombra o color armónico para cargarlo.
- Guarda los colores que te gusten con Guardar muestra. Se quedan en este navegador para la próxima vez y puedes copiarlos todos como variables CSS.
Formatos de color explicados
| Formato | Ejemplo | Qué significan los números | Se usa en |
|---|---|---|---|
| HEX | #2F6B4F | Rojo, verde y azul con dos dígitos hexadecimales cada uno (00 a FF). Un 4.º par opcional indica la opacidad. | CSS, HTML, herramientas de diseño |
| RGB | rgb(47, 107, 79) | Luz roja, verde y azul de 0 a 255. | CSS, pantallas, código |
| HSL | hsl(152, 39%, 30%) | Ángulo de tono de 0 a 360°, saturación y luminosidad en %. Una luminosidad del 50% es el color puro. | CSS, temas |
| HSV / HSB | hsv(152, 56%, 42%) | Tono, saturación y valor (brillo). Un valor del 100% es la versión más brillante del tono. | Photoshop, Figma, selectores de color |
| CMYK | cmyk(56%, 0%, 26%, 58%) | Cobertura de tinta cian, magenta, amarilla y key (negra) en %. | Diseño para impresión |
Fórmulas de conversión
Todas las conversiones parten de valores RGB escalados de 0 a 1 (R' = R / 255, y así sucesivamente), con max = el mayor y min = el menor de R', G', B'.
- Tono (igual en HSL y HSV): si max = R', H = 60 × ((G' − B') / (max − min) mod 6); si max = G', H = 60 × ((B' − R') / (max − min) + 2); si max = B', H = 60 × ((R' − G') / (max − min) + 4).
- HSV: V = max, S = (max − min) / max (0 cuando max = 0).
- HSL: L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|) (0 para los grises).
- CMYK: K = 1 − max, C = (1 − R' − K) / (1 − K), M = (1 − G' − K) / (1 − K), Y = (1 − B' − K) / (1 − K).
Al redondear a números enteros, convertir de un formato a otro y viceversa puede desplazar un valor un paso; el selector guarda internamente el valor exacto para que el color no se desvíe mientras arrastras.
Tintes, sombras y armonías
Un tinte es el color mezclado con blanco y una sombra es el color mezclado con negro. Las franjas de arriba mezclan en pasos del 10% en RGB, lo que da una escala uniforme para botones, estados hover y fondos. Los grupos de armonía giran el tono alrededor de la rueda de color manteniendo la saturación y el brillo: el complementario está a 180°, el triádico usa pasos de 120°, el análogo usa vecinos a 30°, el complementario dividido usa 150° y 210°, y el tetrádico usa pasos de 90°. Para más opciones, abre la Rueda de color o el Generador de tonos de color.
Preguntas frecuentes
¿Cómo tomo un color de mi pantalla?
Haz clic en Tomar de la pantalla y luego en cualquier píxel de tu pantalla, incluso fuera de la ventana del navegador. Usa la función EyeDropper del navegador, disponible en Chrome, Edge y Opera para escritorio. En Firefox y Safari, haz una captura de pantalla y usa la herramienta Image Color Picker.
¿Cuál es la diferencia entre HSL y HSV?
Ambos usan el mismo ángulo de tono. En HSV (también llamado HSB) un valor del 100% es la versión más brillante del color, así que el rojo puro es hsv(0, 100%, 100%). En HSL, una luminosidad del 100% siempre es blanco y el rojo puro es hsl(0, 100%, 50%). Las aplicaciones de diseño como Photoshop usan HSB en sus selectores, mientras que CSS usa HSL.
¿Por qué los valores CMYK no coinciden con mi impresora?
Esta herramienta usa la fórmula simple de RGB a CMYK, independiente del dispositivo: K = 1 - max(R, G, B) y C = (1 - R - K) / (1 - K), y así sucesivamente. La impresión real usa perfiles de color ICC para una máquina y un papel concretos, así que una imprenta puede darte números algo distintos. Usa estos valores como punto de partida.
¿Cómo aparece la opacidad en los códigos?
Cuando la opacidad es inferior al 100%, el código HEX recibe un cuarto par de dígitos (por ejemplo, #2F6B4F80 es aproximadamente un 50% de opacidad), y rgb() y hsl() reciben un valor alfa. Todos los navegadores modernos admiten estos formatos en CSS.
¿Mis colores guardados son privados?
Sí. Las muestras guardadas se almacenan solo en el almacenamiento local de tu navegador en este dispositivo. No se envía nada a ningún servidor, y al borrar los datos del navegador se eliminan.
¿Qué significa la relación de contraste?
Es la relación de contraste WCAG 2 entre el color elegido y un texto blanco o negro. El texto normal necesita al menos 4.5:1 para cumplir el nivel AA y 7:1 para AAA; el texto grande necesita 3:1.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.