Selector de Color
Elige cualquier color y copia al instante su valor en formato HEX, RGB o HSL.
¿Qué es un Selector de Color?
Un selector de color es una herramienta digital que te permite seleccionar visualmente un color y traducirlo de inmediato a códigos numéricos y sintaxis de desarrollo. Es utilizado por diseñadores UI/UX, desarrolladores frontend y artistas digitales para garantizar precisión cromática en pantallas y código.
¿Qué ofrece esta herramienta?
- Selección Visual Intuitiva: Haz clic y arrastra sobre el lienzo cromático para definir el matiz, la saturación y la luminosidad deseadas.
- Conversión Instantánea: Obtén al instante códigos HEX, RGB y HSL listos para pegar en CSS, Tailwind o Figma.
- Privacidad Total en el Navegador: Todos los cálculos se procesan en tu propio navegador. Ningún dato viaja a servidores externos.
Herramientas Relacionadas
Para extraer colores directamente de una foto o captura de pantalla, prueba nuestro Selector de Color desde Imagen. Para verificar que tus textos cumplen con la ley de accesibilidad web, usa el Verificador de Contraste WCAG.
Base de Conocimiento & FAQ
Preguntas Frecuentes
Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.
¿Cómo calculo el color complementario, análogo o triádico exacto a partir de mi código HEX?expand_more
Los cálculos de armonía de color se basan en rotaciones angulares sobre la rueda cromática de 360 grados:
- Complementario: Rota el matiz en 180° (ej.
(hue + 180) % 360). Un azul a 240° se complementa con un naranja brillante a 60°. - Análogo: Rota en ±30°. Un verde a 120° combina armónicamente con verde lima (90°) y turquesa (150°).
- Triádico: Rota en +120° y +240° formando un triángulo de alto impacto visual y equilibrio estético.
¿Qué es un código HEX de 8 caracteres y cómo se interpreta?expand_more
Un código hexadecimal de 8 caracteres (como
#4F46E580) incluye un canal alfa (transparencia). Los primeros 6 caracteres representan Rojo, Verde y Azul (#RRGGBB), mientras que los últimos 2 representan la opacidad entre 00 (0% / totalmente transparente) y FF (100% / totalmente opaco). Por ejemplo, 80 equivale a 128 en decimal, lo que representa un 50% de opacidad.¿Cuál es la diferencia entre HSV (HSB) y HSL en los selectores de color?expand_more
Aunque ambos derivan de RGB:
- HSV / HSB (Matiz, Saturación, Valor/Brillo): Mide el brillo a partir del canal de color más intenso. Es el modelo estándar en los lienzos 2D de diseño digital (Photoshop, Figma).
- HSL (Matiz, Saturación, Luminosidad): Distribuye la luz simétricamente donde 0% es negro puro, 50% es el color puro y 100% es blanco puro. Es nativamente compatible con CSS a través de
hsl().
¿Cómo genero tonos más claros (tints) y sombras más oscuras (shades) armoniosas?expand_more
Para crear escalas sin que los colores se vuelvan turbios:
- Tonos Claros (Tints): Mantén el matiz fijo y aumenta la luminosidad hacia el 100% reduciendo ligeramente la saturación para evitar saturaciones fluorescentes.
- Sombras Oscuras (Shades): Reduce la luminosidad hacia el 0% rotando levemente el matiz hacia tonos fríos (como índigo o azul profundo) en lugar de agregar negro puro.