CodeKitHubČo je tento nástroj?
Farby na webe sa zapisujú vo viacerých rovnocenných formátoch, definovaných špecifikáciou CSS Color na MDN. HEX (#4f46e5) je kompaktný tvar používaný všade v CSS a pri odovzdávaní dizajnov. RGB (rgb(79, 70, 229)) priamo udáva zložky červenej, zelenej a modrej, čo často potrebuje kód. HSL (hsl(243, 75%, 59%)) opisuje odtieň, sýtosť a jas — najintuitívnejší formát na úpravu farby, napríklad na jej stmavenie alebo zníženie sýtosti.
Všetky opisujú tú istú farbu; tento nástroj medzi nimi presne prevádza a zobrazuje náhľad, aby ste si mohli overiť, že ide o farbu, ktorú ste mali na mysli.
Prečo ho používať?
- Prijíma ľubovoľný formát na vstupe — HEX (3- alebo 6-miestny), RGB alebo HSL — a na výstupe dáva všetky formáty.
- Vzorka náhľadu naživo, aby ste videli farbu, nielen čísla.
- Vizuálny výber farby, ak ju radšej vyberiete okom.
- Kopírovanie jedným kliknutím pre každý formát, pripravené na CSS alebo kód.
- Zadarmo, okamžite, bez nahrávania.
Ako sa používa
- Napíšte alebo vložte farbu: fungujú #4f46e5, rgb(79, 70, 229) aj hsl(243, 75%, 59%).
- Alebo kliknite na výber farby a vyberte ju vizuálne.
- Prečítajte si všetky tri formáty vo výsledkoch a skontrolujte vzorku náhľadu.
- Kliknite na „Kopírovať“ vedľa formátu, ktorý potrebujete.
Príklad
Vstup
#4f46e5Výstup
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tri zápisy, jedna identická farba.
Ktorý formát použiť?
Všetky tri presne opisujú tú istú farbu — výber závisí od toho, s ktorým sa vám na danú úlohu najlepšie pracuje, nie od presnosti.
| Formát | Najlepšie na | Prečo |
|---|---|---|
| HEX (#4f46e5) | CSS, odovzdávanie dizajnov, rýchle kopírovanie | Najkratší na napísanie a vloženie; univerzálny formát v dizajnérskych nástrojoch ako Figma. |
| RGB (rgb(79,70,229)) | Kód, ktorý priamo manipuluje s kanálmi, práca s canvasom/obrázkami | Zodpovedá tomu, ako grafické API a obrazové pixelové dáta skutočne ukladajú farbu. |
| HSL (hsl(243,75%,59%)) | Úprava farby — svetlejšia, tmavšia, viac/menej sýta | Jas a sýtosť sú samostatné čísla, ktoré môžete priamo ladiť, na rozdiel od HEX/RGB, kde sa mení každý kanál. |
Bežné prípady použitia
- Výber farby vizuálne v dizajnérskom nástroji a jej následný prevod na presnú hodnotu HEX alebo RGB potrebnú v CSS alebo kóde.
- Vytvorenie sady súvisiacich odtieňov (svetlejšie/tmavšie varianty) prevodom na HSL, úpravou jasu a spätným prevodom.
- Zhoda farby značky naprieč rôznymi nástrojmi, z ktorých každý očakáva iný formát — logo súbor v RGB, štýlová príručka v HEX, CSS premenná, ktorá pre tému potrebuje HSL.
- Overenie, či farba prevzatá zo snímky obrazovky alebo dizajnového súboru (často udaná ako RGB) zodpovedá hodnote HEX v štýlopise.
Časté otázky
Kedy mám použiť HSL namiesto HEX alebo RGB?
Keď chcete o farbe uvažovať. Stmaviť farbu o 10 % v HSL znamená znížiť jas o 10 bodov; v HEX alebo RGB by ste museli prepočítať všetky kanály. Dizajnové systémy preto často definujú palety v HSL.
Podporuje nástroj 3-miestny HEX ako #fff?
Áno. #fff je skratka pre #ffffff — každá číslica sa zdvojí. Prijímajú sa obe formy a výstup zobrazuje plný 6-miestny tvar.
Čo alfa (priehľadnosť)?
Tento nástroj prevádza nepriehľadné farby (hodnoty RGB/HSL). Ak potrebujete priehľadnosť, pridajte alfa sami: rgba(79, 70, 229, 0.5) alebo #4f46e580 — samotná farba zostáva rovnaká.
Prečo sa moje hodnoty HSL líšia o 1 od iného nástroja?
Zaokrúhľovanie. Prevod HSL↔RGB produkuje desatinné hodnoty a rôzne nástroje zaokrúhľujú inak. Rozdiel ±1 v odtieni alebo percentách je neviditeľný a normálny.
Sú podporované aj názvy farieb ako „red“?
Vo Fáze 1 nie — nástroj sa zameriava na tri číselné formáty, ktoré vývojári prevádzajú najčastejšie. Zadajte hodnotu farby v HEX/RGB/HSL alebo ju vyberte vizuálne pomocou výberu.
Kedy mám použiť HEX, RGB alebo HSL?
Ak potrebujete priehľadnosť, použite 8-miestny HEX (#RRGGBBAA) alebo rgba() — 6-miestny HEX nemá alfa kanál. Ak chcete svetlejšie alebo tmavšie varianty tej istej farby, najjednoduchší je HSL: ponechajte odtieň a sýtosť pevné a meňte len číslo jasu. Na obyčajné kopírovanie do CSS alebo dizajnérskych nástrojov zostáva najuniverzálnejšie prijímanou formou 6-miestny HEX.