HTML-Farbwähler
VerfügbarWähle eine Farbe, sieh die Live-Vorschau und kopiere HEX-, RGB- oder HSL-Werte schnell.
Tool öffnen →
Kategorien
Farbe & Bild
Farbwähler, Paletten, Bildwerkzeuge und visuelle Helfer für alltägliche Designaufgaben.
Kategorieüberblick
Farbwähler, Paletten, Bildwerkzeuge und visuelle Helfer für alltägliche Designaufgaben. Von der Übersicht geht es ohne Umwege zu Kategorie, Guide und Tool.
Warum diese Kategorie nützlich ist
- Praktisch für schnelle Browser-Aufgaben.
- Verbindet Tools und Guides.
- Gut lesbar auch für Einsteiger.
Alle Tools
Tools in dieser Kategorie
Farbwähler, Paletten, Bildwerkzeuge und visuelle Helfer für alltägliche Designaufgaben.
Bildfarb-Extraktor
VerfügbarLade ein Bild hoch, klicke auf eine Stelle und lies die genaue Farbe unter dem Cursor aus.
Tool öffnen →
Paletten-Generator
VerfügbarWähle eine Basisfarbe und erstelle eine ausgewogene Palette für UI, Branding oder Content.
Tool öffnen →
Kontrast-Prüfer
VerfügbarVergleiche Text- und Hintergrundfarben, um Kontrastwerte und WCAG-Stufen zu prüfen.
Tool öffnen →
Verlaufs-Generator
VerfügbarKombiniere Farben, passe den Winkel an und kopiere sofort einen sauberen CSS-Verlauf.
Tool öffnen →
CSS-Variablen-Generator
VerfügbarErstelle Farb-Tokens, prüfe die Vorschau und kopiere fertige CSS-Variablen.
Tool öffnen →
Bildkompressor
VerfügbarKomprimiere JPG- oder PNG-Bilder im Browser und halte eine praktische Qualitätsbalance.
Tool öffnen →
WebP-Konverter
VerfügbarWandle gängige Bilddateien direkt im Browser in leichtes WebP um.
Tool öffnen →
Bildgrößen-Änderer
VerfügbarLege eine Zielgröße fest und exportiere ein PNG oder JPG für Web und Social Media.
Tool öffnen →
Guides
Passende Guides
Kurze Guides geben Kontext zu Bildformaten, Marketing-Links und Entwickler-Workflows.
Farb-Workflow
So verwendest du einen HTML-Farbwähler
Lerne einen einfachen Ablauf, um Farben auszuwählen, Werte zu vergleichen und das richtige Format für Web-Arbeit zu kopieren.
Ratgeber lesenBildanalyse
Leitfaden zum Bild-Farbextraktor
Nutze farbbasiertes Sampling aus Bildern, um Markenfarben, Referenzen und visuelle Inspiration präziser zu erfassen.
Ratgeber lesenBildformat
Was ist WebP?
Verstehe, was das Bildformat WebP ist, warum Teams es nutzen und wann es eine praktische Wahl fürs Web ist.
Ratgeber lesenBildformat
PNG vs. JPG vs. WebP: Welches Format solltest du nutzen?
Vergleiche PNG, JPG und WebP mit praktischen Regeln, um das passende Bildformat für den Webeinsatz zu wählen.
Ratgeber lesenBildformat
Wann WebP nicht das beste Bildformat ist
Erfahre, wann WebP ungeeignet ist und welche Alternativen sich für Bearbeitung, Archivierung und Kompatibilität besser eignen.
Ratgeber lesenWebP workflow
Die besten WebP-Qualitätseinstellungen für die Praxis
Praktische WebP-Qualitätsbereiche für Fotos, Blogbilder und UI-Assets nutzen.
Ratgeber lesenWebP workflow
JPG zu WebP vs PNG zu WebP: Was ist anders?
Warum JPG-zu-WebP und PNG-zu-WebP bei Qualität und Dateigröße unterschiedlich ausfallen.
Ratgeber lesenWebP workflow
Häufige WebP-Konvertierungsfehler vermeiden
Vermeide typische WebP-Fehler, die Qualität, Dateigröße und Konsistenz verschlechtern.
Ratgeber lesenWebP-Fehleranalyse
Warum dein WebP-Bild unscharf aussieht
Finde mit einer kurzen Checkliste heraus, warum WebP unscharf wirkt, und behebe es schnell.
Ratgeber lesenWebP-Workflow
So wählst du zwischen verlustbehaftetem und verlustfreiem WebP
Wähle den passenden WebP-Modus je Bildtyp mit einfachen Praxisregeln.
Ratgeber lesenBildoptimierung
So komprimierst du Bilder für schnellere Seiten
Eine praktische Anleitung, um Bildgrößen für Websites zu reduzieren und trotzdem gute Qualität zu behalten.
Ratgeber lesenBildoptimierung
Beste Bilddateigröße für Websites und Blogs
Praktische Größenziele für Hero-Bilder, Bloggrafiken und Thumbnails, damit Seiten schnell bleiben.
Ratgeber lesenBildoptimierung
Warum große Bilder deine Website verlangsamen
So wirken übergroße Bilddateien auf Ladezeit und so behebst du es mit einem einfachen Ablauf.
Ratgeber lesenImage optimization
So optimierst du Blogbilder vor dem Upload
Praktische Checkliste, um Blogbilder kleiner zu machen und trotzdem gut lesbar zu halten.
Ratgeber lesenImage optimization
Kompressionsfehler, die Bildqualität verschlechtern
Diese häufigen Fehler machen Webbilder unscharf oder unlesbar – und so vermeidest du sie.
Ratgeber lesenImage optimization
Bilder komprimieren, ohne dass sie schlecht aussehen
Dateigröße reduzieren und trotzdem eine klare, webtaugliche Bildqualität behalten.
Ratgeber lesenImage optimization
Beste Bildkomprimierungs-Einstellungen für Blog- und Website-Uploads
Praktische Standardwerte für Uploads, damit Bilder klar bleiben und Seiten schneller laden.
Ratgeber lesenImage optimization
Wann du ein Bild vor der Komprimierung skalieren solltest
Erkenne, wann Skalieren vor dem Komprimieren bessere Qualität und kleinere Dateien bringt.
Ratgeber lesenImage resizing
So skalierst du Social-Media-Bilder ohne falsches Zuschneiden
Passe Social-Bilder so an, dass Gesichter, Logos und Text nicht abgeschnitten werden.
Ratgeber lesenImage resizing
Beste Bildmaße für Blog-Header und Thumbnails
Lege klare Größen für Header und Thumbnails fest, damit dein Blog einheitlich und schneller wirkt.
Ratgeber lesenImage resizing
So änderst du die Bildgröße ohne Verzerrung
Halte das Seitenverhältnis korrekt, damit Fotos und Screenshots natürlich aussehen.
Ratgeber lesenBildoptimierung
So reduzierst du Bildgröße im Web ohne zu viel Qualitätsverlust
Mit einem einfachen Ablauf Bilder verkleinern und trotzdem eine saubere Darstellung behalten.
Ratgeber lesenIMAGE FORMAT
How to Convert Images to WebP
Learn how to convert images to WebP so you can reduce file size, improve page speed, and keep image workflows lightweight.
Ratgeber lesenColor workflow
HEX vs RGB vs HSL: Welches Farbformat passt?
Das passende Farbformat für CSS, Designsysteme und schnelle UI-Anpassungen.
Ratgeber lesenColor workflow
Website-Farben konsistenter abstimmen
Ein einfacher Prozess für stimmige Farben über Seiten und Komponenten hinweg.
Ratgeber lesenColor workflow
So erstellst du eine einfache Website-Farbpalette
Eine kleine, sofort nutzbare Palette für Buttons, Hintergründe und Text.
Ratgeber lesenColor workflow
Wie viele Farben braucht eine Markenpalette?
Finde eine praktikable Farbanzahl für konsistentes Design ohne Unruhe.
Ratgeber lesenColor workflow
So wählst du unterstützende Farben rund um eine Markenfarbe
Sekundär- und Neutralfarben aufbauen, ohne die Hauptfarbe zu verdrängen.
Ratgeber lesenColor workflow
Häufige Website-Palettenfehler
Vermeide typische Fehler, die Designs uneinheitlich wirken lassen.
Ratgeber lesenColor workflow
So baust du eine konsistente Farbpalette auf
Eine praktische Palettenstruktur für gleichbleibende Website-Gestaltung.
Ratgeber lesenCSS variable workflow
So nutzt du CSS-Variablen für wiederkehrende Farben
Ersetze wiederholte Farbwerte durch CSS-Variablen für schnellere und sauberere Updates.
Ratgeber lesenCSS variable workflow
CSS-Variablen vs. harte Werte: Was ist leichter wartbar?
Vergleiche CSS-Variablen mit hardcodierten Werten für bessere Wartbarkeit.
Ratgeber lesenCSS variable workflow
CSS-Variablen für eine kleine Website sinnvoll organisieren
Eine einfache, praxisnahe Struktur für CSS-Variablen auf kleinen Websites.
Ratgeber lesenColor workflow
Die besten Wege, Akzentfarben für eine Website zu wählen
Akzentfarben so wählen, dass sie Fokus schaffen ohne visuelles Chaos.
Ratgeber lesenColor workflow
So testest du eine Farbpalette vor dem Einsatz auf einer Website
Mit einem kurzen Vorabtest prüfen, ob Farben in echten UI-Zuständen funktionieren.
Ratgeber lesenColor workflow
Webfarbe schnell vom Bildschirm übernehmen
Farbe direkt vom Screen aufnehmen und in den CSS-Workflow einfügen.
Ratgeber lesenColor workflow
Häufige Color-Picker-Fehler im Webdesign
Typische Fehler vermeiden, die zu Inkonsistenz und Mehraufwand führen.
Ratgeber lesenColor workflow
Website-Farben sicherer auswählen
Ein praxisnaher Ablauf, um Webfarben mit weniger Unsicherheit und sauberem Dev-Handoff zu wählen.
Ratgeber lesenColor workflow
Wann HEX, RGB oder HSL in der Praxis sinnvoll ist
Wähle das passende Farbformat je Aufgabe, damit Design- und Entwicklungsabläufe reibungslos bleiben.
Ratgeber lesenColor workflow
Farbkombination vor dem Einsatz in UI prüfen
Prüfe Farbkombinationen vor der Umsetzung, damit deine UI lesbar und konsistent bleibt.
Ratgeber lesenColor workflow
Brand-Farben aus einem Bild extrahieren
Einsteigerfreundlicher Ablauf, um Farben aus Logos oder Kampagnenbildern abzuleiten.
Ratgeber lesenColor workflow
Einfache Farbpalette aus einem Foto erstellen
So wandelst du ein Foto in eine praktische Palette für Web und Social um.
Ratgeber lesenColor workflow
Wann Farb-Sampling aus Bildern Design-Workflows verbessert
Praxisfälle, in denen Farb-Sampling echte Zeit spart.
Ratgeber lesenColor workflow
Häufige Fehler beim Extrahieren von Farben aus Bildern
Fehler vermeiden, die zu unruhigen Paletten und inkonsistenten Entscheidungen führen.
Ratgeber lesenColor workflow
Die Hauptfarben in einem Bild schnell finden
Schneller, wiederholbarer Ablauf, um dominante und nutzbare Farben zu erkennen.
Ratgeber lesenColor workflow
Extrahierte Farben sinnvoll in einer Website-Palette nutzen
So machst du aus extrahierten Farben eine saubere, konsistente Web-Palette.
Ratgeber lesenColor workflow
Schlechte Farbauswahl bei unruhigen Bildern vermeiden
So vermeidest du Farbrauschen aus komplexen Bildern mit einfachen Sampling-Regeln.
Ratgeber lesenColor accessibility
Praktischer Contrast-Checker-Guide für Websites
Mit einem kurzen Workflow Textkontraste vor dem Veröffentlichen prüfen und Lesbarkeit verbessern.
Ratgeber lesenColor accessibility
Textkontrast für Barrierefreiheit prüfen
Mit einer einfachen, wiederholbaren Methode Textkontrast gegen WCAG-Ziele testen.
Ratgeber lesenColor accessibility
Warum kontrastarmer Text die Lesbarkeit verschlechtert
So wirkt sich zu geringer Kontrast auf Lesegeschwindigkeit, Verständnis und Vertrauen aus.
Ratgeber lesenColor accessibility
WCAG-Kontrastverhältnis einfach erklärt
Was Kontrastverhältnisse bedeuten und wie du AA/AAA-Ziele praktisch in UI-Workflows anwendest.
Ratgeber lesenColor accessibility
Häufige Accessibility-Fehler beim Farbkontrast
Typische Kontrastfehler aus Design- und Frontend-Workflows früh erkennen.
Ratgeber lesenColor accessibility
Niedrigen Textkontrast auf einer Website beheben
Ein praktischer Ablauf, um kontrastarme Texte schnell zu finden und zu korrigieren.
Ratgeber lesenColor accessibility
Beste Kontrast-Praktiken für Buttons, Links und UI-Text
Praktische Kontrastregeln für interaktive Elemente und kleine UI-Texte.
Ratgeber lesenColor accessibility
Markenfarben prüfen, ohne die Barrierefreiheit zu verschlechtern
Markenidentität bewahren und trotzdem zugängliche Text-/UI-Farbkombinationen sichern.
Ratgeber lesenGradient workflow
Gradient-Generator-Guide für schnelle CSS-Hintergründe
Mit einem einfachen Ablauf von der Idee zu produktionsreifem CSS-Verlauf ohne überladenes Design.
Ratgeber lesenGradient basics
So erstellst du einen einfachen CSS-Verlaufshintergrund
Erstelle einen klaren Zwei-Farben-Verlauf mit schnellen Checks für Lesbarkeit und Balance.
Ratgeber lesenGradient decisions
Linearer vs radialer Verlauf: Was ist sinnvoll?
Wähle zwischen linear und radial nach Layout-Richtung, Fokuspunkt und Lesbarkeit.
Ratgeber lesenGradient workflow
Wann Verläufe eine UI wirklich verbessern
Praktische Fälle, in denen Verläufe Hierarchie und Fokus stärken, ohne unruhig zu wirken.
Ratgeber lesenGradient workflow
Häufige Verlaufsfehler im UI-Design
Vermeide typische Fehler, die Lesbarkeit senken und Interfaces überladen wirken lassen.
Ratgeber lesenGradient workflow
So nutzt du Verläufe, ohne die UI unruhig zu machen
Setze Verläufe zurückhaltend ein, damit Fokus, Klarheit und Lesbarkeit erhalten bleiben.
Ratgeber lesenGradient workflow
Die besten Stellen für Verläufe auf einer Website
Nutze Verläufe an wirkungsvollen Stellen, ohne Lesbarkeit und Ruhe zu verlieren.
Ratgeber lesenGradient workflow
So testest du einen Verlauf vor dem Produktionseinsatz
Führe vor dem Release kurze Checks durch, damit Lesbarkeit und Konsistenz stabil bleiben.
Ratgeber lesenKategorien
Weiter entdecken
Von der Übersicht geht es ohne Umwege zu Kategorie, Guide und Tool.