Jak přesně zjistit barvu z obrázku: HEX, RGB a HSL

Chcete-li získat přesnou barvu z obrázku, odečtěte hodnotu jednoho pixelu, místo abyste ji odhadovali očima. Otevřete obrázek v Pipeta barvy z obrázku, najeďte myší na požadované místo, klikněte a zkopírujte kód HEX. Odečtená hodnota je uložená hodnota daného pixelu, takže zůstane stejná pokaždé, když vyberete stejné místo ve stejném souboru.

Pipeta barvy z obrázkuPotřebuji přesný kód barvyVyzkoušet zdarma

Co pixel ukládá

Každý pixel je drobný čtvereček barvy. Na obrazovce nebo v obrazovém souboru je uložen jako tři čísla pro červenou, zelenou a modrou, každé od 0 do 255. Čistě červená je 255, 0, 0. Tato tři čísla nesou ve všech formátech stejnou informaci, takže jednu barvu lze zapsat několika způsoby.

HEX, RGB a HSL

• HEX zapisuje každé číslo v hexadecimální soustavě, dva znaky na kanál. #FF0000 je čistě červená. Webové stránky, CSS a většina návrhových nástrojů ji používají.
• RGB zapisuje stejná čísla v desítkové soustavě jako rgb(255, 0, 0). Je to stejná barva jako kód HEX.
• HSL popisuje barvu tak, jak o ní lidé mluví. Odstín je úhel na barevném kruhu, sytost je síla barvy a světlost říká, jak je barva světlá nebo tmavá. hsl(0, 100%, 50%) je čistě červená.

Použijte HEX, když vkládáte barvu do kódu, RGB, když to nástroj vyžaduje, a HSL, když chcete světlejší nebo tmavší variantu stejného odstínu. Změna pouze světlosti v HSL zachová odstín, což se u HEX ručně dělá hůř. Kontrast mezi dvěma barvami ověříte v článku HEX, RGB, HSL, CMYK a kontrast.

Ukázka barvy použité ve stylopise:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Proč kód nemusí odpovídat obrazovce

• Obrázek je komprimovaný. JPEG šetří místo vyhlazováním jemných detailů, takže pixely u hrany se mohou mírně lišit od barvy, kterou vidíte uprostřed plochy.
• Hrany se stírají. Tam, kde se stýkají dvě barvy, jsou pixely mezi nimi směsí. Nejsou to samostatné barvy.
• Barevné profily se liší. Pipeta čte hodnoty, které prohlížeč dekóduje, a ty jsou v sRGB. Fotka uložená s profilem širokého gamutu může v jiných programech vypadat jinak.
• Škálování míchá pixely. Snímek pořízený při škálovaném zobrazení může mít smíchané pixely. Když to jde, pořiďte snímek v plné velikosti.
• Velmi velké obrázky se čtou z kopie. Obrázky, jejichž delší strana přesahuje 6000 pixelů, se čtou z kopie o 6000 pixelech, takže se jednotlivý pixel může mírně lišit od souboru v plné velikosti.

Vybírejte ze středu jednolité plochy

Najděte oblast jedné barvy a přesuňte se do jejího středu. Lupa ukazuje 11 × 11 pixelů kolem kurzoru, takže vidíte, zda je místo smíchané, nebo jednolité. Z klávesnice posouvejte zaměřovací kříž po jednom pixelu šipkami, nebo po deseti s klávesou Shift, a výběr potvrďte klávesou Enter. Než hodnotu zkopírujete, zkontrolujte odečet.

Paleta pro barevné schéma

Fotka málokdy obsahuje jen jednu barvu, která vás zajímá. Paleta vypíše až šest hlavních barev. Funguje tak, že zaokrouhlí každý pixel na 16 úrovní v každém kanálu, spočítá skupiny a ponechá nejčastější skupiny, které se od sebe liší. Každý vzorek ukazuje průměr své skupiny. Klepnutím na vzorek zkopírujete jeho kód HEX. Paletu berte jako výchozí bod, protože jde o průměr, a ne o změřenou značkovou barvu.

Převod mezi formáty

Pokud návrhový nástroj chce jiný formát, vložte kód HEX do převodníku barev. Převádí mezi HEX, RGB a HSL bez změny barvy, takže výsledek odpovídá kódu, který jste vybrali.

Poslední výběry a soukromí

Nástroj si na stránce ponechá vaše poslední výběry, abyste je mohli porovnat. Žijí jen v paměti tohoto panelu a po zavření karty zmizí. Obrázek se čte přímo ve vašem prohlížeči a na server se nikdy neodesílá.

Jak to uděláte s fixmint

1. Otevřete Pipetu barvy z obrázku a vložte fotku.
2. Najeďte kurzorem na místo. Nebo obrázek zaměřte a šipkami posouvejte zaměřovací kříž po jednom pixelu; s klávesou Shift se posune o deset pixelů.
3. Klikněte nebo stiskněte Enter a vyberte barvu. Než hodnotu zkopírujete, zkontrolujte odečet.
4. Tlačítkem Kopírovat vedle HEX, RGB nebo HSL zkopírujte hodnotu, kterou potřebujete.
5. Pokud návrhový nástroj chce jiný formát, vložte hodnotu do převodníku barev.

Rychlé odpovědi

Proč barva na mé obrazovce vypadá jinak? Obrazovka zobrazuje barevně spravovanou a škálovanou verzi souboru. Vyberte barvu ze středu jednolité plochy a porovnejte kód HEX se známým vzorkem.

Který formát mám zkopírovat? HEX pro webové stránky a většinu návrhových nástrojů. RGB nebo HSL použijte, když to nástroj vyžaduje.

Nahrává nástroj můj obrázek? Ne. Obrázek se dekóduje a čte přímo ve vašem prohlížeči.