Farbe ist einer der mächtigsten Ausdrucksmittel im Webdesign – und gleichzeitig eine der größten Stolperstellen für Entwickler ohne Designausbildung. Coolors löst dieses Problem elegant: Mit einem einzigen Tastendruck auf die Leertaste generiert das Tool fünf harmonisch abgestimmte Farbtöne, die sofort im Browser angezeigt werden. Was 2013 als einfacher Palettengenerator startete, ist heute eine vollständige Farbmanagement-Plattform für Webdesigner, UI-Entwickler und Grafikprofis.
Was ist Coolors?
Coolors ist ein webbasiertes Tool zur Erstellung und Verwaltung von Farbpaletten. Die Kernfunktion ist denkbar einfach: Die Website zeigt fünf Farbfelder nebeneinander, und ein Druck auf die Leertaste erzeugt eine neue zufällige Farbkombination. Hinter dieser Schlichtheit steckt ein ausgefeilter Algorithmus, der Farben nach Harmonieregeln auswählt – das Ergebnis sind Kombinationen, die tatsächlich gut zusammenpassen und nicht nur zufällig wirken.
Neben dem Browser-Tool gibt es Coolors auch als iOS-App, als Adobe-Plugin für Photoshop und Illustrator sowie als Figma-Plugin. Die Grundfunktionen sind kostenlos, für erweiterte Features wie unbegrenzte Paletten und Team-Kollaboration gibt es ein Pro-Abo.
Palette per Leertaste generieren und anpassen
Der schnellste Einstieg: Coolors öffnen, Leertaste drücken, fertig. Die erzeugten Paletten lassen sich auf verschiedene Weisen verfeinern:
- Sperren: Klick auf das Schloss-Symbol fixiert eine Farbe. Beim nächsten Leertasten-Druck werden nur die unlocked Felder neu generiert – so baut man schrittweise die perfekte Palette auf.
- Anpassen: Ein Klick auf eine Farbe öffnet ein Bearbeitungsfeld mit Hex-Eingabe, HSB/HSL/RGB-Schiebereglern und einer visuellen Farbwählscheibe.
- Verschieben: Farben per Drag-and-Drop in eine andere Reihenfolge bringen – nützlich, um Primary, Secondary und Accent-Farben logisch anzuordnen.
- Hinzufügen / Entfernen: Paletten können von drei bis zehn Farben umfassen, nicht nur die Standard-fünf.
Kontrastprüfung nach WCAG AA/AAA
Eines der wertvollsten Features für barrierefreies Webdesign ist der integrierte Kontrast-Checker. Er prüft jede Farbkombination gegen die WCAG-Richtlinien (Web Content Accessibility Guidelines) und zeigt an, ob Text auf einem bestimmten Hintergrund lesbar ist.
| Level | Normaler Text (unter 18pt) | Großer Text (ab 18pt / 14pt fett) | UI-Komponenten & Grafiken |
|---|---|---|---|
| WCAG AA | 4,5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4,5:1 | – |
| Coolors-Anzeige | ✓ Pass / ✗ Fail | ✓ Pass / ✗ Fail | Manuell prüfen |
Den Checker öffnet man über das Augensymbol in der Palette oder direkt über Tools → Contrast Checker. Neben dem Verhältnis zeigt Coolors auch eine Simulation, wie Text auf dem gewählten Hintergrund aussieht.
Gradient-Generator und Farbblindheits-Simulation
Der Gradient-Generator erzeugt aus zwei oder mehr Palettenfarben einen CSS-Gradient und gibt den fertigen background-Code direkt aus – inklusive Winkel-Einstellung und mehreren Zwischenfarben. Damit entfällt die manuelle Berechnung von Farbverläufen komplett.
Noch wertvoller für inklusives Design ist die Farbblindheits-Simulation. Coolors zeigt die Palette in verschiedenen Simulationsmodi: Deuteranopie (Rotgrünblindheit), Protanopie, Tritanopie (Blaublindheit) und Achromatopsie (vollständige Farbenblindheit). So erkennt man auf einen Blick, ob die gewählten Farben auch für Menschen mit eingeschränkter Farbwahrnehmung unterscheidbar sind.
Export-Formate im Überblick
Coolors bietet eine Vielzahl von Export-Optionen, die sich direkt in den Workflow integrieren lassen:
| Format | Verwendung | Besonderheit |
|---|---|---|
| CSS | Direkt im Stylesheet einsetzen | Als Custom Properties (--color-1: #…) |
| Sass / SCSS | Präprozessor-Projekte | Variablen ($color-1: …) |
| Less | Less-basierte Projekte | @color-1: … Syntax |
| PNG | Präsentationen, Mockups | Farbfelder als Bild |
| SVG | Vektorgrafik-Integration | Skalierbar, editierbar |
| Kunden-Präsentationen | Mit Hex-Codes beschriftet |
Palette aus einem Bild extrahieren
Die Funktion Image Picker analysiert ein hochgeladenes Foto und extrahiert daraus die dominanten Farben. Das ist besonders nützlich, wenn ein Website-Design an ein bestehendes Markenlogo, ein Produktfoto oder ein Stimmungsbild angepasst werden soll. Einfach das Bild hochladen, die automatisch erkannten Farben prüfen und bei Bedarf anpassen – innerhalb von Sekunden hat man eine konsistente Palette aus dem visuellen Material.
Coolors vs. Adobe Color vs. Paletton
| Feature | Coolors | Adobe Color | Paletton |
|---|---|---|---|
| Zufallsgenerator | ✓ (Leertaste) | Begrenzt | ✗ |
| WCAG-Kontrastcheck | ✓ | ✓ | ✗ |
| Farbblindheits-Sim. | ✓ | ✓ | ✓ |
| CSS-Export | ✓ | ✓ | ✓ |
| Bild-zu-Palette | ✓ | ✓ | ✗ |
| Figma-Plugin | ✓ | ✓ | ✗ |
| Kostenlos nutzbar | ✓ (Basis) | ✓ | ✓ |
Tipps für harmonische Farbpaletten
Coolors arbeitet intern mit Farbharmonie-Regeln aus der Farbtheorie. Wer diese versteht, kann die Ergebnisse gezielter steuern:
- Komplementärfarben liegen sich im Farbkreis gegenüber (z. B. Blau und Orange). Sie erzeugen starken Kontrast und Spannung – ideal für CTAs.
- Analoge Farben sind Nachbarn im Farbkreis (z. B. Blau, Blaugrün, Grün). Sie wirken harmonisch und ruhig – gut für Corporate-Designs.
- Triadische Paletten bestehen aus drei gleichmäßig verteilten Farben im Farbkreis. Sie sind lebhaft, aber schwerer zu balancieren.
Weitere Inspirationen und Einblicke in professionelles Farbdesign bieten Material Design Color Guidelines von Google, der Smashing Magazine Farb-Bereich sowie das Interaction Design Foundation Color Theory-Portal.
FAQ: Coolors für Webdesign
- Kann ich Coolors ohne Registrierung nutzen?
- Ja. Der Palettengenerator, die Kontrastprüfung und alle Basis-Exporte funktionieren vollständig ohne Account. Eine kostenlose Registrierung ermöglicht das Speichern von Paletten; das Pro-Abo schaltet Teams, unbegrenzte Sammlungen und erweiterte Exporte frei.
- Wie exportiere ich eine Palette als CSS Custom Properties?
- Klicke auf Export oben rechts, wähle das Format CSS und kopiere den generierten Code. Coolors exportiert automatisch als
:root { --color-1: #abc123; … }, sodass die Variablen sofort im gesamten Stylesheet verfügbar sind. - Funktioniert Coolors auch auf dem Smartphone?
- Ja, die Website ist vollständig responsive. Für iOS gibt es außerdem eine native App mit einigen Zusatzfeatures wie Touch-Gesten zum Generieren. Eine Android-App ist bisher nicht offiziell verfügbar.
- Wie extrahiere ich Farben aus einem Markenlogo?
- Nutze die Funktion Image → Extract Palette und lade das Logo als PNG (mit transparentem Hintergrund) hoch. Coolors erkennt die dominanten Farbtöne; nicht relevante Grautöne oder Transparenzartefakte lassen sich danach manuell aus der Palette entfernen.