CDRN

Generare una palette di colori armoniosi

  • Dashboard
  • Documentazione
  • API
Genera palette di colori armoniose in base al numero di colori desiderato e alla regola di colori scelta, come i colori complementari, analoghi, triadici, ecc.

Come usare lo strumento di generazione di palette di colori?

Specificate il numero di colori desiderato e la regola di colori nel modulo. Potete usare le palette generate nei vostri progetti seguendo l'esempio.

Il primo parametro definisce il colore principale.

Il secondo parametro definisce il numero di colori. Notate che a seconda della regola scelta, la scelta della quantità può non essere presa in considerazione.

Il terzo parametro definisce la regola di colori da usare (complementari, analoghi, triadici, ecc.).

Esempi di palette

Palette monocromatica

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

Palette analoga

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

Palette triadica

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

Domande frequenti

Quale regola di palette scegliere per una linea grafica?

Una palette monocromatica dà una resa calma e professionale, ideale per siti corporate o editoriali. Le analoghe offrono una variazione dolce, naturale, utile per atmosfere verdi od oceaniche. La regola complementare o triadica porta un contrasto forte, perfetto per CTA e siti di e-commerce che vogliono catturare l'attenzione.

Perché il numero di colori richiesto non è sempre rispettato?

Alcune regole impongono un numero fisso di colori. Una palette complementare restituisce sempre 2 colori (la tonalità e il suo opposto sulla ruota cromatica), una palette triadica ne restituisce 3, una tetradica ne restituisce 4. Il parametro di quantità è rispettato solo per le regole monocromatica e analoga.

Il calcolo viene fatto su HSL o RGB?

La generazione si basa sullo spazio HSL, più naturale per manipolare la tonalità (rotazione sulla ruota cromatica) e la luminosità. I colori restituiti sono poi convertiti nel formato HEX per integrazione diretta in CSS. Se vi serve il formato RGB, usate il convertitore di colore su ogni codice generato.

Come associare la palette generata a un'immagine esistente?

Cominciate estraendo il colore dominante della vostra immagine tramite l'estrattore di palette, prendete la tonalità principale come colore di riferimento, poi iniettatela nel generatore con una regola analoga o triadica. Otterrete così colori coerenti con il vostro visual per vestire il resto del sito.

Le palette generate sono accessibili secondo le norme WCAG?

Il generatore non verifica i rapporti di contrasto. Un colore diventa accessibile solo in relazione a un altro colore di sfondo. Per validare un duo testo/sfondo, esportate i codici HEX e usate un verificatore di contrasto che calcola il rapporto secondo i requisiti WCAG (4.5:1 per il testo normale in AA, 7:1 in AAA).

Si può esportare la palette in un formato particolare?

La palette viene restituita in codici HEX, pronti da incollare in un foglio CSS, in un file di variabili SASS, in un tema Tailwind o in un sistema di token di design. Per recuperare gli equivalenti RGB o HSL, passate ogni codice attraverso il convertitore di colore.

Esempio di richiesta

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

Schema di input

Campo Tipo Richiesto Predefinito
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Endpoint

  • GET https://cdrn.fr/api/v1/tools - elenca tutti gli strumenti disponibili
  • GET https://cdrn.fr/api/v1/tools/color-generator - recupera lo schema di questo strumento
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - esegue questo strumento con un payload JSON