CDRN

Eine harmonische Farbpalette erstellen

  • Dashboard
  • Dokumentation
  • API
erstellt harmonische Farbpaletten basierend auf der gewählten Farbanzahl und Harmonieregel (komplementär, analog, triadisch usw.).

Wie verwendet man den Farbpaletten-Generator?

Geben Sie die gewünschte Farbanzahl und die Farbregel im Formular an. Sie können die erzeugten Paletten gemäß dem Beispiel in Ihren Projekten verwenden.

Der erste Parameter definiert die Hauptfarbe.

Der zweite Parameter definiert die Anzahl der Farben. Beachten Sie, dass je nach gewählter Regel die Wahl der Menge möglicherweise nicht berücksichtigt wird.

Der dritte Parameter definiert die zu verwendende Farbregel (komplementär, analog, triadisch usw.).

Beispielpaletten

Monochromatische Palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffab99;"></div>
<div class="p-4" style="background-color: #ffffff;"></div>

Analoge Palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffbb32;"></div>
<div class="p-4" style="background-color: #dcff32;"></div>

Triadische Palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #32ff54;"></div>
<div class="p-4" style="background-color: #5432ff;"></div>

Häufig gestellte Fragen

Welche Palettenregel sollte man für ein Corporate Design wählen?

Eine monochromatische Palette erzeugt ein ruhiges und professionelles Ergebnis, ideal für Corporate- oder Redaktions-Websites. Analoge Paletten bieten eine sanfte, natürliche Variation, nützlich für grüne oder ozeanische Stimmungen. Die Regel komplementär oder triadisch bringt starken Kontrast, perfekt für CTAs und E-Commerce-Seiten, die Aufmerksamkeit erregen wollen.

Warum wird die gewünschte Farbanzahl nicht immer eingehalten?

Einige Regeln erzwingen eine feste Anzahl von Farben. Eine komplementäre Palette gibt immer 2 Farben zurück (der Farbton und sein Gegenstück auf dem Farbkreis), eine triadische Palette gibt 3 zurück, eine tetradische gibt 4 zurück. Der Mengenparameter wird nur für die monochromatischen und analogen Regeln respektiert.

Erfolgt die Berechnung in HSL oder RGB?

Die Generierung basiert auf dem HSL-Raum, der natürlicher ist, um Farbton (Rotation auf dem Farbkreis) und Helligkeit zu manipulieren. Die zurückgegebenen Farben werden anschließend in das HEX-Format konvertiert, um direkt in CSS eingebunden zu werden. Wenn Sie das RGB-Format benötigen, verwenden Sie den Farbkonverter für jeden generierten Code.

Wie kombiniere ich die erzeugte Palette mit einem vorhandenen Bild?

Beginnen Sie damit, die dominante Farbe Ihres Bildes mit dem Paletten-Extraktor zu extrahieren, nehmen Sie den Hauptfarbton als Referenzfarbe und übergeben Sie ihn dem Generator mit einer analogen oder triadischen Regel. So erhalten Sie Farben, die mit Ihrem Visual kohärent sind, um den Rest der Website auszustatten.

Sind die erzeugten Paletten WCAG-konform?

Der Generator prüft die Kontrastverhältnisse nicht. Eine Farbe wird erst in Verbindung mit einer anderen Hintergrundfarbe barrierefrei. Um ein Text-/Hintergrund-Paar zu validieren, exportieren Sie die HEX-Codes und verwenden Sie einen Kontrastprüfer, der das Verhältnis nach den WCAG-Anforderungen berechnet (4,5:1 für normalen Text in AA, 7:1 in AAA).

Kann man die Palette in einem bestimmten Format exportieren?

Die Palette wird in HEX-Codes zurückgegeben, fertig zum Einfügen in ein CSS-Stylesheet, eine SASS-Variablendatei, ein Tailwind-Theme oder ein Design-Token-System. Um die RGB- oder HSL-Äquivalente abzurufen, geben Sie jeden Code in den Farbkonverter ein.

Beispielanfrage

curl -X POST https://cdrn.fr/api/v1/tools/color-generator/execute \
  -H "Content-Type: application/json" \
  -d '{"color_base":"...","quantity":1,"rules":"complementary"}'

Eingabeschema

Feld Typ Erforderlich Standard
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Endpunkte

  • GET https://cdrn.fr/api/v1/tools - listet alle verfügbaren Tools auf
  • GET https://cdrn.fr/api/v1/tools/color-generator - liefert das Schema dieses Tools
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - führt dieses Tool mit einem JSON-Payload aus