Zgjedhës Ngjyrash Online
Zgjidhni një ngjyrë në rrotë, rregullojeni imët në kanavacën e ngopjes, dhe lexojeni në çdo format që flet projekti juaj — nga #RRGGBB te oklch(). Ky zgjedhës bën edhe pjesët që mjetet e tjera i lënë jashtë: tre gjeometri rrote, përfshirë rrotën tradicionale të piktorëve RYB, mbivendosje harmonish që ju ndërtojnë vetë paletën, një kanal alfa dhe eksportim me një klik të gjithë paletës si variabla CSS, SCSS ose JSON. Gjithçka llogaritet lokalisht në shfletuesin tuaj.
Tre rrota, jo vetëm një
Zgjedhësi Modaliteti i rrotës ndryshon vetë gjeometrinë e rrotës:
- HSV dhe HSL janë rrotat dixhitale — nuancat e vendosura ashtu siç i përzien dritën ekrani RGB. Ndryshojnë në mënyrën si sillet kanavacë katrore: këndi më i ndritshëm i HSV është vetë nuanca e pastër, ndërsa HSL vendos nuancat e pastra në 50% ndriçim me të bardhën sipër.
- RYB (e piktorëve) i rendit nuancat ashtu siç i mësojnë artistët: e kuqe, e verdhë dhe e kaltër si ngjyra primare, me portokallin, jeshilen dhe vjollcën në mes. Vlera e saj praktike shfaqet te harmonitë — në rrotën RYB, komplementi i së kuqes është jeshile dhe komplementi i së kaltrës është portokalli, çiftet klasike të pigmentit, ndërsa një rrotë dixhitale e çiftëzon të kuqen me cianin. Nëse ndonjëherë një paletë “komplementare” e një zgjedhësi të zakonshëm ju është dukur e gabuar, kjo është arsyeja.
Harmoni që ju ndërtojnë vetë paletën
Zgjidhni një rregull nën Harmonia e ngjyrave dhe rrota shënon ngjyrat shoqëruese, të cilat shfaqen si një paletë gati për përdorim:
- Komplementare — një ngjyrë e kundërt. Kontrasti më i fortë; përdoreni për një aksent të vetëm mbi një ngjyrë dominante të markës.
- Gjysmë-komplementare — dy fqinjët e komplementit. Pothuajse po aq kontrast, shumë më e lehtë për t’u balancuar.
- Triadike — tre nuanca të shpërndara në mënyrë të barabartë. Të gjalla, por të qëndrueshme; lëreni njërën të dominojë dhe përdorni të tjerat me kursim.
- Tetradike (katror) — katër nuanca. Skema të pasura për ilustrime dhe vizualizim të dhënash; të vështira për t’u balancuar në ndërfaqe përdoruesi.
- Analoge — fqinjët e menjëhershëm. Tension i ulët, e mirë për sfonde dhe gradientë.
- Monokromatike — një nuancë me ndriçim të shkallëzuar. Zgjedhja më e sigurt për gjendjet e ndërfaqes (hover, aktiv, i çaktivizuar).
Paneli i paletës kopjon të gjithë grupin me një klikim, në formatin që zgjidhni: HEX i thjeshtë, RGB, HSL, OKLCH, veti të personalizuara CSS gati për ngjitje (--color-1: …), variabla SCSS ose JSON për t’ia dhënë kodit.
Ngjitni çdo gjë, lexoni gjithçka
Fushat e hyrjes pranojnë pothuajse çdo shënim ngjyre që i hidhni: #f80, #ff8800, hex 8-shifror me alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, ose emra ngjyrash CSS si rebeccapurple. Çfarëdo që futni, ju vijnë prapa shtatë rezultate të sinkronizuara: HEX, RGB, HSL, HSV, LCH, OKLCH dhe CMYK, secila me butonin e vet të kopjimit.
Dy etiketa ndihmëse nën pamjen paraprake ua emërtojnë ngjyrën: ngjyra CSS më e afërt me emër (e dobishme për prototipe të shpejta dhe për të folur rreth ngjyrave) dhe shenja Tailwind më e afërt (p.sh. orange-500), kështu që mund të qëndroni brenda sistemit tuaj të dizajnit në vend që të shpikni vlera një-përdorimshe.
Zvarritni rrëshqitësin e opacitetit (alfa) poshtë pamjes paraprake dhe rezultatet kalojnë në format transparente — #RRGGBBAA, rgba(), hsla() — me pamjen paraprake të shfaqur mbi një sfond shahu që ju lejon të gjykoni transparencën.
Cilin format duhet të përdorni?
| Format | Emri i Plotë | Kur ta përdorni? |
|---|---|---|
| HEX | Heksadecimal | Parazgjedhja e uebit. Kompakt, i mbështetur kudo, i lehtë për t’u kopjuar. 8 shifra shtojnë alfa. |
| RGB | Red, Green, Blue | Si mendojnë ekranet. Tre kanale drite, 0–255. Formati që presin shumica e API-ve dhe kodit canvas. |
| HSL | Hue, Saturation, Lightness | Për njerëz që editojnë me dorë. “Pak më e çelët” ose “më pak e ngopur” bëhet ndryshim i një numri të vetëm. |
| HSV | Hue, Saturation, Value | Softuer grafik. Modeli pas zgjedhësve në Photoshop dhe GIMP. |
| LCH | Lightness, Chroma, Hue | I njëtrajtshëm nga perceptimi. Hapa numerikë të barabartë duken si hapa vizualë të barabartë — ajo që HSL pretendon të jetë. |
| OKLCH | OK Lightness, Chroma, Hue | Zgjedhja moderne e CSS-së. Rregullon zhvendosjet e nuancave të LCH-së te blutë; e mbështetur në të gjithë shfletuesit aktualë dhe ideale për sisteme tokenësh dizajni. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientim printimi. Një konvertim i përafërt për t’u folur dizajnerëve të printimit — vlerat përfundimtare vijnë gjithmonë nga profili i ngjyrave i printerit. |
Gjëra të vogla që kursejnë kohë
- Historia ruhet vetë. 24 ngjyrat e fundit me të cilat keni punuar mbijetojnë një rifreskim faqeje — të ruajtura vetëm në ruajtjen lokale të shfletuesit tuaj, kurrë të ngarkuara diku.
- Pipeta. Në shfletues me API-në EyeDropper (Chrome dhe Edge) mund të zgjidhni një ngjyrë nga kudo në ekranin tuaj, madje edhe jashtë dritares së shfletuesit.
- Kontroll me tastierë. Rrota dhe kanavacë e ngopjes reagojnë ndaj shigjetave për rregullime me saktësi pikseli.
- Paracaktuarat mbulojnë ngjyrat bazë të zakonshme kur ju duhet thjesht një pikënisje e shpejtë.
Pyetje të Bëra Shpesh (FAQ)
A është oklch() i sigurt për t’u përdorur në CSS-në e prodhimit?
Po. Të gjitha versionet aktuale të Chrome, Edge, Firefox dhe Safari mbështesin oklch(), dhe është bërë shënimi i preferuar për tokenat e dizajnit (Tailwind CSS 4 e përcakton të gjithë paletën e vet me të). Për shfletues shumë të vjetër, ofroni një rezervë HEX në rreshtin e mëparshëm — ky mjet ju jep të dyja vlerat.