CDRN

Harmonikus szín paletta generálása

  • Irányítópult
  • Dokumentáció
  • API
Harmonikus szín palettákat generál a kívánt szín szám és a választott szín szabály alapján, mint például komplementer, analóg, triadikus színek stb.

Hogyan használjuk a színpaletta-generáló eszközt?

Adja meg a kívánt színek számát és a színszabályt az űrlapon. A generált palettákat a példát követve felhasználhatja projektjeiben.

Az első paraméter határozza meg a fő színt.

A második paraméter határozza meg a színek számát. Vegye figyelembe, hogy a választott szabálytól függően előfordulhat, hogy a mennyiségi választást nem vesszük figyelembe.

A harmadik paraméter határozza meg az alkalmazandó színszabályt (komplementer, analóg, triádikus stb.).

Paletta példák

Monokromatikus paletta

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

Analóg paletta

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

Triádikus paletta

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

Gyakran ismételt kérdések

Melyik palettaszabályt válasszam egy arculathoz?

A monokromatikus paletta nyugodt és professzionális hatást kelt, ideális vállalati vagy szerkesztőségi oldalakhoz. Az analóg színek lágy, természetes variációt kínálnak, hasznosak zöld vagy óceáni hangulatokhoz. A komplementer vagy triádikus szabály erős kontrasztot biztosít, tökéletes a CTA-khoz és az e-kereskedelmi oldalakhoz, amelyek fel akarják hívni magukra a figyelmet.

Miért nem mindig teljesül a kért színek száma?

Bizonyos szabályok fix számú színt írnak elő. Egy komplementer paletta mindig 2 színt ad vissza (a színárnyalatot és annak ellentétét a színkörön), egy triádikus paletta 3-at, egy tetrádikus pedig 4-et. A mennyiségi paramétert csak a monokromatikus és az analóg szabályok esetén vesszük figyelembe.

A számítás HSL vagy RGB alapon történik?

A generálás a HSL téren alapul, ami természetesebb a színárnyalat (forgatás a színkörön) és a világosság kezeléséhez. A visszaadott színek ezután HEX formátumba konvertálódnak a közvetlen CSS integráció érdekében. Ha RGB formátumra van szüksége, használja a színkonvertert minden egyes generált kódra.

Hogyan társítsuk a generált palettát egy meglévő képhez?

Kezdje azzal, hogy kinyeri a kép domináns színét a paletta-kinyerővel, vegye a fő árnyalatot referenciaszínként, majd táplálja be a generátorba analóg vagy triádikus szabállyal. Így a vizuális világával összhangban lévő színeket kap az oldal többi részének felöltöztetéséhez.

A generált paletták megfelelnek a WCAG hozzáférhetőségi szabványoknak?

A generátor nem ellenőrzi a kontrasztarányokat. Egy szín csak egy másik háttérszínhez képest válik hozzáférhetővé. Egy szöveg/háttér páros érvényesítéséhez exportálja a HEX kódokat, és használjon kontrasztellenőrzőt, amely kiszámítja az arányt a WCAG követelmények szerint (4.5:1 normál szöveg esetén AA-nál, 7:1 AAA-nál).

Exportálható a paletta egy adott formátumban?

A paletta HEX kódokban kerül visszaadásra, amelyek készen állnak a CSS stíluslapba, SASS változófájlba, Tailwind témába vagy designtoken-rendszerbe történő beillesztésre. Az RGB vagy HSL megfelelőkhöz használja a színkonvertert minden kódnál.

Kérés példa

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

Bemeneti séma

Mező Típus Kötelező Alapértelmezett
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Végpontok

  • GET https://cdrn.fr/api/v1/tools - listázza az összes elérhető eszközt
  • GET https://cdrn.fr/api/v1/tools/color-generator - lekéri ezen eszköz sémáját
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - végrehajtja ezen eszközt JSON payloaddal