HCL snadné. Plugin Figma pro výběr dostupné barevné palety

V tomto článku se budeme zabývat nedostatky stávajících nástrojů vytvořených pro výběr barevných palet a budeme také hovořit o novém řešení, zásuvném modulu pro Figma „HCL Easy“, který vám umožní rychle a efektivně vyberte rozšířené palety barev, které splňují požadavky na kontrast a vnímání barev osob.

Odkazy:

  • Úvodní stránka – http://hcleasy.com
  • Figma Plugin – https: //www. figma.com/community/plugin/926166109013752444/HCL-Easy

Tvůrci HCL Easy:

  • Kir Dergachev – https: //www.facebook.com/kirdergachev

  • Alexey Shaikhelislamov – https://www.facebook.com/Dlefender/

Potřeba produktů digitální přístupnosti

Barevný kontrast hraje klíčovou roli v přístupnosti vizuálního obsahu, zejména u lidí s poruchami barevného vidění. Je také nutné vzít v úvahu situace, kdy úroveň vnějšího osvětlení není dostatečně vysoká nebo jsou použity zastaralé obrazovky.

Příklad úkolu

Představme si následující situaci – potřebujeme vytvořit barevnou paletu pro vizualizaci grafů a map oblastí, zároveň by to mělo vypadat harmonicky pro vnímání lidským okem.

Pro každou barvu musíme sladit 12 barev a 10 odstínů. Výsledkem je 120 odstínů. V případě, že je nutné vyvinout verzi pro tmavé téma, počet odstínů se zdvojnásobí.

Při vývoji palety a výběru barev a jejich odstínů musíme vzít v úvahu následující:

  • Korespondence vybraných odstínů s vnímáním lidské barvy
  • Všechny typy poruch vnímání barev
  • Stanovené standardy kontrastu

Příklady řešení podobného problému jinými společnostmi:

  • Salesforce
  • Cloudflare

Nejprve jsme samozřejmě posoudili existující řešení a dospěli jsme k závěru, že na trhu neexistuje žádný nástroj, který by vám umožňoval vybrat takové množství barev a odstínů, a to hlavně proto, že většina nástrojů používat barevný prostor sRGB a jeho deriváty, které nejsou přizpůsobeny zvláštnostem vnímání barev lidským okem. Stávající nástroje navíc neposkytují možnost kontrolovat čitelnost barev palety v reálném čase.

Hlavní nevýhody stávajících řešení. RGB vc HCL (CIALab)

Všechny standardní nástroje pro vytváření návrhových projektů a výběr barevné palety využívají barevný prostor RGB a jeho deriváty, jako jsou HSB, HSV, HSL atd.

Tento prostor má však jednu nevýhodu – nesprávně vypočítává světlost barvy. Každá barva má své vlastní matematické významy. Jedním z nich je panství.

Jako příklad uvažujme barvy obrazovky se stejnými matematickými hodnotami pro světlost a sytost na obrázku níže. Zatímco hodnoty sytosti a světlosti v barevném prostoru RGB jsou u všech barev na stejné úrovni, naše oko tvrdí, že se liší. Všimněte si skutečnosti, že některé z těchto barev vypadají světlejší nebo sytější než jiné. Například odstíny modré se jeví jako nejtmavší, zatímco odstíny žluté a zelené jako nejsvětlejší.

Současně existují barevné prostory navržené na základě způsobu, jakým lidské oko vnímá barvy, například HCL (CIALab). Při použití tohoto barevného prostoru můžete sladit barvy s hodnotami světlosti a sytosti přizpůsobenými vnímání lidské barvy.

Při vytváření palety barev vidíme v CIALabu výrazné rozdíly ve srovnání s jinými barevnými prostory. Barvy dobře spolupracují a každá barva má vizuálně stejnou úroveň lehkosti a sytosti jako ostatní.

Je úžasné, že neexistují prakticky žádné nástroje pro konstrukci barevných matic, které by používaly barevné modely založené na smyslovém vnímání barev.

Proto jsme se rozhodli vytvořit vlastní nástroj – HCL Easy, který vám umožní tyto problémy vyřešit.

Řešení nabízená společností HCL Easy

Barevný prostor přizpůsobený pro pohodlné vnímání člověkem eye

Používáme barevný prostor CIELab, reprezentovaný jako HCL osy pomocí chroma.js, aby byl tento nástroj co nejjednodušší.

Automatizace procesů při vytváření palety barev

Všechny barvy jsou prezentovány ve formě matice, která umožňuje vybrat harmonické barvy pro světlé a tmavé motivy. Tento nástroj umožňuje automaticky vybrat požadovanou úroveň jasu, sytosti a světlosti barvy pomocí Bézierových křivek.

automatizace v pluginu „HCL Easy“ prostřednictvím „Bézierových křivek“

Přizpůsobuje se všem formám barevné slepoty a splňuje požadavky na barevný kontrast.

Pomocí funkce Přístupnost můžete zkontrolovat kontrast celé barevné matice najednou, včetně kontrastu pro každý z osmi typů barevné slepoty. Zde jsme použili knihovnu nazvanou Color Blind, tato knihovna převádí naše HEX kódy na ty, které vidí lidé s různými zrakovými postiženími, abychom mohli později zkontrolovat kontrast reprodukovaných barev.

Kontrola kontrastu v pluginu Figma „HCL Easy“

Vytvářejte palety barev čitelné člověkem pro použití v aplikaci Figma

Vytvořili jsme nástroj plug-in pro aplikaci Figma, abyste mohli přizpůsobit palety barev různé motivy vašeho návrhového systému bez použití externích programů.

Inspirujte se nejlepšími

Nabízíme vám výběr palet z nejpopulárnějších designových systémů na světě jako základ pro vaši vlastní paletu barev.

Co bude dál:

  • Automatizace s barvou vaší značky. Budete moci vytvářet odstíny nejen na základě dvou extrémních barev, ale také na základě třetí, která bude umístěna uprostřed vaší palety. Jako třetí barvu můžete použít firemní barvu.
  • Vyberte počet odstínů. Můžete zvolit požadovaný počet odstínů pro svoji barvu.
  • Přímá integrace se styly knihovny Figma.
  • Plugin pro Sketch a Adobe XD a webovou verzi.

Odkazy: Úvodní stránka – http://hcleasy.com

Plugin Figma – https://www.figma.com/community/plugin/926166109013752444/HCL-Easy

# figma #design # sketсh

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.