Zgjedhës ngjyrash
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, harmoni 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 apo RGB? Tre rrota ngjyrash në vend të një
Zgjedhësi Modaliteti i rrotës ndryshon vetë gjeometrinë e rrotës:
- HSV dhe HSL janë rrotat dixhitale: nuancat vendosen ashtu siç i përzien dritën ekrani. 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 (shihni modelin RYB, në anglisht). 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 dhe të qëndrueshme kur njëra dominon dhe të tjerat përdoren me kursim.
- Tetradike (katror): katër nuanca. Skema të pasura për ilustrime dhe grafikë, të vështira për t’u balancuar në ndërfaqe përdoruesi.
- Analoge: fqinjët e menjëhershëm. Kombinim i qetë për sfonde dhe gradientë.
- Monokromatike: një nuancë me ndriçim të shkallëzuar. Zgjedhja më e sigurt për gjendjet e butonave (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 kod. Nëse doni të shihni shpejt a mbajnë ngjyrat e paletës kontrast edhe për njerëz që i dallojnë më vështirë nuancat, bëni një pamje ekrani dhe provoni konvertimin në shkallë gri.
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() dhe rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, si dhe emra ngjyrash CSS si rebeccapurple. Çfarëdo që futni, merrni shtatë rezultate të sinkronizuara: HEX, RGB, HSL, HSV, LCH, OKLCH dhe CMYK, secila me butonin e vet të kopjimit.
Rrëshqitësi Opaciteti (alfa) poshtë pamjes paraprake kalon rezultatet në formatet transparente #RRGGBBAA, rgba() dhe hsla(). Pamja paraprake vizatohet mbi një sfond shahu, kështu që transparencën e shihni menjëherë.
Shenja më e afërt e Tailwind CSS për çdo ngjyrë
Dy etiketa 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 shenja Tailwind më e afërt, për shembull orange-500. Kështu mbeteni brenda sistemit tuaj të dizajnit, pa shpikur vlera një-përdorimshe. Klikoni etiketën për ta kopjuar.
Kjo zgjidh pyetjen që shfaqet në çdo dorëzim dizajni: dizajneri ju dërgoi një kod hex, cila klasë Tailwind i përgjigjet më afër? Përputhja llogaritet kundrejt paletës parazgjedhur të Tailwind CSS 4 (shihni dokumentacionin e Tailwind, në anglisht), kështu që shenjën mund ta ngjitni drejtpërdrejt në emrin e klasës.
Cilin format ngjyrash të përdorni?
| Format | Emri i Plotë | Kur ta përdorni |
|---|---|---|
| HEX | Hexadecimal | Parazgjedhja e uebit. I shkurtër, i mbështetur kudo, i lehtë për t’u kopjuar. Tetë shifra shtojnë alfa. |
| RGB | Red, Green, Blue | Si mendojnë ekranet. Tre kanale drite nga 0 deri në 255. Formati që presin shumica e API-ve dhe kodit canvas. |
| HSL | Hue, Saturation, Lightness | Për rregullime me sy. “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 mbi të cilin ndërtohen zgjedhësit e ngjyrave në Photoshop dhe GIMP. |
| LCH | Lightness, Chroma, Hue | I njëtrajtshëm sipas perceptimit. Hapa numerikë të barabartë duken si hapa vizualë të barabartë, gjë që HSL vetëm pretendon ta bëjë. |
| OKLCH | OK Lightness, Chroma, Hue | Zgjedhja moderne për CSS. Rregullon zhvendosjet e nuancës te blutë që trazojnë LCH-në. E mbështetur në të gjithë shfletuesit aktualë dhe ideale për tokena dizajni. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientim për printim. Konvertim i përafërt për t’u folur me shtypshkronjën, vlerat përfundimtare i cakton profili i saj i ngjyrave. |
Pse OKLCH është më i njëtrajtshëm sipas perceptimit se modelet e vjetra, shpjegon vetë autori i hapësirës Oklab, Björn Ottosson, në artikullin origjinal (në anglisht). Sintaksën dhe mbështetjen në shfletues i përmbledh MDN (në anglisht). Si funksionon modeli i printimit shpjegohet te Wikipedia, artikulli CMYK.
Gjëra të vogla që kursejnë kohë
- Historia ruhet vetë. 24 ngjyrat e fundit mbijetojnë rifreskimin e faqes. Qëndrojnë vetëm në ruajtjen lokale të shfletuesit tuaj dhe nuk dërgohen askund.
- Pipeta. Në shfletues me API-në EyeDropper (Chrome dhe Edge) zgjidhni një ngjyrë nga kudo në ekranin tuaj, madje edhe jashtë dritares së shfletuesit. Ngjyrën nga një foto ose skedar me logo e gjeni te pikuesi i ngjyrave nga imazhi.
- Kontroll me tastierë. Rrota dhe kanavacë e ngopjes reagojnë ndaj shigjetave, kështu që rregulloni ngjyrën me hapa të vegjël.
- Paracaktuarat ofrojnë ngjyrat bazë të zakonshme kur ju duhet vetëm një pikënisje e shpejtë.
Pyetje të Bëra Shpesh
Si e konvertoj OKLCH në HEX?
Ngjitni vlerënoklch() në fushën OKLCH dhe të gjitha rezultatet e tjera, HEX i përfshirë, përditësohen menjëherë. Funksionon edhe në drejtimin tjetër: shkruani një kod HEX dhe lexoni oklch() përkatës. Një paralajmërim: OKLCH mund të përshkruajë ngjyra jashtë gamutit sRGB, dhe ato pritën te sa mund të shfaqë sRGB. Prandaj një oklch() shumë i ngopur nuk do të duket njësoj si forma e tij HEX në një ekran me gamut të gjerë.
A mund ta përdor oklch() në CSS-në e prodhimit?
Po. Të gjitha versionet aktuale të Chrome, Edge, Firefox dhe Safari e mbështesinoklch(), dhe është bërë shënim i preferuar për tokena dizajni (Tailwind CSS 4 e përcakton të gjithë paletën e vet me të). Për shfletues shumë të vjetër, vendosni një rezervë HEX në rreshtin para tij. Ky mjet ju jep të dyja vlerat.