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.
RYB vs RGB: 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 ngjyrash 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.
Konvertim HEX, RGB, HSL, OKLCH dhe CMYK: 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.
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.
Gjeni shenjën më të afërt të Tailwind CSS
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. Klikoni në cilindo etiketë për ta kopjuar.
Kjo përgjigjet pyetjes që shfaqet në çdo dorëzim dizajni: një dizajner më dërgoi një kod hex – cila klasë Tailwind i përgjigjet më afër? Përputhja llogaritet kundrejt paletës parazgjedhur të vetë Tailwind CSS 4, kështu që shenja që merrni mund ta ngjitni drejtpërdrejt në emrin e klasës.
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)
Si e konvertoj OKLCH në HEX?
Ngjitni vlerënoklch() në fushën OKLCH dhe çdo rezultat tjetër përditësohet menjëherë, HEX i përfshirë. Funksionon edhe në drejtimin tjetër — shkruani një kod HEX dhe lexoni prapa ekuivalentin oklch(). Një paralajmërim: OKLCH mund të përshkruajë ngjyra jashtë gamutit sRGB, dhe ato pritën kanal pas kanali te sa mund të shfaqë sRGB, kështu që një oklch() me kromë shumë të lartë dhe forma e tij HEX nuk do të duken identike në një ekran me gamut të gjerë.
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.