Värinvalitsin

Näin käytät värinvalitsinta

1. Napsauta Valitse väri -kohdan värinäytettä avataksesi selaimesi värinvalitsimen ja valitse väri. Voit myös kirjoittaa tai liittää arvon kenttään Värikoodi: HEX-koodi, kuten #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) tai CSS-nimi, kuten tomato.
2. Suuri esikatselu päivittyy heti, ja HEX-koodi kirjoitetaan mustalla tai valkoisella sen mukaan, kumpi on luettavampi kyseisellä taustalla.
3. Kopioi Värikoodit-kohdassa tarvitsemasi muoto sen vieressä olevalla Kopioi-painikkeella: HEX, RGB, HSL, HSV tai CMYK.
4. Napsauta Satunnainen väri, kun kaipaat inspiraatiota, tai Poimi näytöltä (selaimissa, jotka sitä tukevat, kuten Chrome ja Edge) poimiaksesi minkä tahansa näytön pikselin, myös muista ikkunoista.

Kaikki tapahtuu selaimessasi: väriä tai kuvaa ei lähetetä minnekään.

Mitä kukin värikoodi tarkoittaa

• HEX on kuusinumeroinen heksadesimaalimerkintä, jota käytetään HTML:ssä ja CSS:ssä. Kukin numeropari on yksi kanava (punainen, vihreä, sininen) arvosta 00 arvoon FF, joten #1E90FF tarkoittaa punaista 30, vihreää 144 ja sinistä 255.
• RGB antaa samat kolme kanavaa desimaalilukuina 0–255. Sitä useimmat suunnitteluohjelmat ja ohjelmointikirjastot odottavat.
• HSL kuvaa värin sävyllä (kulma 0°–360° värikehällä), kylläisyydellä ja vaaleudella. Se on kätevä värin vaalentamiseen tai tummentamiseen yhtä lukua muuttamalla.
• HSV (myös HSB) käyttää sävyä, kylläisyyttä ja arvoa (kirkkautta). Se on Photoshopin, Figman ja monien muiden editorien värineliöiden taustalla oleva malli.
• CMYK ilmaisee värin syaanin, magentan, keltaisen ja mustan painovärin prosenttiosuuksina.

CMYK-arvoista

CMYK-koodit ovat yksinkertainen muunnos: K = 1 − max(R, G, B), sitten C = (1 − R − K) / (1 − K), samoin M:lle ja Y:lle. Tämä on oppikirjojen vakiokaava, mutta se ei käytä ICC-profiilia. Todellinen painatus riippuu painokoneesta, paperista ja väreistä, joten painotalo muuntaa värisi omalla profiilillaan ja tulos voi poiketa. Käytä näitä lukuja lähtökohtana, älä todisteena painotyölle.

Kontrastisuhteiden lukeminen

HEX-koodin alla esikatselu näyttää arvot Kontrasti valkoisella ja Kontrasti mustalla, laskettuna WCAG 2:n suhteellisen luminanssin kaavalla. Normaalille leipätekstille tarvitaan AA-tasolla suhde 4,5:1 tai suurempi ja suurelle tekstille sekä käyttöliittymän osille 3:1. Jos värisi yltää valkoisella vain 3:1:een, käytä sitä suuriin otsikoihin tai kuvakkeisiin ja tekstille tummempaa sävyä.

Vinkkejä

• Voit liittää HEX-koodit ilman #-merkkiä: 1e90ff toimii myös, samoin lyhyet muodot, kuten f60.
• Läpinäkyvyyttä sisältävät arvot, kuten rgb(0 0 0 / 50%), hyväksytään. Valitsin näyttää peittävän värin.
• Selaimen oma värivalintaikkuna vaihtelee järjestelmittäin. Jos tarvitset tarkan arvon, sen kirjoittaminen kenttään Värikoodi on aina täsmällistä.