CDRN

Een harmonieus kleurpalet genereren

  • Dashboard
  • Documentatie
  • API
bouwt harmonieuze kleurpaletten op gegeven het aantal kleuren en de harmonieregel (complementair, analoog, triadisch, enz.).

Hoe u de kleurpalettenenerator gebruikt?

Geef het gewenste aantal kleuren en de kleurregel op in het formulier. U kunt de gegenereerde paletten in uw projecten gebruiken volgens het voorbeeld.

De eerste parameter definieert de hoofdkleur.

De tweede parameter definieert het aantal kleuren. Merk op dat afhankelijk van de gekozen regel, de keuze van het aantal mogelijk niet in aanmerking wordt genomen.

De derde parameter definieert de te gebruiken kleurregel (complementair, analoog, triadisch, enz.).

Palettenvoorbeelden

Monochromatisch palet

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

Analoog palet

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

Triadisch palet

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

Veelgestelde vragen

Welke palettenregel kies ik voor een grafische huisstijl?

Een monochromatisch palet geeft een rustige en professionele uitstraling, ideaal voor corporate of redactionele sites. Analoog biedt een zachte, natuurlijke variatie, nuttig voor groene of oceaansferen. De regel complementair of triadisch brengt een sterk contrast, perfect voor CTA's en e-commercesites die de aandacht willen trekken.

Waarom wordt het gevraagde aantal kleuren niet altijd gerespecteerd?

Sommige regels leggen een vast aantal kleuren op. Een complementair palet geeft altijd 2 kleuren terug (de tint en zijn tegenpool op het kleurenwiel), een triadisch palet geeft er 3, een tetradisch geeft er 4. De aantalparameter wordt alleen gerespecteerd voor de regels monochromatisch en analoog.

Wordt de berekening gedaan op HSL of RGB?

De generatie steunt op de HSL-ruimte, natuurlijker om de tint (rotatie op het kleurenwiel) en de helderheid te manipuleren. De teruggegeven kleuren worden vervolgens geconverteerd naar HEX-formaat voor directe integratie in CSS. Als u het RGB-formaat nodig hebt, gebruik dan de kleurconverter op elke gegenereerde code.

Hoe associeer ik het gegenereerde palet met een bestaande afbeelding?

Begin met het extraheren van de dominante kleur van uw afbeelding via de palettenextractor, neem de hoofdtint als referentiekleur, en injecteer deze vervolgens in de generator met een analoge of triadische regel. U krijgt zo kleuren die coherent zijn met uw visual om de rest van de site aan te kleden.

Voldoen de gegenereerde paletten aan de WCAG-normen?

De generator controleert de contrastratio's niet. Een kleur wordt pas toegankelijk in relatie tot een andere achtergrondkleur. Om een tekst/achtergrond-duo te valideren, exporteert u de HEX-codes en gebruikt u een contrastcontroleur die de ratio berekent volgens de WCAG-eisen (4.5:1 voor normale tekst in AA, 7:1 in AAA).

Kan ik het palet in een bepaald formaat exporteren?

Het palet wordt teruggegeven in HEX-codes, klaar om te plakken in een CSS-stylesheet, in een SASS-variabelenbestand, in een Tailwind-thema of in een design tokens-systeem. Om de equivalenten in RGB of HSL te krijgen, geeft u elke code door aan de kleurconverter.

Voorbeeldverzoek

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

Invoerschema

Veld Type Vereist Standaard
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Endpoints

  • GET https://cdrn.fr/api/v1/tools - toont alle beschikbare tools
  • GET https://cdrn.fr/api/v1/tools/color-generator - geeft het schema van deze tool terug
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - voert deze tool uit met een JSON-payload