Převeď hodnoty RGB na HSV

Poslední revize obsahu:

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.

Zápis HSV

Stupně a procenta ukazují Photoshop a Figma. OpenCV ukládá odstín od 0 do 179 a sytost a jas od 0 do 255. Zlomky od 0 do 1 vrací colorsys v Pythonu a Unity.

na

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.

Karty barevných vzorků rozložené do kruhu na světlém stole
Karty barevných vzorků položené do kruhu, od žluté přes zelené a modré až k fialovým, růžovým a červeným. Místo karty na takovém kruhu je v HSV první číslo, tedy odstín. Foto: Andy Brown, Unsplash.

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?

Tabulka ukazuje výsledek převodníku pro dvanáct barev ve všech třech zápisech, které nabízí přepínač Zápis HSV.
Barva a hodnoty RGBKód HEX0–360°, 0–100 %OpenCV (0–179, 0–255)0–1
Červená 255, 0, 0#FF0000hsv(0, 100%, 100%)0, 255, 2550, 1, 1
Oranžová 255, 165, 0#FFA500hsv(38.8, 100%, 100%)19, 255, 2550.1078, 1, 1
Žlutá 255, 255, 0#FFFF00hsv(60, 100%, 100%)30, 255, 2550.1667, 1, 1
Zelená 0, 255, 0#00FF00hsv(120, 100%, 100%)60, 255, 2550.3333, 1, 1
Azurová 0, 255, 255#00FFFFhsv(180, 100%, 100%)90, 255, 2550.5, 1, 1
Modrá 0, 0, 255#0000FFhsv(240, 100%, 100%)120, 255, 2550.6667, 1, 1
Fialová 128, 0, 128#800080hsv(300, 100%, 50.2%)150, 255, 1280.8333, 1, 0.502
Purpurová 255, 0, 255#FF00FFhsv(300, 100%, 100%)150, 255, 2550.8333, 1, 1
Bílá 255, 255, 255#FFFFFFhsv(0, 0%, 100%)0, 0, 2550, 0, 1
Šedá 128, 128, 128#808080hsv(0, 0%, 50.2%)0, 0, 1280, 0, 0.502
Černá 0, 0, 0#000000hsv(0, 0%, 0%)0, 0, 00, 0, 0
Modrá 59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)109, 194, 2460.6034, 0.7602, 0.9647
OpenCV ukládá odstín jako polovinu úhlu, aby se vešel do jednoho bajtu, proto má modrá hodnotu 120, a ne 240. Sytost a jas tam sahají do 255 místo do 100 %[4].

Jaké hodnoty HSV mají modré odstíny z designového systému gov.cz?

Jednotný vizuální styl gov.cz skládá primární paletu z odstínů modré barvy[5]. Po převodu tímto převodníkem je vidět, jak paleta postupuje: světlé odstíny mají nízkou sytost a vysoký jas, tmavé naopak vysokou sytost a nízký jas.
Odstín paletyKód HEXHodnoty RGBHSV
primary-300#9EC8E9158, 200, 233hsv(206.4, 32.2%, 91.4%)
primary-400#689CD1104, 156, 209hsv(210.3, 50.2%, 82%)
primary-500#3771B855, 113, 184hsv(213, 70.1%, 72.2%)
primary-600#00469B0, 70, 155hsv(212.9, 100%, 60.8%)
primary-700#0E357814, 53, 120hsv(217.9, 88.3%, 47.1%)
primary-800#10265716, 38, 87hsv(221.4, 81.6%, 34.1%)
primary-900#0C183812, 24, 56hsv(223.6, 78.6%, 22%)
Na rozdíl od palet, které mění jen jednu hodnotu, se tady odstín posouvá od 206° ve světlých tónech k 224° v nejtmavších, takže tmavé modré jdou trochu do fialova. V HSV takový posun poznáš na první pohled, zatímco z kanálů RGB ho nevyčteš.

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ě.

  1. 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 %.
  2. 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.
  3. OpenCV

    8bitový obrázek má po cv2.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.
  4. Python a Unity

    colorsys.rgb_to_hsv bere kanály od 0 do 1 a výsledek vrací ve stejné škále[7]. Color.RGBToHSV v Unity dává H, S a V také od 0 do 1[8]. Oběma odpovídá volba 0–1.

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?

Každý z těchto zápisů pole přijme a převede, takže před vložením nemusíš nic opravovat. Tabulka ukazuje, co s každým z nich převodník udělá, a výsledky spočítal sám s volbou 0–360°, 0–100 %.
Co zadášCo převodník ukážeJak to čteme
rgb(59, 130, 246)hsv(217.2, 76%, 96.5%)Zápis CSS se závorkou bereme beze změny.
59 130 246hsv(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: 246hsv(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,9647hsv(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, 128hsv(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

  1. HSL and HSV — Wikipedie (anglicky)
  2. Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
  3. Výběr barev v aplikaci Adobe Photoshop — Adobe
  4. Color conversions: RGB ↔ HSV — OpenCV
  5. Barvy — Jednotný vizuální styl gov.cz — Design systém gov.cz
  6. About color models — Figma Help Center
  7. colorsys — Conversions between color systems — Python Software Foundation
  8. Color.RGBToHSV — Unity
  9. Image file reading and writing: imread — OpenCV
  10. 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.

Snímek obrazovky bezplatného nástroje Arteon: Převeď hodnoty RGB na HSV

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.