Selector de colores profesional: conversión HEX, RGB, HSL y más

Elige colores, convierte formatos y crea paletas armónicas

Comprender los formatos de color HEX, RGB, HSL y RGBA

Nuestro selector de colores admite todos los formatos de color habituales y los convierte en tiempo real:

HEX: Representación hexadecimal (p. ej. #3B82F6): estándar en el diseño web
RGB: Valores de rojo, verde y azul de 0-255 (p. ej. rgb(59, 130, 246))
RGBA: RGB con canal alfa para transparencia (p. ej. rgba(59, 130, 246, 0.8))
HSL: Matiz, saturación, luminosidad: intuitivo para diseñadores
HSLA: HSL con canal alfa para transparencia

Contrastes de color accesibles con comprobación WCAG

Nuestro selector de colores admite todos los formatos de color habituales y los convierte en tiempo real:

Estándar AA: Relación de contraste de al menos 4.5:1 para texto normal
Estándar AA (grande): Relación de contraste de al menos 3:1 para texto grande (desde 18px)
Estándar AAA: Relación de contraste de al menos 7:1 para requisitos elevados

Nuestra herramienta te muestra al instante si tu combinación de colores cumple los estándares AA o AAA y te ayuda a crear diseños inclusivos y accesibles.

Armonías de color para diseños perfectos

Nuestra herramienta te muestra al instante si tu combinación de colores cumple los estándares AA o AAA y te ayuda a crear diseños inclusivos y accesibles.

Complementario: Colores opuestos en el círculo cromático: alto contraste
Análogo: Colores adyacentes: paletas armónicas y relajantes
Triádico: Tres colores con la misma distancia: vivos y equilibrados
Monocromático: Diferentes niveles de luminosidad de un color: elegante y minimalista

Shades y Tints: gradaciones de color

La función genera automáticamente 10 gradaciones del color elegido. Los Shades (tonos más oscuros) y Tints (tonos más claros) te ayudan a crear sistemas de color coherentes para tus proyectos.

Cuentagotas e historial de colores

Con el puedes tomar colores directamente de tu pantalla. El guarda tus últimos 10 colores seleccionados localmente en el navegador, para que puedas acceder rápidamente a colores usados anteriormente.

Opciones de exportación para desarrolladores

La función genera automáticamente 10 gradaciones del color elegido. Los Shades (tonos más oscuros) y Tints (tonos más claros) te ayudan a crear sistemas de color coherentes para tus proyectos.

Variables CSS: :root { --primary-color: #3b82f6; }
Tailwind Config: Configuración directamente copiable para Tailwind CSS

Preguntas frecuentes (FAQ)

¿Es realmente gratuito el selector de colores?

Nuestro selector de colores es 100% gratuito. No hay costes ocultos, ni registro, ni limitaciones de uso. Puedes usar todas las funciones sin límite.

¿Se guardan mis colores?

El historial de colores se guarda localmente en tu navegador. Puedes borrarlo en cualquier momento a través de los ajustes del navegador. No se transfieren datos a servidores.

¿Funciona el cuentagotas en todos los navegadores?

En Chrome, Edge y Opera se utiliza la API EyeDropper nativa, con la que puedes tomar colores directamente de la pantalla. En Firefox y otros navegadores sin esta API puedes subir una imagen (o arrastrarla y soltarla) y tomar colores de ella. Esto es una restricción de seguridad del navegador: JavaScript no puede acceder a la pantalla fuera de la ventana del navegador.

¿Cómo de preciso es el comprobador de contraste WCAG?

El comprobador de contraste calcula la relación de contraste según las directrices oficiales WCAG 2.1 y tiene en cuenta la luminancia relativa de los colores según el estándar W3C.

¿Puedo usar este herramienta en mi propia página web?

¡Sí, absolutamente! Puedes incrustar Selector de colores y conversor de color gratis en tu propio sitio web, simplemente con un iframe. En la página de Embed-Widgets encontrarás el código de inserción listo y podrás personalizar colores y estilo.