Každý zápis, ktorý CSS prijíma
HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, Display P3 a 148 pomenovaných farieb, každá s tlačidlom kopírovania. Hodnoty mimo gamutu sa označia a vrátia dnu znížením chromy v OKLCH, ako predpisuje špecifikácia.
Farebné nástroje
Výber, prevody, palety, kontrast a vnímanie farieb
Sedem úloh s farbou, jeden spoločný pruh, každé číslo vypočítané tu
Webový nástroj
Oficiálna stránka produktu
Vydavateľ:
POLPROG
Oficiálna stránka produktu
7
Panely
7
Harmónie
11
Stupne škály
0
Nahratých bajtov
01/Farebné nástroje
O projekte
Sedem panelov nad jednou spoločnou farbou: vyber a preveď, skontroluj kontrast, postav paletu, postav škálu, postav prechod, vytiahni paletu z obrázka a pozri si to celé tromi spôsobmi vnímania farieb. Zmeňte farbu v jednom paneli a každý ďalší už o nej hovorí.
Prevody sa riadia CSS Color Level 4, vrátane skutočnej po častiach definovanej prenosovej krivky sRGB namiesto gamy 2,2, Bradfordovej adaptácie medzi D65 a D50 pre Lab a vracania do gamutu znížením chromy v OKLCH. Preto tieto čísla sedia s tým, čo prehliadač vykresľuje, namiesto toho, aby boli o percento či dve vedľa.
Čo panel kontrastu povie a čo nie
Povie pomer podľa WCAG 2.2 a ktoré požiadavky dvojica spĺňa. Nepovie, že je vaša stránka prístupná, pretože kontrast je jedno kritérium úspechu z mnohých - poradie fokusu, popisy, cesty klávesnicou, pohyb a štruktúra sú samostatné - a stránka s dokonalým kontrastom môže byť stále nepoužiteľná.
APCA sedí za rozbalením a je označené ako informácia z návrhu WCAG 3. Modeluje, ako sa kontrast číta pri danej veľkosti a hrúbke písma, čo WCAG 2 nerobí - ale dnes sa podľa neho nič nemeria a ukázať ho ako rovnocenný by skreslilo oboje.
Panel vnímania farieb
Projekcia podľa Vienota, Brettela a Mollona, vykonaná v lineárnom svetle. Odpovedá na otázku, ktorú má zmysel klásť - dajú sa tieto dve ešte odlíšiť? - namiesto toho, aby predstierala fotografiu toho, čo vidí konkrétny človek. Je to model jednej formy poruchy a panel to hovorí.
02/Využitie
Čo to rieši
Problém
- Prevodníky farieb si navzájom odporujú, pretože väčšina aproximuje prenosovú krivku sRGB gamou 2,2
- Otočenie odtieňa v HSL dá tri farby, ktoré nevyzerajú ako súprava - jedna vyjde viditeľne tmavšia
- Nástroj povie, že dvojica prejde na 4,50:1, a vložená hodnota po zaokrúhlení na osem bitov meria 4,49:1
Výsledok
- Prevody sa riadia CSS Color Level 4 vrátane skutočnej po častiach definovanej krivky sRGB, takže čísla sedia s prehliadačom
- Harmónie a škály sa stavajú v OKLCH, kde rovnaké kroky svetlosti aj rovnako vyzerajú
- Každý návrh kontrastu sa po zaokrúhlení na osem bitov meria znova, takže kopírovaná hodnota naozaj prejde
Pre koho
- Návrhári a vývojári, ktorých farby musia prejsť kontrolou kontrastu
- Každý, kto stavia dizajnový systém a potrebuje rad odtieňov, ktorý sa číta rovnomerne
- Tímy, ktoré overujú, či dva stavy ovládacieho prvku zostanú rozlíšiteľné pre farboslepých používateľov
03/Kľúčové funkcie
Kľúčové funkcie
Najdôležitejšie možnosti vysvetlené prakticky.
Kontrast podľa WCAG 2.2, povedané opatrne
Pomer a to, ktoré z požiadaviek bežný AA, veľký AA, rozhranie AA, bežný AAA a veľký AAA dvojica spĺňa. Polopriehľadné farby sa najprv zložia na farbe stránky, presne ako ich vykresľuje prehliadač - chyba, ktorej sa väčšina kontrolórov dopúšťa.
Návrh, ktorý naozaj prejde
Keď dvojica nedosiahne cieľ, najbližší odtieň tej istej farby sa hľadá podľa svetlosti a chromy v OKLCH - a každý kandidát sa po zaokrúhlení na osem bitov meria znova, pretože hľadanie v spojitom priestore môže vrátiť farbu, ktorá ako hex neprejde.
Palety a škály v OKLCH
Sedem harmónií a jedenásťstupňový rad odtieňov od 50 do 950, postavený otáčaním odtieňa a odstupňovaním svetlosti v percepčnom priestore. Export do vlastných vlastností CSS, premenných SCSS, JSON alebo obyčajného zoznamu.
Prechody bez sivého pásu
Lineárne, radiálne a kužeľové prechody s presúvateľnými zarážkami, interpolované v OKLCH, aby modrá do žltej neprechádzala blatom. Vedľa sa vypisuje jednoduchý tvar sRGB, takže staršie prehliadače prechod aj tak vykreslia.
Paleta z obrázka
Median cut a po ňom dopracovanie metódou Lloyda, počítané na pixeloch dekódovaných v tejto karte. Krok vzorkovania je vytlačený mimo malých prvočísel, aby sa pruhovaný obrázok alebo tabuľka nezredukovali na dve farby - skutočná chyba, ktorú to napráva.
Simulácia vnímania farieb
Projekcia podľa Vienota, Brettela a Mollona v lineárnom svetle, pre protanopiu, deuteranopiu a tritanopiu. Hlási, či DVOJICA zostáva rozlíšiteľná - to je otázka, na ktorej záleží - a jasne hovorí, že modeluje jednu formu poruchy, nie oči konkrétneho človeka.
APCA označené ako návrh
Percepčný model kontrastu navrhnutý pre WCAG 3 je skrytý za rozbalením a opísaný tým, čím je: informáciou z návrhu normy, nie meradlom, podľa ktorého sa dnes čokoľvek hodnotí. Postaviť ho vedľa verdiktov WCAG ako rovnocenný by skreslilo oboje.
04/Stiahnuť
Prístup k produktu
Jasná cesta od oficiálneho zdroja k prvému úspešnému použitiu.
Vyberte správnu platformu
Použite jeden z oficiálnych odkazov pre svoje zariadenie alebo prehliadač.
Nainštalujte alebo otvorte
Postupujte podľa pokynov obchodu alebo otvorte webovú aplikáciu. Bez inštalátorov tretích strán.
Nastavte a začnite
Prejdite možnosti, vyberte predvoľby a začnite hlavným pracovným postupom.
Oficiálne možnosti prístupu
05/Technológia
Technológia produktu
Transparentný prehľad hlavných technológií použitých na vývoj a údržbu produktu.
JavaScript
06/Bezpečnosť
Súkromie a bezpečnosť
Vaše údaje zostávajú vo vašom zariadení. Vždy.