CDRN

Generuoti harmoningą spalvų paletę

  • Skydelis
  • Dokumentacija
  • API
Generuoja harmoningas spalvų paletes pagal pageidaujamą spalvų skaičių ir pasirinktą spalvų taisyklę, pvz., papildomos, analogiškos, triados spalvos ir t.t.

Kaip naudoti spalvų paletės generatoriaus įrankį?

Formoje nurodykite norimą spalvų skaičių ir spalvų taisyklę. Sugeneruotas paletes galite naudoti savo projektuose vadovaudamiesi pavyzdžiu.

Pirmasis parametras apibrėžia pagrindinę spalvą.

Antrasis parametras apibrėžia spalvų skaičių. Atminkite, kad atsižvelgiant į pasirinktą taisyklę, į kiekio pasirinkimą gali būti neatsižvelgiama.

Trečiasis parametras apibrėžia naudotiną spalvų taisyklę (papildoma, analogiška, triadinė ir kt.).

Paletės pavyzdžiai

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

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

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

Dažnai užduodami klausimai

Kokią paletės taisyklę pasirinkti grafinei chartijai?

Vienspalvė paletė suteikia ramią ir profesionalią išvaizdą, idealiai tinkančią įmonių ar redakcijų svetainėms. Analogai siūlo švelnų, natūralų variantą, naudingą žaliai arba vandenyno atmosferai. Taisyklė papildoma arba triadinė suteikia didelį kontrastą, puikiai tinka raginimams veikti ir el. prekybos svetainėms, kurios nori patraukti dėmesį.

Kodėl ne visada laikomasi pageidaujamo spalvų skaičiaus?

Kai kurios taisyklės nustato fiksuotą spalvų skaičių. Papildoma paletė visada pateikia 2 spalvas (atspalvis ir jo priešingybė spalvų rate), triadinė paletė – 3, tetradinė – 4. Kiekio parametro laikomasi tik taikant monochromatinės ir analoginės taisykles.

Ar skaičiuojama naudojant HSL ar RGB?

Karta remiasi natūralesne HSL erdve, kad galėtų valdyti atspalvį (spalvų rato sukimąsi) ir ryškumą. Tada grąžintos spalvos konvertuojamos į HEX formatą, kad būtų galima tiesiogiai integruoti į CSS. Jei jums reikia RGB formato, kiekvienam sugeneruotam kodui naudokite spalvų keitiklį.

Kaip susieti sugeneruotą paletę su esamu vaizdu?

Pradėkite iš savo vaizdo ištraukdami dominuojančią spalvą naudodami paletės ištraukiklį, pagrindinį atspalvį paimkite kaip atskaitos spalvą, tada įveskite ją į generatorių naudodami analoginę arba triadinę liniuotę. Taip gausite spalvas, atitinkančias jūsų vizualinį vaizdą, kad aprengtumėte likusią svetainės dalį.

Ar sugeneruotos paletės pasiekiamos pagal WCAG standartus?

Generatorius netikrina kontrasto santykio. Spalva tampa prieinama tik kitos fono spalvos atžvilgiu. Norėdami patvirtinti teksto / fono duetą, eksportuokite HEX kodus ir naudokite kontrasto tikrintuvą, kuris apskaičiuoja santykį pagal WCAG reikalavimus (4,5:1 įprastam tekstui AA, 7:1 AAA).

Ar galime eksportuoti paletę tam tikru formatu?

Paletė grąžinama HEX kodais, paruošta įklijuoti į CSS lapą, į SASS kintamųjų failą, į Tailwind temą arba į dizaino žetonų sistemą. Norėdami gauti RGB arba HSL atitikmenis, perkelkite kiekvieną kodą į spalvų keitiklį.

Užklausos pavyzdys

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

Įvesties schema

Laukas Tipas Privalomas Numatytasis
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Galiniai taškai

  • GET https://cdrn.fr/api/v1/tools - išvardija visus galimus įrankius
  • GET https://cdrn.fr/api/v1/tools/color-generator - gauna šio įrankio schemą
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - vykdo šį įrankį su JSON payload