Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
Mis on värvikonverter?
Sama värvi saab kirjutada mitmes notatsioonis: HEX (#3366ff) CSS-i ja disaineri jaoks, RGB (51, 102, 255) ekraanide ja API-de jaoks ning HSL (toon, küllastus, heledus), milles on palju lihtsam mõelda tooni heledamaks või tuhmimaks muutmisele. Konverter liigub nende notatsioonide vahel, muutmata värvi ennast.
Näide: #3366FF tähendab R=0x33=51, G=0x66=102 ja B=0xFF=255 ehk rgb(51, 102, 255). Kui max=255 ja min=51, siis heledus L=(255+51)/2/255=60%. Sinine kanal on valdav, seega küllastus on 100% ja toon langeb sinisesse sektorisse 225° juures, mis annab hsl(225, 100%, 60%). Valge tekst sellel sinisel annab WCAG kontrasti umbes 4,7:1 — napilt üle AA taseme tavateksti 4,5:1 nõude.
Kuidas kasutada värvikonverterit
- Sisesta või kleebi värv kujul #hex, rgb() või hsl() või vali see värviringilt.
- Vaata teisendatud väärtusi teistes notatsioonides ja kopeeri vajalik.
- Vaheta komplementaar- ja triaadse harmoonia vahel, et paletti uurida.
- Sisesta teksti- ja taustavärv, et kontrollida WCAG kontrasti suhet tavalise ja suure teksti jaoks.
Korduma kippuvad küsimused värvi ja kontrasti kohta
Millist kontrastisuhet on ligipääsetavuse jaoks vaja?
WCAG 2 tase AA nõuab vähemalt 4,5:1 tavalise teksti ja 3:1 suure teksti (18pt või 14pt poolpaks) jaoks. Tase AAA tõstab nõude 7:1 ja 4,5:1 peale. Kontroll näitab mõlemat lävendit kohe.
Mille poolest erinevad HEX, RGB ja HSL?
Need kodeerivad sama värvi erinevalt. HEX on kompaktne ja CSS-is levinud, RGB vastab otse ekraani kanalitele ning HSL kirjeldab tooni, küllastust ja heledust — seda on koodis palju lihtsam muuta.
Mis on komplementaar- ja triaadvärvid?
Komplementaarvärv asub värviringil 180° vastas ja loob tugeva kontrasti; triaadpalett võtab kolm värvi 120° vahega, andes erksa, kuid tasakaalustatud skeemi.
