Värvivalija

Kuidas värvivalijat kasutada

1. Klõpsa värviproovil valiku Vali värv all, et avada brauseri värvivalija, ja vali värv. Võid sisestada või kleepida väärtuse ka väljale Värvikood: HEX-koodi, näiteks #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) või CSS-i nime, näiteks tomato.
2. Suur eelvaade uueneb kohe ning HEX-kood on kirjutatud mustana või valgena, olenevalt sellest, kumb sellel taustal paremini loetav on.
3. Jaotises Värvikoodid kopeeri vajalik vorming selle kõrval oleva nupuga Kopeeri: HEX, RGB, HSL, HSV või CMYK.
4. Klõpsa nupul Juhuslik värv, kui otsid inspiratsiooni, või nupul Vali ekraanilt (brauserites, mis seda toetavad, nagu Chrome ja Edge), et võtta proov mis tahes pikslist oma ekraanil, sealhulgas teistest akendest.

Kõik toimub sinu brauseris: ühtegi värvi ega pilti ei saadeta kuhugi.

Mida iga värvikood tähendab

• HEX on HTML-is ja CSS-is kasutatav kuuekohaline kuueteistkümnendkirjaviis. Iga numbripaar on üks kanal (punane, roheline, sinine) vahemikus 00 kuni FF, seega #1E90FF tähendab punane 30, roheline 144, sinine 255.
• RGB annab samad kolm kanalit kümnendarvudena vahemikus 0 kuni 255. Seda ootab enamik disainitarkvara ja programmeerimisteeke.
• HSL kirjeldab värvi tooni (nurk 0° kuni 360° värviratta peal), küllastuse ja heleduse kaudu. See on mugav värvi heledamaks või tumedamaks muutmiseks ühe arvu muutmisega.
• HSV (ka HSB) kasutab tooni, küllastust ja väärtust (erekust). See on mudel, mis on Photoshopi, Figma ja paljude teiste redaktorite värviruutude taga.
• CMYK väljendab värvi tsüaani, magenta, kollase ja musta tindi protsentidena.

CMYK-väärtustest

CMYK-koodid on lihtne teisendus: K = 1 − max(R, G, B), seejärel C = (1 − R − K) / (1 − K) ning sama M ja Y jaoks. See on tavaline õpikuvalem, kuid see ei kasuta ICC-profiili. Päris trükk sõltub trükimasinast, paberist ja tindist, seega teisendab trükikoda sinu värvid oma profiiliga ja tulemus võib erineda. Kasuta neid arve lähtepunktina, mitte trüki tõestusena.

Kontrastsuhete lugemine

HEX-koodi all näitab eelvaade väärtusi Kontrast valgel ja Kontrast mustal, arvutatuna WCAG 2 suhtelise luminantsi valemiga. Tavalise teksti jaoks on tasemel AA vaja suhet 4,5:1 või rohkem ning suure teksti ja liideseelementide jaoks 3:1. Kui sinu värv saavutab valgel vaid 3:1, jäta see suurte pealkirjade või ikoonide jaoks ja kasuta teksti jaoks tumedamat varjundit.

Näpunäiteid

• HEX-koode võid kleepida ka ilma märgita #: 1e90ff töötab samuti, nagu ka lühivormid, näiteks f60.
• Läbipaistvusega väärtused, näiteks rgb(0 0 0 / 50%), aktsepteeritakse; valija näitab läbipaistmatut värvi.
• Brauseri enda värvidialoog erineb süsteemiti. Kui vajad täpset väärtust, on selle sisestamine väljale Värvikood alati täpne.