Selector de color
Elige un color con la rueda del sistema o los controles H / S / L y cópialo como HEX, RGB, RGBA, HSL o HSLA. Todo se ejecuta en tu navegador y no se sube nada.
Valores de color
- HEX
#3B82F6- HEX8
#3B82F6FF- RGB
rgb(59, 130, 246)- RGBA
rgba(59, 130, 246, 1)- HSL
hsl(217, 91%, 60%)- HSLA
hsla(217, 91%, 60%, 1)
Qué hace un selector de color
Un selector de color convierte una elección visual en un código que tu proyecto puede usar. Mueve la rueda o los controles de matiz, saturación y luminosidad hasta que la muestra te convenza y los valores HEX, RGB, HSL y RGBA se actualizan al momento.
El color se guarda una sola vez, así que todos los formatos se mantienen sincronizados. También funciona al revés: pega un valor HEX, rgb() o hsl() y la rueda y los controles saltan a ese color.
Cómo elegir un color
- Abre la rueda de color o arrastra los controles de matiz, saturación y luminosidad.
- Escribe un código en el campo de texto si ya sabes cuál quieres.
- Mueve el control de alfa para añadir transparencia; la muestra se apoya en un tablero de cuadros para que se vea el resultado.
- Copia el formato que necesites desde las filas HEX, HEX8, RGB, RGBA, HSL o HSLA.
Ejemplos del selector de color
De código hex a rgb()
#3B82F6
rgb(59, 130, 246)
De HSL a hex
hsl(217, 91%, 60%)
#3C83F6
Azul semitransparente
rgba(59, 130, 246, 0.5)
#3B82F680
UrsaKit frente a otros selectores de color
| Criterio | UrsaKit | colorpicker.me | htmlcolorcodes.com | RapidTables |
|---|---|---|---|---|
| Precio | Gratis | Gratis | Gratis con anuncios | Gratis |
| Rueda nativa del sistema | Sí | No | No | No |
| Controles HSL | Sí, un juego | Sí, RGB y HSL | Sí | Parcial |
| Canal alfa | Sí | Parcial | Sí | Sí |
| Copiar cada formato | Sí | Parcial | Parcial | No |
| Sube tu color | No | No | No | No |
Preguntas frecuentes
¿El selector de color es gratis?
Sí. Se ejecuta por completo en tu navegador, sin cuenta y sin límite de colores.
¿Puedo escribir un código en lugar de usar la rueda?
Sí. Escribe o pega un valor HEX, rgb(), rgba(), hsl() o hsla() y la rueda y los controles se mueven a ese color.
¿Cómo añado transparencia?
Mueve el control de alfa. La vista previa se apoya en un tablero de cuadros y las filas HEX8, RGBA y HSLA se actualizan a la vez.
¿Se guarda o se sube mi color?
No. No se almacena nada ni se envía a ningún servidor; el color solo vive en esta página mientras está abierta.
¿Puedo tomar un color de una imagen?
Aquí no. Leer un color de una foto obliga a subir o abrir un archivo de imagen, algo que esta herramienta evita a propósito.
¿Qué formato debería copiar?
HEX o HEX8 para CSS y herramientas de diseño, rgb() o rgba() para canvas y JavaScript, y hsl() cuando construyes un tema a partir de varios matices.