Selector de Color
Selector de color gratuito — elige cualquier color visualmente y obtén al instante los códigos HEX, RGB, HSL, HSV y CMYK. Genera sombras, tintes, armonías y...
Actualizado mayo de 2026
Revisado por Rafael Duarte
This color meets WCAG 2.1 AA standards for normal text (4.5:1) on at least one background.
Shades & Tints
Color Harmonies
Cómo usarlo
Lienzo visual, cinco formatos en tiempo real
1. Haz clic o arrastra en el lienzo
La saturación se mueve en el eje X y el brillo en el Y — ajusta el matiz con la barra arcoíris de abajo.
2. O escribe un código hex directo
Pega cualquier código de 6 dígitos y el selector salta de inmediato a ese color exacto.
3. Copia y explora variaciones
HEX, RGB o HSL con un clic; revisa sombras, tintes y armonías en los paneles inferiores.
Qué hace esta herramienta
Cinco formatos de color, sombras, tintes y verificación WCAG
HEX, RGB, HSL, HSV y CMYK
Además de LAB, valor decimal y la versión web-safe — todos se actualizan al mismo tiempo, en vivo.
Sombras y tintes
10 variaciones más oscuras y 10 más claras a partir del color seleccionado.
5 armonías de color
Complementaria, análoga, triádica, split-complementaria y tetrádica.
Verificador de contraste WCAG
Indica si el color cumple la proporción 4.5:1 del nivel AA sobre fondo blanco y negro.
Nombre CSS más cercano
Calcula la distancia euclidiana en RGB para sugerir la palabra clave CSS más parecida.
100% en el navegador
Sin registro, sin instalar nada — todo el cálculo ocurre en tu dispositivo.
Ejemplos de conversión
Cuándo vas a necesitarlo
Los escenarios más comunes entre quienes usan la herramienta
Desarrollo web y UI
Copia HEX o RGB directo a tu CSS, a la config de Tailwind o a tus design tokens.
Auditoría de accesibilidad
El verificador WCAG detecta problemas de contraste antes de que lleguen a producción.
Creación de design systems
Usa el panel de sombras y tintes para armar una rampa de color completa.
Preparación para impresión
Los valores CMYK muestran cómo se traduce tu color de pantalla a tinta.
Capturar un color de cualquier parte de la pantalla
Usa el cuentagotas (Eye Dropper) para tomar el color exacto de una imagen, sitio web o app abierta en el navegador, sin necesidad de una captura de pantalla externa.
Errores comunes
Confundir HSL con HSV
Ambos comparten matiz y saturación, pero el tercer eje es distinto — mira la comparación más abajo.
Creer que el nombre CSS más cercano es una coincidencia exacta
Es la palabra clave más parecida según distancia RGB, no necesariamente el mismo color.
Esperar que el CMYK reproduzca la pantalla al pie de la letra
Algunos azules y verdes muy vivos quedan fuera de la gama imprimible.
Intentar usar el cuentagotas en Firefox o Safari
El botón Eye Dropper depende de la Eye Dropper API nativa del navegador, disponible hoy solo en Chrome, Edge y otros navegadores basados en Chromium.
Creer que la paleta guardada y el historial sobreviven a un recargo de página
Los colores guardados y el historial de selecciones viven solo en la memoria de la pestaña actual — copia los códigos a donde los vayas a usar antes de cerrar o recargar.
Pensar que el color "Web Safe" sigue siendo obligatorio hoy
Es un resto de la paleta de 216 colores para monitores de 8 bits de los años 90 — las pantallas actuales muestran millones de colores sin esa limitación.
Por qué usar esta herramienta
Junta conversión de formatos, sombras/tintes, exploración de armonías y verificación de contraste WCAG en una sola página — la mayoría de los selectores de color solo convierten formatos.
Muestra HSL y HSV al mismo tiempo, así no tienes que adivinar cuál espera CSS frente a cuál usa internamente Photoshop.
Además de convertir, puedes capturar cualquier color de la pantalla con el cuentagotas, guardar hasta 20 colores en una paleta y volver al historial de las últimas selecciones — todo sin salir de la página.
HSL vs. HSV
Comparten los dos primeros ejes, el tercero es diferente
Preguntas frecuentes
Es la representación hexadecimal de 6 dígitos de un color RGB (#RRGGBB). Cada par de caracteres representa un canal — RR el rojo, GG el verde, BB el azul, de 00 a FF.
Referencias
Referencia completa de todos los formatos de color aceptados en CSS.
Documentación oficial sobre el requisito de contraste 4.5:1 para texto normal.
Explica el modelo LAB usado en el panel de especificaciones técnicas del selector y por qué es perceptualmente más uniforme que RGB.
Herramientas relacionadas
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
