Selector de color
Elige cualquier color y obtén valores HEX, RGB, HSL al instante. Haz clic en el espectro, ajusta el matiz, copia el código.
Cómo usar el selector de color
Elige
Haz clic en cualquier parte del espectro de color para seleccionar un color. Usa el control deslizante de matiz debajo para cambiar el matiz base.
Lee
Los valores HEX, RGB, HSL y CSS se actualizan al instante. También puedes escribir un código HEX directamente en el campo de entrada.
Copia
Haz clic en el botón de copiar junto a cualquier valor para copiarlo al portapapeles. Los colores recientes se guardan en la cinta del historial.
Referencia de formatos de color
| Formato | Ejemplo | Usado en | Ventaja |
|---|---|---|---|
| HEX | #FF5733 | CSS, HTML, herramientas de diseño | Compacto, ampliamente reconocido |
| RGB | rgb(255, 87, 51) | CSS, JavaScript, Photoshop | Coincide con cómo las pantallas muestran el color |
| HSL | hsl(11, 100%, 60%) | CSS, sistemas de diseño modernos | Intuitivo para ajustar (matiz, saturación, luminosidad) |
Casos de uso comunes
Desarrollo web
Elige colores para hojas de estilos CSS, componentes React y diseño de tokens. Copia valores HEX u HSL directamente en tu código.
Diseño gráfico
Encuentra valores de color exactos para Figma, Photoshop, Illustrator o Canva. Haz coincidir colores de marca ingresando un código HEX conocido.
Presentaciones
Elige colores complementarios para PowerPoint o Google Slides. Usa el espectro para encontrar colores que funcionen bien juntos.
Redes sociales
Haz coincidir colores de marca para gráficos de redes sociales, banners y elementos de perfil. Copia valores CSS para herramientas de diseño basadas en web.