Našli jste perfektní barvu ve formátu HEX, ale designový nástroj, který používáte, vyžaduje RGB. Nebo vám klient poslal barvu v RGB a vy potřebujete hodnotu HSL pro CSS. Převod formátů barev je každodenní úkol pro designéry a vývojáře. Náš Konvertor barev to provede okamžitě.
Co budete potřebovat
- Hodnotu barvy v libovolném formátu (HEX, RGB, HSL nebo jiném)
- Webový prohlížeč (Chrome, Firefox, Safari nebo Edge)
- Není třeba účet ani instalace
Návod krok za krokem
Zadejte hodnotu barvy
Otevřete nástroj Konvertor barev. Napište nebo vložte hodnotu barvy v libovolném podporovaném formátu. Například zadejte #3B82F6 jako hodnotu HEX, rgb(59, 130, 246) jako RGB nebo hsl(217, 91%, 60%) jako HSL. Nástroj formát rozpozná automaticky.
Zobrazte převody ve všech formátech
Nástroj okamžitě zobrazí vaši barvu ve všech podporovaných formátech: HEX, RGB, HSL a dalších. Vidíte živý náhled barvy spolu se všemi ekvivalentními hodnotami. Pokud potřebujete barvu upravit, použijte výběrač barev pro vizuální doladění.
Zkopírujte potřebný formát
Klikněte na tlačítko kopírování u libovolného formátu pro zkopírování hodnoty do schránky. Vložte ji přímo do souboru CSS, designového nástroje nebo kamkoli ji potřebujete. Žádné ruční přepisování.
Dobré vědět Konvertor barev funguje výhradně ve vašem prohlížeči. Po načtení pracuje offline a nevyžaduje žádný účet ani instalaci.
Porozumění formátům barev
Různé nástroje a kontexty používají různé formáty barev. Zde je přehled, kdy který použít:
HEX
Nejběžnější formát na webu. Barva HEX začíná # následovaným šesti znaky (písmena a čísla), například #FF5733.
- Používá se v: CSS, HTML, designových nástrojích (Figma, Sketch, Photoshop)
- Formát:
#RRGGBBkde každá dvojice je hexadecimální hodnota od 00 do FF - Příklad:
#3B82F6(střední modrá)
RGB
Popisuje barvu pomocí složek Red (červená), Green (zelená) a Blue (modrá), každá v rozsahu 0 až 255.
- Používá se v: CSS (funkce
rgb()), programovacích jazycích, LED osvětlení - Formát:
rgb(červená, zelená, modrá) - Příklad:
rgb(59, 130, 246)
HSL
Popisuje barvu pomocí Hue (odstín, 0–360 stupňů na barevném kole), Saturation (sytost, 0–100 %) a Lightness (světlost, 0–100 %).
- Používá se v: CSS (funkce
hsl()), teorii barev, designových systémech - Formát:
hsl(odstín, sytost%, světlost%) - Příklad:
hsl(217, 91%, 60%)
Tip HSL je nejintuitivnější formát pro úpravu barev. Chcete světlejší odstín? Zvyšte hodnotu světlosti. Chcete tlumenější tón? Snižte sytost. Díky tomu je HSL ideální pro vytváření barevných systémů a variací základní barvy.
Kdy použít jaký formát
| Situace | Doporučený formát |
|---|---|
| Ruční psaní CSS | HEX (krátký a známý) nebo HSL (snadno upravitelný) |
| Specifikace v designových nástrojích | HEX (průmyslový standard) |
| Dynamická manipulace s barvami v kódu | HSL (nejsnáze programově upravitelný) |
| Komunikace barev s klienty | HEX (nejuniverzálněji rozpoznávaný) |
| Tiskový design | CMYK (oddělený od obrazovkových formátů) |
Nad rámec jednotlivých barev
Jakmile máte převedenou barvu, možná budete chtít prozkoumat související nástroje:
- Generátor přechodů: Vytvořte plynulé CSS přechody pomocí vašich barev. Zadejte dvě nebo více barev a získejte kód přechodu připravený k vložení do stylů.
- Generátor barevné palety: Generujte harmonické barevné palety na základě vaší výchozí barvy. Automaticky získejte komplementární, analogické, triadické a jiná barevná schémata.
Tyto nástroje spolupracují s Konvertorem barev a pomohou vám sestavit kompletní barevný systém pro váš projekt.
Důležité Barvy mohou vypadat odlišně na různých obrazovkách kvůli kalibraci displeje, barevným profilům a nastavení jasu. Když je přesnost barev kritická (firemní identita, tiskový design), vždy ověřte barvy na cílovém médiu, nejen na své obrazovce.
Časté otázky
Jaký je rozdíl mezi HEX a RGB?
Reprezentují stejné informace v různých zápisech. HEX používá hexadecimální soustavu (základna 16) a RGB dekadickou (základna 10). #FF0000 a rgb(255, 0, 0) jsou oba čistě červená barva.
Mohu převádět do CMYK pro tisk? Obrazovkové formáty barev (HEX, RGB, HSL) a tiskové formáty (CMYK) jsou v zásadě různé barevné modely. Matematická konverze existuje, ale pro přesné tiskové barvy byste měli použít profesionální nástroj pro správu barev.
Co s průhledností (alfa)?
HEX podporuje alfa s dalšími dvěma znaky (#3B82F680). RGB a HSL ji podporují jako funkce rgba() a hsla(). Konvertor barev tyto formáty také zpracovává.
Další kroky
S převedenými barvami vyzkoušejte Generátor přechodů pro vytvoření krásných CSS přechodů, nebo použijte Generátor barevné palety pro sestavení kompletního barevného schématu kolem zvolené barvy.