So nutzt du: Farbwähler
- Ziehe im Farbfeld und bewege den Farbtonregler, gib einen HEX-Wert ein oder nutze die Pipette, um eine Farbe von deinem Bildschirm zu übernehmen.
- Klicke auf eine beliebige Zeile, um die Farbe als HEX, RGB, HSL oder OKLCH zu kopieren.
- Nutze die Schattierungen und Harmonien, um eine Palette aufzubauen, und prüfe den Textkontrast.
- Um den Picker auf deine Seite zu bringen, stelle seine Optionen unter Diesen Picker einbetten ein und kopiere den Code.
Welches Farbformat sollte ich verwenden?
- HEX ist die Kurzform, die in CSS und Design-Tools überall verwendet wird.
- RGB liefert die Rot-, Grün- und Blaukanäle und ist praktisch, wenn ein Tool Zahlenwerte verlangt.
- HSL lässt sich leichter von Hand anpassen: Ändere die Helligkeit, um eine Tönung oder Schattierung zu erhalten.
- OKLCH ist wahrnehmungsgleichmäßig, sodass gleich große Helligkeitsschritte auch gleich wirken. Alle aktuellen großen Browser unterstützen es.
Den Picker einbetten
Der Embed-Code ist ein in sich geschlossenes Custom Element ohne Bibliothek und ohne externe Anfragen. Füge ihn in eine beliebige Seite ein, höre auf das input-Ereignis und lies event.detail.value aus. Die Styles liegen in einem Shadow Root und können daher nicht mit deiner Seite kollidieren. In Webflow fügt Für Webflow kopieren den Code als Embed-Element ein.
Brauchst du mehr? Werte mit dem Farbkonverter um, vermische zwei Farben mit dem Farbmischer, ziehe eine Palette aus einem Foto mit der Bildfarbpalette oder prüfe die Lesbarkeit mit dem Kontrastprüfer.
Auch gesucht als: farbwähler online, html farbwähler, hex farbwähler, rgb farbwähler, farbwähler vom bildschirm, farbwähler einbetten, color picker javascript.
Passende Tools zu: Farbwähler
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
- HEX zu RGBA Konverter — Füge einen HEX-Code ein, zieh den Deckkraft-Regler und kopiere das genaue CSS, das du brauchst: klassisches rgba(), modernes rgb( / alpha) oder 8-stelliges HEX.
- CSS-Variablen zu Tailwind — Verwandle deine :root-Farbvariablen mit einem Einfügen in ein Tailwind-Theme: als Tailwind-v3-tailwind.config.js oder v4-@theme, wahlweise mit festen Werten oder var()-Referenzen.
Häufige Fragen
Wie wähle ich eine Farbe von meinem Bildschirm aus?
Drücke im Picker auf die Pipette und klicke irgendwo auf deinen Bildschirm. Das funktioniert in Chrome und Edge auf dem Desktop. Andere Browser öffnen ihren eigenen Farbdialog, der eventuell einen Bildschirm-Picker enthält.
Darf ich den eingebetteten Picker auf einer kommerziellen Seite verwenden?
Ja. Der Code ist für private und kommerzielle Projekte kostenlos, eine Namensnennung ist nicht nötig.
Wie lese ich die gewählte Farbe aus dem Embed aus?
Füge dem Element einen input-Event-Listener hinzu und lies event.detail.value aus, oder greife jederzeit auf die Eigenschaft value zu.
Lädt das Embed etwas von devpack?
Nein. Alles steckt im Snippet, das du einfügst, daher funktioniert es auch offline weiter.
Kann ich Farbwähler als Web-App installieren und offline nutzen?
Ja. Farbwähler ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.