Värvivalija võrgus
Vali värv rattal, peenhäälesta seda küllastuse-heleduse lõuendil ja loe see tagasi igas vormingus, mida sinu projekt kõneleb — alates #RRGGBB-st kuni oklch()-ni. See valija teeb ka seda, mida teised tööriistad vahele jätavad: kolm ratta geomeetriat, sealhulgas maalikunstniku RYB-ratas, harmoonia-ülekatted, mis ehitavad sulle valmis paleti, alfakanal ja terve paleti eksport ühe klõpsuga CSS-muutujatena, SCSS-ina või JSON-ina. Kõik see arvutatakse kohapeal sinu brauseris.
Kolm ratast, mitte üks
Ratta režiim valik muudab ratta enda geomeetriat:
- HSV ja HSL on digitaalsed rattad — toonid on paigutatud nii, nagu RGB-ekraanid valgust segavad. Need erinevad selle poolest, kuidas ruudukujuline lõuend käitub: HSV heledaim nurk on puhas toon, HSL paigutab puhtad toonid 50% heleduse juurde, valgega selle kohal.
- RYB (maalikunstniku) paigutab toonid nii, nagu kunstnikud need õppisid: punane, kollane ja sinine põhivärvidena, oranž, roheline ja lilla nende vahel. Selle praktiline väärtus tuleb esile harmooniates — RYB-rattal on punase komplement roheline ja sinise komplement oranž, klassikalised pigmendipaarid, samas kui digitaalne ratas paarib punase tsüaaniga. Kui “komplementaarne” palett tavalisest värvivalijast on kunagi silmale valesti tundunud, siis nüüd tead, miks.
Harmooniad, mis ehitavad paleti sinu eest
Vali reegel Värviharmoonia all ja ratas märgib kaaslasvärvid, mis ilmuvad valmis paletina:
- Komplementaarne — üks vastasvärv. Tugevaim kontrast; kasuta üksikule aktsendile domineeriva brändivärvi vastu.
- Jagatud komplementaarne — komplemendi kaks naaberit. Peaaegu sama palju kontrasti, kuid palju lihtsam tasakaalustada.
- Triaadne — kolm ühtlaselt jaotatud tooni. Elav, ent stabiilne; lase ühel domineerida ja kasuta teisi kahte säästlikult.
- Tetraadne (ruut) — neli tooni. Rikkalikud skeemid illustratsioonidele ja andmevisualiseeringutele; UI-töös raske tasakaalustada.
- Analoogne — vahetud naaberid. Madal pinge, sobib taustadele ja gradientidele.
- Monokroomne — üks toon astmelise heledusega. Kõige turvalisem valik liidese olekutele (hõljumine, aktiivne, keelatud).
Paletipaneel kopeerib kogu komplekti ühe klõpsuga, valitud vormingus: lihtne HEX, RGB, HSL, OKLCH, kleepimisvalmis CSS kohandatud omadused (--color-1: …), SCSS muutujad või JSON koodile edastamiseks.
Kleebi ükskõik mida, loe kõike
Sisendväljad aktsepteerivad praktiliselt igasugust värvinotatsiooni: #f80, #ff8800, 8-kohaline hex koos alfaga, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 või CSS värvinimesid nagu rebeccapurple. Ükskõik, mis sisse tuleb, tagasi tuleb seitse sünkroonitud väljundit: HEX, RGB, HSL, HSV, LCH, OKLCH ja CMYK, igaühel oma kopeerimisnupp.
Eelvaate all olevad kaks abisilti nimetavad värvi sinu eest: lähim CSS-i nimega värv (kasulik kiireks prototüüpimiseks ja värvidest rääkimiseks) ja lähim Tailwindi märksõna (nt orange-500), nii et saad jääda oma disainisüsteemi sisse, selle asemel et leiutada ühekordseid väärtusi.
Lohista eelvaate all olevat alfa liugurit ja väljundid lülituvad oma läbipaistvatele vormidele — #RRGGBBAA, rgba(), hsla() — eelvaade kuvatakse malelaua-mustri peal, et saaksid läbipaistvust hinnata.
Millist vormingut kasutada?
| Vorming | Täisnimi | Millal kasutada? |
|---|---|---|
| HEX | Hexadecimal | Veebi vaikimisi valik. Kompaktne, universaalselt toetatud, lihtsalt kopeeritav. 8 numbrit lisavad alfa. |
| RGB | Red, Green, Blue | Nii mõtlevad ekraanid. Kolm valguskanalit, 0–255. Vorming, mida enamik API-sid ja canvas-koodi ootab. |
| HSL | Hue, Saturation, Lightness | Käsitsi muutmiseks inimestele. “Veidi heledam” või “vähem küllastunud” on üheainsa numbri muutus. |
| HSV | Hue, Saturation, Value | Graafikatarkvara. Mudel Photoshopi ja GIMP-i värvivalijate taga. |
| LCH | Lightness, Chroma, Hue | Tajuliselt ühtlane. Võrdsed numbrilised sammud näevad välja nagu võrdsed visuaalsed sammud — see, mida HSL näiliselt lubab, kuid ei täida. |
| OKLCH | OK Lightness, Chroma, Hue | Kaasaegne CSS-i valik. Parandab LCH sinise tooni nihked; toetatud kõigis praegustes brauserites ja ideaalne disainimärgistiku süsteemidele. |
| CMYK | Cyan, Magenta, Yellow, Key | Trükile orienteeritud. Ligikaudne teisendus trükidisaineritega suhtlemiseks — lõplikud väärtused tulevad alati printeri värviprofiilist. |
Väikesed asjad, mis säästavad aega
- Ajalugu hoolitseb enda eest. Viimased 24 värvi, millega töötasid, säilivad lehe värskendamisel — salvestatud ainult sinu brauseri kohalikku salvestusse, kunagi mitte üles laetud.
- Pipett. Brauserites, kus on EyeDropper API (Chrome ja Edge), saad valida värvi ükskõik kust ekraanilt, isegi väljaspool brauseriakent.
- Klaviatuuriga juhtimine. Ratas ja küllastuse-heleduse lõuend reageerivad nooleklahvidele piksliprofist täpseteks kohandusteks.
- Eelseaded katavad levinud põhivärvid, kui vajad lihtsalt kiiret lähtepunkti.
Korduma kippuvad küsimused (KKK)
Kas oklch() on tootmises kasutamiseks turvaline?
Jah. Kõik Chrome'i, Edge'i, Firefoxi ja Safari praegused versioonid toetavadoklch() ning sellest on saanud eelistatud notatsioon disainimärgistiku jaoks (Tailwind CSS 4 defineerib kogu oma paleti selles). Väga vanade brauserite jaoks lisa eelmisele reale HEX-varuvariant — see tööriist annab sulle mõlemad väärtused.