Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
Kas yra spalvų konverteris?
Tą pačią spalvą galima užrašyti keliais būdais: HEX (#3366ff) CSS ir dizaino perdavimui, RGB (51, 102, 255) ekranams ir API, o HSL (atspalvis, sodrumas, šviesumas), kuriame daug lengviau mąstyti apie atspalvio pašviesinimą ar prislopinimą. Konverteris pereina tarp šių užrašų, nekeisdamas pačios spalvos.
Pavyzdys: #3366FF reiškia R=0x33=51, G=0x66=102 ir B=0xFF=255, t. y. rgb(51, 102, 255). Kai max=255 ir min=51, šviesumas L=(255+51)/2/255=60%. Dominuoja mėlynas kanalas, todėl sodrumas yra 100%, o atspalvis patenka į mėlyną sektorių ties 225°, taigi gauname hsl(225, 100%, 60%). Baltas tekstas ant šios mėlynos pasiekia apie 4,7:1 WCAG kontrastą — vos daugiau nei 4,5:1, būtino AA lygio tekstui.
Kaip naudotis spalvų konverteriu
- Įveskite arba įklijuokite spalvą kaip #hex, rgb() ar hsl() arba pasirinkite ją spalvų rate.
- Peržiūrėkite konvertuotas reikšmes kituose užrašuose ir nukopijuokite reikiamą.
- Perjunkite tarp komplementariosios ir triadės harmonijos, kad ištirtumėte paletę.
- Įveskite teksto ir fono spalvas, kad patikrintumėte WCAG kontrasto santykį įprastam ir dideliam tekstui.
Dažnai užduodami klausimai apie spalvas ir kontrastą
Kokio kontrasto santykio reikia prieinamumui?
WCAG 2 AA lygis reikalauja bent 4,5:1 įprastam tekstui ir 3:1 dideliam tekstui (18pt arba 14pt paryškintam). AAA lygis kelia kartelę iki 7:1 ir 4,5:1. Tikrintuvas rodo abi ribas iš karto.
Kuo skiriasi HEX, RGB ir HSL?
Jie taip pat koduoja tą pačią spalvą. HEX yra kompaktiškas ir įprastas CSS, RGB tiesiogiai atitinka ekrano kanalus, o HSL apibūdina atspalvį, sodrumą ir šviesumą — jį daug lengviau keisti kode.
Kas yra komplementariosios ir triadinės spalvos?
Komplementarioji spalva yra 180° priešais tavo spalvą rate ir sukuria stiprų kontrastą; triadinė paletė ima tris spalvas 120° atstumu — gyvą, bet subalansuotą schemą.
