Generirati harmonično paleto barv

Generira harmonične palete barv glede na želeno število barv in izbrano pravilo, kot so komplementarne, analogne, triadne barve itd.

Kako uporabljati orodje za ustvarjanje barvne palete?

V obrazcu določite želeno število barv in barvno pravilo. Ustvarjene palete lahko uporabite v svojih projektih tako, da sledite zgledu.

Prvi parameter določa glavno barvo.

Drugi parameter določa število barv. Upoštevajte, da glede na izbrano pravilo izbira količine morda ne bo upoštevana.

Tretji parameter določa barvno pravilo za uporabo (komplementarno, analogno, triadično itd.).

Primeri palet

Monokromatska paleta

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

Analogna paleta

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

Triadična paleta

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

Pogosta vprašanja

Katero pravilo palete izbrati za grafično listino?

Monokromatska paleta daje miren in profesionalen videz, idealen za poslovna ali uredniška spletna mesta. Analogi ponujajo mehko, naravno različico, uporabno za zelene ali oceanske ambiente. Pravilo komplementarnega ali triadnega zagotavlja močan kontrast, kot nalašč za CTA-je in spletna mesta za e-trgovino, ki želijo pritegniti pozornost.

Zakaj zahtevano število barv ni vedno upoštevano?

Nekatera pravila zahtevajo določeno število barv. Komplementarna paleta vedno vrne 2 barvi (odtenek in njegovo nasprotje na barvnem krogu), triadična paleta vrne 3, tetradna vrne 4. Parameter količine se upošteva samo za monokromatska in analogna pravila.

Ali je izračun opravljen na HSL ali RGB?

Generacija se opira na bolj naraven prostor HSL za manipulacijo odtenka (vrtenje na barvnem kolesu) in svetlosti. Vrnjene barve se nato pretvorijo v format HEX za neposredno integracijo v CSS. Če potrebujete format RGB, uporabite pretvornik barv za vsako ustvarjeno kodo.

Kako povežem ustvarjeno paleto z obstoječo sliko?

Začnite tako, da izvlečete prevladujočo barvo iz vaše slike prek ekstraktorja palete, vzemite glavni odtenek kot referenčno barvo in ga nato vnesite v generator z analognim ali triadnim ravnilom. Tako boste pridobili barve, skladne z vašo podobo, da boste oblekli preostanek spletnega mesta.

Ali so ustvarjene palete dostopne standardom WCAG?

Generator ne preverja kontrastnih razmerij. Barva postane dostopna le v povezavi z drugo barvo ozadja. Če želite potrditi dvojno besedilo/ozadje, izvozite kode HEX in uporabite pregledovalnik kontrasta, ki izračuna razmerje v skladu z zahtevami WCAG (4,5:1 za običajno besedilo v AA, 7:1 v AAA).

Ali lahko izvozimo paleto v določeni obliki?

Paleta je vrnjena v kodah HEX, pripravljena za lepljenje v list CSS, v datoteko spremenljivk SASS, v temo Tailwind ali v sistem žetonov oblikovanja. Če želite pridobiti ekvivalente RGB ali HSL, posredujte vsako kodo v pretvornik barv.

Primer zahteve

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

Vhodna shema

Polje Tip Obvezno Privzeto
color_base string
quantity integer
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary)

Končne točke

  • GET https://cdrn.fr/api/v1/tools - izpiše vsa razpoložljiva orodja
  • GET https://cdrn.fr/api/v1/tools/color-generator - pridobi shemo tega orodja
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - izvede to orodje s JSON payloadom