Převeď hodnoty RGB na HSV
Zadej tři kanály RGB a výsledek HSV se ukáže už při psaní: rgb(59, 130, 246) je hsv(217.2, 76%, 96.5%). Přepínačem Zápis HSV zvolíš stupně a procenta jako v grafických programech, škálu OpenCV nebo zlomky od 0 do 1 a kanály zapsané zlomky pole pozná samo.
Co je HSV a čím se liší od RGB?
RGB popisuje barvu množstvím červeného, zeleného a modrého světla, které obrazovka vyzařuje v jednom bodě. HSV popisuje tutéž barvu třemi vlastnostmi, které si člověk snáz představí: odstínem (H), tedy úhlem na barevném kole, kde je červená na 0°, zelená na 120° a modrá na 240°, sytostí (S), tedy množstvím barvy, a jasem (V). Stejný model se často jmenuje také HSB, podle anglického brightness[1].
Popsal ho Alvy Ray Smith v roce 1978. Chtěl, aby se barvy na obrazovce vybíraly tak, jak malíř míchá pigmenty: vezme čistý odstín a zesvětlí ho bílou nebo ztmaví černou. V jeho modelu znamená nižší sytost víc bílé a nižší jas víc černé[2].
V dialogu pro výběr barvy ve Photoshopu najdeš model pod názvem HSB: odstín se tam zadává jako úhel od 0° do 360° a sytost a jas v procentech[3]. Česká verze Photoshopu označuje pole odstínu, sytosti a jasu písmeny O, S a J[3]. Hodnoty zapsané s těmito písmeny převede zpátky na RGB převodník HSV na RGB, který je čte podle písmen v jakémkoli pořadí. Pokud potřebuješ tytéž kanály RGB jako šestnáctkový kód, vypíše ti ho převodník RGB na HEX.

Pokud máš barvu v jiném zápisu, třeba v OKLCH, Lab nebo jako kód z Androidu, převodník barev ji ukáže najednou ve všech zápisech.
Jak převést RGB na HSV?
Vyděl každý kanál číslem 255. Jas V je největší ze tří výsledků. Sytost S je rozdíl mezi největším a nejmenším výsledkem, vydělený tím největším. Odstín H závisí na tom, který kanál je nejsilnější[4].
Vzorec: V = max, S = (max − min) ÷ max, a když je nejsilnější modrý kanál, H = 240° + 60° × (R − G) ÷ (max − min). Když převládá červená, počítá se odstín od 0°, a když zelená, od 120°[4].
Vezměme rgb(59, 130, 246). Po vydělení číslem 255 mají kanály hodnoty 0,231, 0,510 a 0,965. Nejvyšší je modrá, takže jas je 96,5 %. Rozdíl mezi nejvyšší a nejnižší hodnotou je 0,733 a 0,733 ÷ 0,965 dává sytost 76 %.
Odstín je 240° + 60° × (0,231 − 0,510) ÷ 0,733, tedy 240° − 22,8° = 217,2°. Celá barva se zapíše jako hsv(217.2, 76%, 96.5%). Když jsou všechny tři kanály stejné, jde o šedou, sytost je 0 a odstín nemá význam[2], takže převodník na jeho místo napíše 0.
Jaké hodnoty HSV mají základní barvy?
| Barva a hodnoty RGB | Kód HEX | 0–360°, 0–100 % | OpenCV (0–179, 0–255) | 0–1 |
|---|---|---|---|---|
| Červená 255, 0, 0 | #FF0000 | hsv(0, 100%, 100%) | 0, 255, 255 | 0, 1, 1 |
| Oranžová 255, 165, 0 | #FFA500 | hsv(38.8, 100%, 100%) | 19, 255, 255 | 0.1078, 1, 1 |
| Žlutá 255, 255, 0 | #FFFF00 | hsv(60, 100%, 100%) | 30, 255, 255 | 0.1667, 1, 1 |
| Zelená 0, 255, 0 | #00FF00 | hsv(120, 100%, 100%) | 60, 255, 255 | 0.3333, 1, 1 |
| Azurová 0, 255, 255 | #00FFFF | hsv(180, 100%, 100%) | 90, 255, 255 | 0.5, 1, 1 |
| Modrá 0, 0, 255 | #0000FF | hsv(240, 100%, 100%) | 120, 255, 255 | 0.6667, 1, 1 |
| Fialová 128, 0, 128 | #800080 | hsv(300, 100%, 50.2%) | 150, 255, 128 | 0.8333, 1, 0.502 |
| Purpurová 255, 0, 255 | #FF00FF | hsv(300, 100%, 100%) | 150, 255, 255 | 0.8333, 1, 1 |
| Bílá 255, 255, 255 | #FFFFFF | hsv(0, 0%, 100%) | 0, 0, 255 | 0, 0, 1 |
| Šedá 128, 128, 128 | #808080 | hsv(0, 0%, 50.2%) | 0, 0, 128 | 0, 0, 0.502 |
| Černá 0, 0, 0 | #000000 | hsv(0, 0%, 0%) | 0, 0, 0 | 0, 0, 0 |
| Modrá 59, 130, 246 | #3B82F6 | hsv(217.2, 76%, 96.5%) | 109, 194, 246 | 0.6034, 0.7602, 0.9647 |
Jaké hodnoty HSV mají modré odstíny z designového systému gov.cz?
| Odstín palety | Kód HEX | Hodnoty RGB | HSV |
|---|---|---|---|
| primary-300 | #9EC8E9 | 158, 200, 233 | hsv(206.4, 32.2%, 91.4%) |
| primary-400 | #689CD1 | 104, 156, 209 | hsv(210.3, 50.2%, 82%) |
| primary-500 | #3771B8 | 55, 113, 184 | hsv(213, 70.1%, 72.2%) |
| primary-600 | #00469B | 0, 70, 155 | hsv(212.9, 100%, 60.8%) |
| primary-700 | #0E3578 | 14, 53, 120 | hsv(217.9, 88.3%, 47.1%) |
| primary-800 | #102657 | 16, 38, 87 | hsv(221.4, 81.6%, 34.1%) |
| primary-900 | #0C1838 | 12, 24, 56 | hsv(223.6, 78.6%, 22%) |
Jak výsledek použít ve Photoshopu, Figmě, OpenCV a Pythonu?
Každý z těchto nástrojů zapisuje HSV ve vlastní škále. U každého uvádíme volbu přepínače Zápis HSV, která dá čísla ve stejné podobě.
Photoshop
V dialogu pro výběr barvy zadej výsledek do textových polí modelu HSB. Odstín je tam úhel od 0° do 360° a sytost a jas jsou v procentech[3], takže zvol 0–360°, 0–100 %.Figma
V seznamu barevných modelů pod posuvníky zvol HSB. Figma tu bere celá čísla: odstín od 0 do 360, sytost a jas od 0 do 100[6]. Výsledek z volby 0–360°, 0–100 % proto zaokrouhli na celá čísla.OpenCV
8bitový obrázek má pocv2.cvtColor(obrazek, cv2.COLOR_RGB2HSV)odstín od 0 do 180 a sytost a jas od 0 do 255[4]. Volba OpenCV (0–179, 0–255) počítá stejnou celočíselnou aritmetikou. Porovnali jsme ji s OpenCV.js 4.10 na všech 16 777 216 barvách RGB a všechny výsledky se shodovaly.Python a Unity
Proč OpenCV dává jiný odstín než převodník?
Nejčastěji proto, že OpenCV načítá obrázek s kanály v pořadí modrá, zelená, červená[9]. Obrázek z cv2.imread proto převáděj konstantou cv2.COLOR_BGR2HSV, ne COLOR_RGB2HSV. Záměna změní jen odstín: tytéž tři bajty 59, 130, 246 přečtené jako BGR dají v OpenCV odstín 11 místo 109, tedy oranžovou místo modré.
Druhou pastí je červená. Leží na obou koncích škály odstínu, takže čistá červená má v OpenCV odstín 0, zatímco rgb(225, 0, 15), červená s nádechem modré, už 178. Rozsah, kterým vybíráš červené pixely, musí proto pokrýt oba konce škály.
Jaké zápisy RGB tento převodník přijme?
| Co zadáš | Co převodník ukáže | Jak to čteme |
|---|---|---|
| rgb(59, 130, 246) | hsv(217.2, 76%, 96.5%) | Zápis CSS se závorkou bereme beze změny. |
| 59 130 246 | hsv(217.2, 76%, 96.5%) | Stačí tři čísla oddělená mezerami, protože závorky a čárky nejsou potřeba. |
| R: 59, G: 130, B: 246 | hsv(217.2, 76%, 96.5%) | Písmena kanálů, jak je píše manuál vizuálního stylu, vynecháme a bereme jen čísla. |
| rgb(23.1%, 51%, 96.5%) | hsv(217.2, 76%, 96.5%) | Kanály v procentech převedeme sami na škálu od 0 do 255. |
| rgba(59, 130, 246, 0,5) | hsva(217.2, 76%, 96.5%, 0.5) | Průhlednost zapsanou s desetinnou čárkou přeneseme do výsledku jako hsva. |
| 0,2314 0,5098 0,9647 | hsv(217.2, 76%, 96.5%) | Kanály zapsané jako zlomky od 0 do 1 poznáme podle čárky a převedeme je na škálu od 0 do 255. |
| (59, 130, 246) | hsv(217.2, 76%, 96.5%) | N-tici, kterou vypíše Python, přečteme i se závorkami. |
| [59, 130, 246] | hsv(217.2, 76%, 96.5%) | Pole NumPy, které vypíše Python, přečteme i s hranatými závorkami. |
| background-color: rgb(59, 130, 246); | hsv(217.2, 76%, 96.5%) | Přijmeme celý řádek vložený ze stylopisu a vytáhneme z něj samotnou barvu. |
| 300, -20, 128 | hsv(329.9, 100%, 100%) | Hodnoty mimo rozsah ořízneme stejně jako prohlížeč: z 300 je 255 a z −20 je 0. |
Převést RGB na jiné jednotky
Zdroje
- HSL and HSV — Wikipedie (anglicky)
- Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
- Výběr barev v aplikaci Adobe Photoshop — Adobe
- Color conversions: RGB ↔ HSV — OpenCV
- Barvy — Jednotný vizuální styl gov.cz — Design systém gov.cz
- About color models — Figma Help Center
- colorsys — Conversions between color systems — Python Software Foundation
- Color.RGBToHSV — Unity
- Image file reading and writing: imread — OpenCV
- Changing Colorspaces — OpenCV
Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.
Poslední revize obsahu: · napsal a zkontroloval tým Arteon
Časté otázky k převodu RGB na HSV
Kdy se hodí HSV víc než RGB?
Když barvu vybíráš nebo upravuješ podle odstínu, sytosti a jasu. Dokumentace OpenCV uvádí, že barvu jde v HSV popsat snáz než v BGR[10], a proto se tam objekty určité barvy hledají v HSV. Stylopisy a obrázkové soubory ale ukládají barvu většinou v RGB nebo HEX, takže hotovou barvu nakonec převedeš zpátky na kanály.
Jaký je rozdíl mezi HSV a HSL?
Oba mají stejný odstín, ale zbylá dvě čísla počítají jinak. V HSV má čistá červená jas 100 %, tedy hsv(0, 100%, 100%), v HSL má světlost 50 %, tedy hsl(0, 100%, 50%). Zápis HSL téže barvy ti dá převodník RGB na HSL.
Jak převedu kód HEX na HSV?
Převeď kód na tři kanály v převodníku HEX na RGB a výsledek vlož sem. Pole ho přijme i se závorkou rgb().
Zachová převodník průhlednost?
Ano. Ve stupních a procentech se průhlednost přenese do hsva() a v zápisu 0–1 z ní bude čtvrté číslo. Zápis OpenCV ji vynechá, protože obrázek HSV má v OpenCV jen tři kanály.
Jak se dostanu z HSV zpátky na RGB?
Zadej výsledek do převodníku HSV na RGB. Tlačítko Prohodit pořadí tě tam přenese i s aktuálním výsledkem.

Pomoz nám vylepšit naše nástroje
Máš nápad na novou funkci, vidíš chybu nebo chceš navrhnout jiný nástroj? Napiš nám.