Každý zápis, který CSS přijímá
HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, Display P3 a 148 pojmenovaných barev, každá s tlačítkem kopírování. Hodnoty mimo gamut se označí a vrátí dovnitř snížením chromy v OKLCH, jak předepisuje specifikace.
Barevné nástroje
Výběr, převody, palety, kontrast a vnímání barev
Sedm úloh s barvou, jeden společný pruh, každé číslo spočítané tady
Webový nástroj
Oficiální stránka produktu
Vydavatel:
POLPROG
Oficiální stránka produktu
7
Panely
7
Harmonie
11
Stupně škály
0
Nahraných bajtů
01/Barevné nástroje
O aplikaci
Sedm panelů nad jednou společnou barvou: vyber a převeď, zkontroluj kontrast, postav paletu, postav škálu, postav přechod, vytáhni paletu z obrázku a prohlédni si to celé třemi způsoby vnímání barev. Změňte barvu v jednom panelu a každý další už o ní mluví.
Převody se řídí CSS Color Level 4, včetně skutečné po částech definované přenosové křivky sRGB místo gamy 2,2, Bradfordovy adaptace mezi D65 a D50 pro Lab a vracení do gamutu snížením chromy v OKLCH. Proto tato čísla sedí s tím, co prohlížeč vykresluje, místo aby byla o procento či dvě vedle.
Co panel kontrastu řekne a co ne
Řekne poměr podle WCAG 2.2 a které požadavky dvojice splňuje. Neřekne, že je vaše stránka přístupná, protože kontrast je jedno kritérium úspěchu z mnoha - pořadí fokusu, popisky, cesty klávesnicí, pohyb a struktura jsou samostatné - a stránka s dokonalým kontrastem může být stále nepoužitelná.
APCA sedí za rozbalením a je označeno jako informace z návrhu WCAG 3. Modeluje, jak se kontrast čte při dané velikosti a tloušťce písma, což WCAG 2 nedělá - ale dnes se podle něj nic neměří a ukázat jej jako rovnocenný by zkreslilo obojí.
Panel vnímání barev
Projekce podle Vienota, Brettela a Mollona, provedená v lineárním světle. Odpovídá na otázku, kterou má smysl klást - dají se tyto dvě ještě odlišit? - místo aby předstírala fotografii toho, co vidí konkrétní člověk. Je to model jedné formy vady a panel to říká.
02/Využití
Co to řeší
Problém
- Převodníky barev si navzájem odporují, protože většina aproximuje přenosovou křivku sRGB gamou 2,2
- Otočení odstínu v HSL dá tři barvy, které nevypadají jako sada - jedna vyjde viditelně tmavší
- Nástroj řekne, že dvojice projde na 4,50:1, a vložená hodnota po zaokrouhlení na osm bitů měří 4,49:1
Výsledek
- Převody se řídí CSS Color Level 4 včetně skutečné po částech definované křivky sRGB, takže čísla sedí s prohlížečem
- Harmonie a škály se staví v OKLCH, kde stejné kroky světlosti i stejně vypadají
- Každý návrh kontrastu se po zaokrouhlení na osm bitů měří znovu, takže kopírovaná hodnota opravdu projde
Pro koho
- Návrháři a vývojáři, jejichž barvy musí projít kontrolou kontrastu
- Každý, kdo staví designový systém a potřebuje řadu odstínů, která se čte rovnoměrně
- Týmy, které ověřují, zda dva stavy ovládacího prvku zůstanou rozlišitelné pro barvoslepé uživatele
03/Klíčové funkce
Klíčové funkce
Nejdůležitější možnosti vysvětlené prakticky.
Kontrast podle WCAG 2.2, řečeno opatrně
Poměr a to, které z požadavků běžný AA, velký AA, rozhraní AA, běžný AAA a velký AAA dvojice splňuje. Poloprůhledné barvy se nejprve složí na barvě stránky, přesně jak je vykresluje prohlížeč - chyba, které se většina kontrolorů dopouští.
Návrh, který opravdu projde
Když dvojice nedosáhne cíle, nejbližší odstín téže barvy se hledá podle světlosti a chromy v OKLCH - a každý kandidát se po zaokrouhlení na osm bitů měří znovu, protože hledání ve spojitém prostoru může vrátit barvu, která jako hex neprojde.
Palety a škály v OKLCH
Sedm harmonií a jedenáctistupňová řada odstínů od 50 do 950, postavená otáčením odstínu a odstupňováním světlosti v percepčním prostoru. Export do vlastních vlastností CSS, proměnných SCSS, JSONu nebo prostého seznamu.
Přechody bez šedého pásu
Lineární, radiální a kuželové přechody s přetahovatelnými zarážkami, interpolované v OKLCH, aby modrá do žluté neprocházela blátem. Vedle se vypisuje prostý tvar sRGB, takže starší prohlížeče přechod stejně vykreslí.
Paleta z obrázku
Median cut a po něm dopracování metodou Lloyda, počítané na pixelech dekódovaných v této záložce. Krok vzorkování je vytlačen mimo malá prvočísla, aby se pruhovaný obrázek nebo tabulka nezredukovaly na dvě barvy - skutečná vada, kterou to napravuje.
Simulace vnímání barev
Projekce podle Vienota, Brettela a Mollona v lineárním světle, pro protanopii, deuteranopii a tritanopii. Hlásí, zda DVOJICE zůstává rozlišitelná - to je otázka, na které záleží - a jasně říká, že modeluje jednu formu vady, ne oči konkrétního člověka.
APCA označené jako návrh
Percepční model kontrastu navržený pro WCAG 3 je schovaný za rozbalením a popsaný tím, čím je: informací z návrhu normy, ne měřítkem, podle kterého se dnes cokoli hodnotí. Postavit jej vedle verdiktů WCAG jako rovnocenný by zkreslilo obojí.
04/Stáhnout
Přístup k produktu
Jasná cesta od oficiálního zdroje k prvnímu úspěšnému použití.
Vyberte správnou platformu
Použijte jeden z oficiálních odkazů pro své zařízení nebo prohlížeč.
Nainstalujte nebo otevřete
Postupujte podle pokynů obchodu nebo otevřete webovou aplikaci. Bez instalátorů třetích stran.
Nastavte a začněte
Projděte možnosti, zvolte předvolby a začněte hlavním pracovním postupem.
Oficiální možnosti přístupu
05/Technologie
Technologie produktu
Transparentní přehled hlavních technologií použitých k vývoji a údržbě produktu.
JavaScript
06/Zabezpečení
Soukromí a bezpečnost
Vaše data zůstávají ve vašem zařízení. Vždy.