CDRN

Generera en harmonisk färgpalett

  • Panel
  • Dokumentation
  • API
bygger harmoniska färgpaletter utifrån antalet färger och harmoniregeln (komplementär, analog, triadisk osv.).

Så använder du palettgenereringsverktyget?

Ange önskat antal färger och färgregeln i formuläret. Du kan använda de genererade paletterna i dina projekt enligt exemplet.

Den första parametern definierar huvudfärgen.

Den andra parametern definierar antalet färger. Observera att valet av antal kanske inte beaktas beroende på vald regel.

Den tredje parametern definierar färgregeln att använda (komplementär, analog, triadisk osv.).

Palettexempel

Monokromatisk palett

<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>

Analog palett

<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>

Triadisk palett

<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>

Vanliga frågor

Vilken palettregel ska jag välja för en grafisk profil?

En monokromatisk palett ger ett lugnt och professionellt intryck, perfekt för företags- eller redaktionella sajter. Analoga paletter erbjuder en mjuk, naturlig variation, användbar för gröna eller havsinspirerade stämningar. Komplementär eller triadisk regel ger stark kontrast, idealisk för CTA:er och e-handelssajter som vill fånga uppmärksamhet.

Varför respekteras inte alltid det begärda antalet färger?

Vissa regler kräver ett fast antal färger. En komplementär palett returnerar alltid 2 färger (nyansen och dess motsats på färghjulet), en triadisk palett returnerar 3, en tetradisk returnerar 4. Antalsparametern respekteras endast för reglerna monokromatisk och analog.

Görs beräkningen i HSL eller RGB?

Genereringen bygger på HSL-rymden, mer naturlig för att manipulera nyans (rotation på färghjulet) och ljushet. De returnerade färgerna konverteras sedan till HEX-format för direkt CSS-integration. Om du behöver RGB-format, använd färgkonverteraren på varje genererad kod.

Hur kombinerar man en genererad palett med en befintlig bild?

Börja med att extrahera bildens dominerande färg via palettextraktorn, ta huvudnyansen som referensfärg och mata sedan in den i generatorn med en analog eller triadisk regel. Du får då färger som är sammanhängande med din visuella stil för att klä resten av sajten.

Är de genererade paletterna tillgängliga enligt WCAG-normerna?

Generatorn kontrollerar inte kontrastförhållanden. En färg blir tillgänglig först i relation till en annan bakgrundsfärg. För att validera en text/bakgrund-duo, exportera HEX-koderna och använd en kontrastkontroll som räknar ut förhållandet enligt WCAG-kraven (4.5:1 för normal text i AA, 7:1 i AAA).

Kan man exportera paletten i ett särskilt format?

Paletten returneras i HEX-koder, redo att klistra in i en CSS-fil, i en SASS-variabelfil, i ett Tailwind-tema eller i ett designtokensystem. För att få motsvarigheterna i RGB eller HSL, kör varje kod genom färgkonverteraren.

Exempelförfrågan

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

Indatasschema

Fält Typ Obligatorisk Standard
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Slutpunkter

  • GET https://cdrn.fr/api/v1/tools - listar alla tillgängliga verktyg
  • GET https://cdrn.fr/api/v1/tools/color-generator - hämtar schemat för detta verktyg
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - kör detta verktyg med en JSON-payload