Professioneller Colorpicker

Professioneller Colorpicker - HEX, RGB, HSL Konvertierung & mehr

Wähle Farben, konvertiere Formate und erstelle harmonische Paletten

HEX, RGB, HSL und RGBA Farbformate verstehen

Unser Colorpicker unterstützt alle gängigen Farbformate und konvertiert diese in Echtzeit:

• HEX: Hexadezimale Darstellung (z.B. #3B82F6) – Standard im Webdesign 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: Rot, Grün, Blau Werte von 0-255 (z.B. 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 mit Alpha-Kanal für Transparenz (z.B. 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: Farbton, Sättigung, Helligkeit – intuitiv für Designer Hue, saturation, lightness – intuitive for designersHSL: Hue, saturation, lightness – intuitive for designers Farbton, Sättigung, Helligkeit – intuitiv für Designer
• HSLA: HSL mit Alpha-Kanal für Transparenz HSL with alpha channel for transparencyHSLA: HSL with alpha channel for transparency HSL mit Alpha-Kanal für Transparenz

Barrierefreie Farbkontraste mit WCAG-Check

Unser Colorpicker unterstützt alle gängigen Farbformate und konvertiert diese in Echtzeit:

• AA-Standard: Kontrastverhältnis von mindestens 4.5:1 für normalen Text Contrast ratio of at least 4.5:1 for normal textAA-Standard: Contrast ratio of at least 4.5:1 for normal text Kontrastverhältnis von mindestens 4.5:1 für normalen Text
• AA-Standard (groß): Kontrastverhältnis von mindestens 3:1 für großen Text (ab 18px) Contrast ratio of at least 3:1 for large text (from 18px)AA-Standard (groß): 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)
• AAA-Standard: Kontrastverhältnis von mindestens 7:1 für erhöhte Anforderungen Contrast ratio of at least 7:1 for enhanced requirementsAAA-Standard: Contrast ratio of at least 7:1 for enhanced requirements Kontrastverhältnis von mindestens 7:1 für erhöhte Anforderungen

Unser Tool zeigt dir sofort, ob deine Farbkombination die AA- oder AAA-Standards erfüllt und hilft dir, inklusive und zugängliche Designs zu erstellen.

Farbharmonien für perfekte Designs

Unser Tool zeigt dir sofort, ob deine Farbkombination die AA- oder AAA-Standards erfüllt und hilft dir, inklusive und zugängliche Designs zu erstellen.

• Komplementär: Farben gegenüberliegen im Farbkreis – hoher Kontrast Colors opposite each other on the color wheel – high contrastKomplementär: Colors opposite each other on the color wheel – high contrast Farben gegenüberliegen im Farbkreis – hoher Kontrast
• Analog: Benachbarte Farben – harmonische und beruhigende Paletten Adjacent colors – harmonious and calming palettesAnalog: Adjacent colors – harmonious and calming palettes Benachbarte Farben – harmonische und beruhigende Paletten
• Triadisch: Drei Farben mit gleichem Abstand – lebendig und ausgewogen Three colors equally spaced – vibrant and balancedTriadisch: Three colors equally spaced – vibrant and balanced Drei Farben mit gleichem Abstand – lebendig und ausgewogen
• Monochromatisch: Verschiedene Helligkeitsstufen einer Farbe – elegant und minimalistisch Different lightness levels of one color – elegant and minimalistMonochromatisch: Different lightness levels of one color – elegant and minimalist Verschiedene Helligkeitsstufen einer Farbe – elegant und minimalistisch

Shades & Tints - Farbabstufungen

Die -Funktion generiert automatisch 10 Abstufungen deiner gewählten Farbe. Shades (dunklere Töne) und Tints (hellere Töne) helfen dir, konsistente Farbsysteme für deine Projekte zu erstellen.

Eyedropper und Farbhistorie

Mit der kannst du Farben direkt von deinem Bildschirm aufnehmen. Die speichert deine letzten 10 ausgewählten Farben lokal im Browser, sodass du schnell auf zuvor verwendete Farben zugreifen können.

Export-Optionen für Entwickler

Die -Funktion generiert automatisch 10 Abstufungen deiner gewählten Farbe. Shades (dunklere Töne) und Tints (hellere Töne) helfen dir, konsistente Farbsysteme für deine Projekte zu erstellen.

• CSS-Variablen: :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: Direkt kopierbare Konfiguration für Tailwind CSS Directly copyable configuration for Tailwind CSSTailwind Config: Directly copyable configuration for Tailwind CSS Direkt kopierbare Konfiguration für Tailwind CSS