Farbpaletten erzeugen, prüfen und exportieren
Ausgangsfarbe wählen, Harmonie bestimmen, würfeln bis es passt. clours rechnet in OKLCH, zeigt jede Abstufung von 50 bis 950, prüft alle Kontraste nach WCAG 2.1 und liefert fertigen Code für CSS, Tailwind, SCSS, JSON und SVG.
Hex mit oder ohne Raute, drei oder sechs Zeichen.
Gesperrte Farben bleiben beim Würfeln erhalten. Alle Werte stecken in der Adresse, ein Lesezeichen genügt zum Speichern.
Die Palette als Oberfläche
Nebeneinander liegende Farbfelder sagen wenig darüber, ob eine Palette im Einsatz trägt. Dieselbe Beispielanwendung, einmal hell und einmal dunkel, mit den Farben dieser Palette.
Markenfarbe ist #E76F51, Akzent ist #264653. Flächen, Rahmen und Textfarben entstehen aus dem Farbton der Markenfarbe, damit jede Palette lesbar bleibt: hell #FFF6F4 mit Text #221B19, dunkel #150F0D mit Text #F6ECE9.
Diese Palette im Detail
Die Palettenseite zeigt die vollständige Kontrastmatrix, alle Abstufungen und den Export in fünf Formaten.
Kuratierte Paletten
Tiefes Petrol, Smaragd und Sandgelb: ruhiger Dreiklang für Dashboards und Datenvisualisierung.
Kühle Blautöne mit einem kräftigen Akzent, gut für dunkle Oberflächen.
Warme Erdtöne mit hohem Kontrast zwischen hellstem und dunkelstem Wert.
Gedeckte Grüntöne für Inhalte mit viel Fließtext.
Kräftige Rot- und Violetttöne, geeignet für Marken mit klarer Signalfarbe.
Neutrale Oberfläche mit einem einzigen Akzent, barrierefrei kombinierbar.
Häufig gesuchte Farben
Warum in OKLCH gerechnet wird
HSL verteilt Helligkeit ungleichmäßig: Gelb mit 50 Prozent Helligkeit wirkt deutlich heller als Blau mit demselben Wert. OKLCH ist wahrnehmungsbezogen aufgebaut, gleiche Zahlen bedeuten dort auch gleiche wahrgenommene Helligkeit. Abstufungen bleiben dadurch gleichmäßig, Harmonien behalten ihr Gewicht, und eine Reihe von 50 bis 950 wirkt über alle Farbtöne hinweg gleich ruhig.
Farben, die in OKLCH möglich, auf Bildschirmen aber nicht darstellbar sind, werden zurückgeführt, indem die Buntheit schrittweise verringert wird. Farbton und Helligkeit bleiben erhalten, nur die Sättigung gibt nach.
Kontraste nach WCAG 2.1
Normaler Text braucht 4,5:1 für Stufe AA und 7:1 für AAA. Großer Text ab 24 Pixeln, oder ab 19 Pixeln bei fetter Schrift, kommt mit 3:1 beziehungsweise 4,5:1 aus. Die Matrix auf jeder Palettenseite rechnet alle Paare durch und verlinkt jedes Paar auf eine eigene Seite mit Textbeispiel.
Homepagetools und Generatoren
Gästebücher, Counter, Umfragen und Shoutboxen zum Einbinden, dazu Generatoren für CSS, .htaccess, Cron und Meta-Tags.
waerp.de (öffnet in neuem Fenster) Code-WerkzeugeCode glätten, formatieren, umwandeln
106 Werkzeuge für JSON, CSS, SQL, YAML und Markdown. Ohne Konto, ohne Cookies, alles im eigenen Browser.
creamyfier.de (öffnet in neuem Fenster) Kurz-Links & QRKurz-Links, Bio-Seiten und QR-Codes
Eigene Kurzadressen mit Ablauf und Passwortschutz, Bio-Link-Seiten, Termine als .ics und QR-Codes in dreizehn Varianten.
shrter.de (öffnet in neuem Fenster)