CDRN

Generirati skladnu paletu boja

  • Nadzorna ploča
  • Dokumentacija
  • API
Generira skladne palete boja prema željenom broju boja i odabranom pravilu, kao što su komplementarne, analogne, trijadne boje itd.

Kako koristiti alat za generiranje palete boja?

U obrascu navedite željeni broj boja i pravilo boja. Generirane palete možete koristiti u svojim projektima slijedeći primjer.

Prvi parametar definira glavnu boju.

Drugi parametar definira broj boja. Imajte na umu da ovisno o odabranom pravilu, izbor količine možda neće biti uzet u obzir.

Treći parametar definira pravilo boje koje se koristi (komplementarna, analogna, trijadna, itd.).

Primjeri paleta

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>

Paleta analogna 

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

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

Često postavljana pitanja

Koje pravilo palete odabrati za grafičku povelju?

Monokromatska paleta daje miran i profesionalan izgled, idealan za korporativne ili uredničke stranice. Analozi nude meku, prirodnu varijaciju, korisnu za zelene ili oceanske ambijente. Pravilo komplementarnosti ili trijade pruža snažan kontrast, savršen za CTA-ove i web-lokacije za e-trgovinu koje žele privući pozornost.

Zašto se zahtijevani broj boja ne poštuje uvijek?

Neka pravila nameću fiksni broj boja. Komplementarna paleta uvijek vraća 2 boje (nijansu i njezinu suprotnost na kotaču boja), trijadna paleta vraća 3, tetradna vraća 4. Parametar količine poštuje se samo za monokromatska i analogna pravila.

Radi li se izračun na HSL ili RGB?

Generacija se oslanja na prirodniji HSL prostor za manipuliranje nijansama (rotacija na kotaču boja) i svjetlinom. Vraćene boje se zatim pretvaraju u HEX format za izravnu integraciju u CSS. Ako trebate RGB format, koristite pretvarač boja na svakom generiranom kodu.

Kako mogu povezati generiranu paletu s postojećom slikom?

Započnite izdvajanjem dominantne boje iz vaše slike putem izvlakača palete, uzmite glavnu nijansu kao referentnu boju, a zatim je unesite u generator pomoću analognog ili trijadičnog ravnala. Tako ćete dobiti boje koje su u skladu s vašim vizualnim izgledom i ukrasiti ostatak stranice.

Jesu li generirane palete dostupne WCAG standardima?

Generator ne provjerava omjere kontrasta. Boja postaje dostupna samo u odnosu na drugu boju pozadine. Za provjeru valjanosti dueta tekst/pozadina, izvezite HEX kodove i upotrijebite alat za provjeru kontrasta koji izračunava omjer prema zahtjevima WCAG-a (4,5:1 za normalan tekst u AA, 7:1 u AAA).

Možemo li izvesti paletu u određenom formatu?

Paleta se vraća u HEX kodovima, spremna za lijepljenje u CSS list, u datoteku SASS varijabli, u temu Tailwind ili u sustav tokena dizajna. Da biste dohvatili RGB ili HSL ekvivalente, proslijedite svaki kod u pretvornik boja.

Primjer zahtjeva

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

Ulazna shema

Polje Tip Obavezno Zadano
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Krajnje točke

  • GET https://cdrn.fr/api/v1/tools - ispisuje sve dostupne alate
  • GET https://cdrn.fr/api/v1/tools/color-generator - dohvaća shemu ovog alata
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - izvršava ovaj alat s JSON payloadom