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 Hexadecimal representation (e.g. #3B82F6) – standard in web designHEX:HEX: Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadezimale Darstellung (z.B. #3B82F6) – Standard im Webdesign
RGB: Valores de rojo, verde y azul de 0-255 (p. ej. rgb(59, 130, 246)) Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246))RGB:RGB: Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Rot, Grün, Blau Werte von 0-255 (z.B. rgb(59, 130, 246))
RGBA: RGB con canal alfa para transparencia (p. ej. rgba(59, 130, 246, 0.8)) RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8))RGBA:RGBA: RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB mit Alpha-Kanal für Transparenz (z.B. rgba(59, 130, 246, 0.8))
HSL: Matiz, saturación, luminosidad: intuitivo para diseñadores Hue, saturation, lightness – intuitive for designersHSL: Hue, saturation, lightness – intuitive for designers Farbton, Sättigung, Helligkeit – intuitiv für Designer
HSLA: HSL con canal alfa para transparencia HSL with alpha channel for transparencyHSLA: HSL with alpha channel for transparency HSL mit Alpha-Kanal für Transparenz

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 Contrast ratio of at least 4.5:1 for normal textEstándar AA: Contrast ratio of at least 4.5:1 for normal text Kontrastverhältnis von mindestens 4.5:1 für normalen Text
Estándar AA (grande): Relación de contraste de al menos 3:1 para texto grande (desde 18px) Contrast ratio of at least 3:1 for large text (from 18px)Estándar AA (grande): Contrast ratio of at least 3:1 for large text (from 18px) Kontrastverhältnis von mindestens 3:1 für großen Text (ab 18px)
Estándar AAA: Relación de contraste de al menos 7:1 para requisitos elevados Contrast ratio of at least 7:1 for enhanced requirementsEstándar AAA: Contrast ratio of at least 7:1 for enhanced requirements Kontrastverhältnis von mindestens 7:1 für erhöhte Anforderungen

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 Colors opposite each other on the color wheel – high contrastComplementario: Colors opposite each other on the color wheel – high contrast Farben gegenüberliegen im Farbkreis – hoher Kontrast
Análogo: Colores adyacentes: paletas armónicas y relajantes Adjacent colors – harmonious and calming palettesAnálogo: Adjacent colors – harmonious and calming palettes Benachbarte Farben – harmonische und beruhigende Paletten
Triádico: Tres colores con la misma distancia: vivos y equilibrados Three colors equally spaced – vibrant and balancedTriádico: Three colors equally spaced – vibrant and balanced Drei Farben mit gleichem Abstand – lebendig und ausgewogen
Monocromático: Diferentes niveles de luminosidad de un color: elegante y minimalista Different lightness levels of one color – elegant and minimalistMonocromático: Different lightness levels of one color – elegant and minimalist Verschiedene Helligkeitsstufen einer Farbe – elegant und minimalistisch

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; } :root { --primary-color: #3b82f6; }CSS variables:CSS variables: :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; }
Tailwind Config: Configuración directamente copiable para Tailwind CSS Directly copyable configuration for Tailwind CSSTailwind Config: Directly copyable configuration for Tailwind CSS Direkt kopierbare Konfiguration für 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. (oder per Drag & Drop hineinziehen) und daraus Farben aufnehmen. Dies ist eine Browser-Sicherheitsbeschränkung – JavaScript kann nicht auf den Bildschirm außerhalb des Browser-Fensters zugreifen.

¿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. guidelines and takes into account the relative brightness of colors according to the W3C standard.The contrast checker calculates the contrast ratio according to the official WCAG 2.1 guidelines and takes into account the relative brightness of colors according to the W3C standard. Richtlinien und berücksichtigt die relative Helligkeit von Farben nach dem W3C-Standard.