CodeKitHubŠto je ovaj alat?
Boje na webu zapisuju se u nekoliko ekvivalentnih formata, definiranih u CSS Color specifikaciji na MDN-u. HEX (#4f46e5) je kompaktan oblik koji se koristi posvuda u CSS-u i pri predaji dizajna. RGB (rgb(79, 70, 229)) izravno navodi crvenu, zelenu i plavu komponentu, što kod često treba. HSL (hsl(243, 75%, 59%)) opisuje nijansu, zasićenost i svjetlinu — najintuitivniji format za prilagodbu boje, npr. njeno zatamnjivanje ili smanjenje zasićenosti.
Sva tri opisuju istu boju; ovaj alat pretvara među njima točno i prikazuje pregled kako biste potvrdili da je to boja koju ste mislili.
Zašto ga koristiti?
- Prihvaća bilo koji ulazni format — HEX (3 ili 6 znamenki), RGB ili HSL — i daje sve formate na izlazu.
- Prikaz uživo tako da vidite boju, ne samo brojke.
- Vizualni birač boje kada radije birate okom.
- Kopiranje jednim klikom za svaki format, spremno za CSS ili kod.
- Besplatno, trenutno, bez uploada.
Kako ga koristiti
- Upišite ili zalijepite boju: #4f46e5, rgb(79, 70, 229) ili hsl(243, 75%, 59%) — sve radi.
- Ili kliknite birač boje i odaberite vizualno.
- Pročitajte sva tri formata u rezultatima i provjerite prikaz boje.
- Kliknite "Kopiraj" pored formata koji vam treba.
Primjer
Ulaz
#4f46e5Izlaz
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tri zapisa, jedna identična boja.
Koji format trebate koristiti?
Sva tri opisuju istu boju potpuno točno — izbor je pitanje s čime je lakše raditi za trenutni zadatak, ne pitanje točnosti.
| Format | Najbolji za | Zašto |
|---|---|---|
| HEX (#4f46e5) | CSS, predaja dizajna, brzo kopiranje-lijepljenje | Najkraći za upisati i zalijepiti; univerzalni format u dizajnerskim alatima poput Figme. |
| RGB (rgb(79,70,229)) | Kod koji izravno manipulira kanalima, rad s canvasom/slikama | Odgovara načinu na koji grafički API-ji i podaci piksela slike stvarno pohranjuju boju. |
| HSL (hsl(243,75%,59%)) | Prilagodba boje — svjetlije, tamnije, više/manje zasićeno | Svjetlina i zasićenost su odvojeni brojevi koje možete izravno podešavati, za razliku od HEX/RGB gdje se pomiče svaki kanal. |
Uobičajeni slučajevi korištenja
- Vizualni odabir boje u dizajnerskom alatu, a zatim pretvorba u točnu HEX ili RGB vrijednost potrebnu u CSS-u ili kodu.
- Generiranje skupa srodnih nijansi (svjetlije/tamnije varijante) pretvorbom u HSL, prilagodbom svjetline i pretvaranjem natrag.
- Usklađivanje boje marke u različitim alatima koji svaki očekuju drugačiji format — datoteka loga u RGB-u, vodič stila u HEX-u, CSS varijabla kojoj treba HSL za tematiziranje.
- Provjera odgovara li boja preuzeta sa snimke zaslona ili dizajnerske datoteke (često zadana kao RGB) HEX vrijednosti u stylesheetu.
Često postavljana pitanja
Kada koristiti HSL umjesto HEX ili RGB?
Kada želite logički razmišljati o boji. Zatamnjivanje boje za 10% u HSL-u znači smanjenje svjetline za 10 bodova; u HEX-u ili RGB-u morali biste ponovno izračunati sve kanale. Dizajnerski sustavi zato često definiraju palete u HSL-u.
Podržava li alat 3-znamenkasti HEX poput #fff?
Da. #fff je skraćeni zapis za #ffffff — svaka znamenka se udvostručuje. Oba oblika su prihvaćena, a izlaz prikazuje puni 6-znamenkasti oblik.
Što je s alfa kanalom (prozirnošću)?
Ovaj alat pretvara neprozirne boje (RGB/HSL vrijednosti). Ako vam treba prozirnost, dodajte alfu sami: rgba(79, 70, 229, 0.5) ili #4f46e580 — dio s bojom ostaje isti.
Zašto se moje HSL vrijednosti razlikuju za 1 od drugog alata?
Zaokruživanje. Konverzija HSL↔RGB proizvodi decimalne vrijednosti, a alati zaokružuju različito. Razlika od ±1 u nijansi ili postotku je nevidljiva i normalna.
Jesu li podržani nazivi boja poput 'red'?
Ne u prvoj fazi — alat se fokusira na tri numerička formata koja programeri najčešće pretvaraju. Unesite HEX/RGB/HSL vrijednost boje ili je odaberite vizualno pomoću birača.
Kada koristiti HEX, RGB ili HSL?
Ako vam treba prozirnost, koristite 8-znamenkasti HEX (#RRGGBBAA) ili rgba() — 6-znamenkasti HEX nema alfa kanal. Ako želite svjetlije ili tamnije varijante iste boje, HSL je najlakši: zadržite nijansu i zasićenost fiksnima i mijenjajte samo broj svjetline. Za obično kopiranje u CSS ili dizajnerske alate, 6-znamenkasti HEX ostaje najuniverzalnije prihvaćen oblik.