Color & Design SystemKatch-UP Werkzeug
1

Projekt-Set

Primary, Akzent und Neutral gehören zusammen — ein Set, nicht drei Einzelfarben.

Abstufungen werden intern in OKLCH gerechnet (wahrnehmungsgleichmäßig) und als HEX ausgegeben — Divi und die meisten Farbwähler verstehen kein oklch(). Die Basisfarbe bleibt fix auf Stufe 500 (📌).

2

Skalen

Klick auf eine Kachel kopiert den Hex-Wert.

Badges zeigen den Kontrast gegen den ersten aktiven Prüfgrund (unten in Abschnitt 4 wählbar) — nicht gegen Weiß. AAA ≥ 7:1 · AA ≥ 4,5:1 · 3:1 nur Großtext/Bedienelemente.

3

Rollen-Set für Divi / WordPress

Das ist der Block, der am Ende ins Theme wandert — nicht die 10 Kacheln.
4

Kontrast-Kreuztabelle

Geprüft wird gegen die Flächen, die du wirklich einsetzt. Maus über eine Zelle zeigt, wie es aussieht — Klick fixiert die Vorschau.
Prüfgründe (Mehrfachauswahl)
Eigener Prüfgrund
Für Fälle wie „weiße Schrift auf rotem Kästchen“.
Einzeltest — zwei beliebige Farben
Fließtext 18 px — so liest sich die Kombination auf einer echten Seite.
Großtext 28 px
Kleingedrucktes 14 px — die häufigste Fehlerquelle.
5

UI-Vorschau

18 px Fließtext, 60–75 Zeichen, 8-px-Raster, 200–300 ms ease-out — nach Divi-Standards.
6

Export

Code-Block für die KI, Bildschirm-Version für den Kunden. 

    

      
      
      
    

  


  
  

    

      7
      
Kundenansicht vorbereiten

      Drei Varianten. Bei einer gibt's kein Urteil, bei sechs keine Entscheidung.
    

    

      

        

          
          
        

        

          
          
        

      

      

      

        Die Kundenansicht blendet alle Regler, Hex-Werte und Code-Blöcke aus. Der Link enthält den kompletten Zustand —
        kein Server, keine Datenbank. Über Drucken / PDF wird daraus ein Freigabe-Dokument.
      

    

  







  

    
Farbkonzept

    
Bitte sieh dir die Varianten in Ruhe an. Es geht nur um das Gefühl — welche passt am ehesten zu dem, wie ihr wahrgenommen werden wollt?

  

  

  

  

    

      

        
        
      

      So wirkt die Variante auf einer echten Seite.
    

    

  

  






  

    
Farben importieren

    
  

  

    

      Logo · SVG-Datei oder Bild
      
      SVG: alle fill/stroke-Werte werden ausgelesen. PNG/JPG/WebP: die dominanten Farbtöne werden ermittelt.
    

    

      Freitext — Briefing, Notizen, SVG-Code
      
      
    

    

      Gefunden — anklicken zum Übernehmen
      
noch nichts gefunden

    

    

  




  

    
Gespeicherte Presets

    
  

  

  

    
    
    Presets liegen nur in diesem Browser. Für die Kundenakte: JSON exportieren.