Värvivalija

Vali värv rattal, peenhäälesta seda küllastuse ja heleduse lõuendil ning loe see tagasi igas vormingus, mida sinu projekt kasutab, alates #RRGGBB-st kuni oklch()-ni. Tööriist teeb ka seda, mida teised värvivalijad vahele jätavad: kolm ratta režiimi, sealhulgas maalikunstniku RYB-ratas, harmooniad, mis ehitavad sulle valmis paleti, alfakanal ning terve paleti eksport ühe klõpsuga CSS-muutujatena, SCSS-ina või JSON-ina. Kõik arvutatakse kohapeal sinu brauseris.

RYB või RGB? Kolm värviratast ühe asemel

Ratta režiim valik muudab toonide paigutust rattal:

• HSV ja HSL on digitaalsed rattad. Toonid on paigutatud nii, nagu ekraan valgust segab. Need erinevad ruudukujulise lõuendi poolest: HSV heledaim nurk on puhas toon, HSL paigutab puhtad toonid heleduse keskele ja valge nende kohale.
• RYB (maalikunstniku) paigutab toonid nii, nagu kunstnikud need õppisid: punane, kollane ja sinine põhivärvidena, nende vahel oranž, roheline ja lilla (vt RYB-mudel Vikipeedias). Erinevuse märkad kõige selgemalt harmooniate juures. RYB-rattal on punase komplement roheline ja sinise komplement oranž, samad pigmendipaarid, mida õpetatakse joonistustunnis. Digitaalne ratas paarib punase hoopis tsüaaniga. Kui “komplementaarne” palett tavalisest värvivalijast on kunagi silmale valesti tundunud, siis nüüd tead, miks.

Värviharmooniad: palett, mis ehitub iseenesest

Vali reegel välja Värviharmoonia all. Ratas märgib kaaslasvärvid ja nende alla ilmub valmis palett:

• Komplementaarne: üks vastasvärv. Kõige tugevam kontrast, sobib üksikuks aktsendiks domineeriva brändivärvi kõrvale.
• Jagatud komplementaarne: komplemendi kaks naaberit. Peaaegu sama tugev kontrast, aga palju lihtsam tasakaalustada.
• Triaadne: kolm ühtlaselt jaotatud tooni. Elav ja samas stabiilne, kui üks toon domineerib ja teisi kahte kasutad säästlikult.
• Tetraadne (ruut): neli tooni. Rikkalikud skeemid illustratsioonidele ja graafikutele, rakenduse liideses raske tasakaalustada.
• Analoogne: vahetud naaberid. Rahulik kombinatsioon taustadele ja üleminekutele.
• Monokroomne: üks toon mitmel heledusastmel. Kõige turvalisem valik nupu olekutele (hõljumine, aktiivne, keelatud).

Terve paleti kopeerid ühe klõpsuga vormingus, mida vajad: lihtne HEX, RGB, HSL, OKLCH, kleepimisvalmis CSS kohandatud omadused (--color-1: …), SCSS muutujad või JSON koodi jaoks. Kas palett hoiab kontrasti ka inimeste jaoks, kes toone raskemini eristavad? Kontrolli seda kiiresti ekraanipildil pärast halltoonidesse teisendamist.

Teisenda HEX, RGB, HSL, OKLCH ja CMYK: kleebi ükskõik mida, loe kõike

Sisendväljad võtavad vastu peaaegu igasugust värvinotatsiooni: #f80, #ff8800, 8-kohaline hex koos alfaga, rgb() ja rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ja CSS värvinimed nagu rebeccapurple. Ükskõik, mida sisestad, saad tagasi seitse kooskõlastatud väljundit: HEX, RGB, HSL, HSV, LCH, OKLCH ja CMYK, igaühel oma kopeerimisnupp.

Eelvaate all olev läbipaistmatuse (alfa) liugur lülitab väljundid nende läbipaistvatele vormidele #RRGGBBAA, rgba() ja hsla(). Eelvaade kuvatakse malelaua-mustri peal, nii et näed läbipaistvust kohe.

Leia lähim Tailwind CSS värvitoken

Eelvaate all olevad kaks silti nimetavad värvi sinu eest: lähim nimega CSS värv (kasulik kiireks prototüüpimiseks) ja lähim Tailwindi token, näiteks orange-500. Nii jääd oma disainisüsteemi sisse, selle asemel et leiutada ühekordseid väärtusi. Kliki sildil, et see kopeerida.

See vastab küsimusele, mis kerkib igas disaini üleandmises: disainer saatis hex-koodi, milline Tailwindi klass sellele kõige lähemal on? Vastavus arvutatakse Tailwind CSS 4 vaikepaleti järgi (vt Tailwindi dokumentatsiooni, inglise keeles), nii et tokeni saad kohe kleepida klassinimesse.

Millist värvivormingut kasutada?

Vorming	Täisnimi	Millal kasutada
HEX	Hexadecimal	Veebi vaikevalik. Lühike, toetatud kõikjal, lihtsalt kopeeritav. Kaheksa numbrit lisavad läbipaistmatuse.
RGB	Red, Green, Blue	Nii mõtlevad ekraanid. Kolm valguskanalit vahemikus 0 kuni 255. Vorming, mida enamik API-sid ja canvas-koodi ootab.
HSL	Hue, Saturation, Lightness	Silma järgi muutmiseks. “Veidi heledam” või “vähem küllastunud” tähendab ühe numbri muutmist.
HSV	Hue, Saturation, Value	Graafikaprogrammid. Mudel, millel põhineb Photoshopi ja GIMP-i värvivalija.
LCH	Lightness, Chroma, Hue	Tajuliselt ühtlane. Samad numbrilised sammud näevad välja nagu samad visuaalsed sammud, mida HSL vaid teeskleb.
OKLCH	OK Lightness, Chroma, Hue	Kaasaegne CSS valik. Parandab LCH-d vaevavad toonimuutused sinistes toonides. Toetatud kõigis praegustes brauserites, sobib disainitokenite jaoks.
CMYK	Cyan, Magenta, Yellow, Key	Suunis trükile. Ligikaudne teisendus trükikojaga suhtlemiseks, lõplikud väärtused määrab trükikoja värviprofiil.

Miks OKLCH on tajuliselt ühtlasem kui vanemad mudelid, selgitab Oklab värviruumi autor Björn Ottosson oma algses artiklis (inglise keeles). Süntaksit ja brauseritoe seisu kirjeldab MDN (inglise keeles). Kuidas trükimudel toimib, selgitab Vikipeedia artikkel CMYK kohta.

Väikesed asjad, mis säästavad aega

• Ajalugu hoolitseb enda eest. Viimased 24 värvi säilivad lehe värskendamisel. Need jäävad ainult sinu brauseri kohalikku salvestusse ega liigu kuhugi.
• Pipett. Brauserites, kus on EyeDropper API (Chrome ja Edge), saad valida värvi ükskõik kust ekraanilt, isegi väljaspool brauseriakent. Värvi fotolt või logofailist leiad pildi värvipipetiga.
• Klaviatuuriga juhtimine. Ratas ja küllastuse-heleduse lõuend reageerivad nooleklahvidele, nii et saad värvi täpsete sammudega paika sättida.
• Eelseaded pakuvad levinud põhivärve, kui vajad lihtsalt kiiret lähtepunkti.

Korduma kippuvad küsimused

Kuidas teisendada OKLCH HEX-iks?

Kleebi oklch() väärtus OKLCH väljale ja kõik teised väljundid, sealhulgas HEX, uuenevad kohe. See toimib ka vastupidi: sisesta HEX-kood ja loe tagasi vastav oklch(). Üks hoiatus: OKLCH suudab kirjeldada ka värve, mis jäävad väljapoole sRGB värviruumi, ja need lõigatakse sellele, mida sRGB kuvada suudab. Väga küllastunud oklch() ei näe seepärast laia värviruumiga ekraanil välja täpselt samasugune kui selle HEX-vaste.

Kas oklch() on tootmises kasutamiseks turvaline?

Jah. Kõik Chrome'i, Edge'i, Firefoxi ja Safari praegused versioonid toetavad oklch() väärtust, millest on saanud levinud notatsioon disainitokenite jaoks (Tailwind CSS 4 defineerib kogu oma paleti sellega). Väga vanade brauserite jaoks lisa eelmisele reale HEX-tagavaravariant. See tööriist annab sulle mõlemad väärtused.

Miks harmooniad muutuvad, kui lülitun RYB-rattale?

Sest see, mis on "vastas", sõltub sellest, kuidas toonid ringil paiknevad. RYB-ratas jaotab pigmendi põhivärvid ühtlaselt, nii et komplementaarsed paarid vastavad sellele, mida kunstnikud teavad: punane ja roheline, sinine ja oranž, kollane ja lilla. HSV- ja HSL-rattad jaotavad toonid valguse segunemise järgi, mistõttu paarivad nad punase hoopis tsüaaniga. Kumbki pole vale: RYB vastab kunstiõpetusele, HSV ja HSL sellele, mida ekraanid teevad.

Kas ma saan usaldada CMYK-väärtusi trüki jaoks?

Võta neid orientiirina. Tegelik trükiteisendus sõltub trükikoja, paberi ja tindi ICC-profiilist (inglise keeles). Sama RGB-värv tuleb kaetud ja katmata paberil erinev. Siinsed väärtused kasutavad standardvalemit, mis viib sind lähedale, kuid lõpliku prooviväljatrüki teeb trükikoda.

Kus on pipetinupp Firefoxis või Safaris?

See on sihilikult peidetud. EyeDropper API (MDN, inglise keeles), millel nupp põhineb, on praegu olemas ainult Chromiumil põhinevates brauserites (Chrome, Edge, Opera). Kõik muud tööriista funktsioonid toimivad kõikjal, puudub ainult ekraanilt värvi valimine. Kui vajad värvi pildilt, kasuta pildi värvipipetti, mis töötab kõigis brauserites.

Kas mu värviajalugu jääb privaatseks?

Jah. Ajalugu on salvestatud sinu brauseri localStorage's sinu seadmes. Miski, mida valid, kleebid või kopeerid, ei lähe kuhugi mujale. Kogu tööriist töötab brauseris JavaScriptina, mida saad kinnitada arendajatööriistade võrguvahekaardilt.