Převody barev

Převody – Podrobnosti – Harmonie – Obrázky – Náhled – Simulace barvosleposti – CSS – Nápověda

Převody

Zde vidíte své barvy převedené do 15 různých barevných formátů, jako jsou RGB, CMYK, HSV, HSL, CIELab, Android, Decimal a YUV.

🤖 Převeďte více barev najednou nebo 📢 získejte Převody a harmonie prostřednictvím rozhraní REST API.

• 📕 HOWCOLORS.WORK
• Rozdělení
• Jas & Přechody sytosti
• Analogická
• Triadická
• Komplementární
• Komplementární
• Čtvercové
• Obdélník
• Sweetspot
• Bílé pozadí
• Kontrola barevného kontrastu
• Černé pozadí
• Kontrola barevného kontrastu
• RGB 73, 108, 60 Pozadí
• Dichromacie
• Trichromacie
• Monochromacie
• Text
• Border
• Pozadí
• 📕 JAKCOLORS.WORK
• Převod
• Podrobnosti
• Harmonie
• SVG obrázky
• Preview
• Simulace barevné slepoty
• Příklady CSS
• Color Bucket
• Kontrola barevného kontrastu

📕 HOWCOLORS.WORK

Průvodce barevným zápisem CSS.

Nebo si ji kupte na Leanpubu!

Podrobnosti

Barva RGB 73, 108, 60 je tmavá barva a verze websafe je hex 336633. Doplněk této barvy by byl 95, 60, 108 a verze ve stupních šedi je 92, 92, 92.
O 20 % světlejší verze původní barvy je 123, 160, 108 a 26, 60, 16 je o 20 % tmavší barva. Pokud barvu nasytíte o 10 %, získáte 65, 108, 49, a pokud ji desaturujete o 10 %, je to 81, 108, 71.

Rozdělení

Jas & Přechody sytosti

Tyto přechody ukazují, jak se změní barva RGB 73, 108, 60 změnou jasu o 10 procent. První obrázek ukazuje posun o +10 % pro každou barvu a druhý obrázek -10 %.

Podobně jako gradienty jasu, ale následující gradienty sytosti ukazují změnu barvy RGB 73, 108, 60 změnou sytosti o 10 % místo toho.

Harmonie

Obrázky SVG

Výběr obrázků SVG s použitím hexadecimální verze #496C3C aktuální barvy.

Náhledy

RGB 73, 108, 60 Pozadí

Simulace barvosleposti

Barvoslepost je velmi složité téma a nedokázal bych popsat různé příčiny lépe než Wikipedie, takže pokud se chcete dozvědět více, měli byste se podívat na jejich článek o barvosleposti.

Dichromacie

Trichromacie

Monochromacie

Příklady CSS

Text

Vlastnost CSS pro změnu barvy textu na RGB 73, 108, 60 se nazývá „color“. Vlastnost color lze nastavit na třídách, id nebo přímo na elementu HTML.

Tento příklad ukazuje, jak vypadá text v barvě rgb(73, 108, 60).

📋 Copy Code

Pokud chcete přidat stín textu v této barvě, použijte vlastnost text-shadow, stín textu můžete vygenerovat přímo pomocí našeho generátoru 🔧 CSS Text Shadow.

Tady vidíte, jak vypadá černý text s barevným stínem o velikosti 4 pixelů rgb(73, 108, 60).

📋 Copy Code

Border

Vlastnost CSS pro změnu ohraničení prvku na RGB 73, 108, 60 se nazývá „border“. Vlastnost border lze nastavit na třídách, id nebo přímo na prvku HTML.

Tento příklad ukazuje barvu jako border, lze ji použít pomocí vlastnosti CSS „border“ nebo „border-color“.

📋 Copy Code

Pokud se má změnit pouze barva okraje, použijte vlastnost border-color.

📋 Copy Code

Pokud chcete přidat stín rámečku v této barvě, použijte:

Tady vidíte, jak vypadá rámeček se stínem v barvě 4 pixely rgb(73, 108, 60).

📋 Copy Code

Pozadí

Vlastnost CSS pro změnu barvy pozadí prvku na RGB 73, 108, 60 se nazývá „background“. Vlastnost background lze nastavit na třídách, id nebo přímo na prvku HTML.

📋 Copy Code

Pokud má být změněna pouze barva pozadí, lze použít:

📋 Copy Code

Tento příklad ukazuje barvu jako pozadí, je použita prostřednictvím vlastnosti CSS „background“.

Pro optimalizaci a kompresi kódu CSS můžete použít náš online kompresor a optimalizátor CSS založený na csstidy. Pokud chcete vytvořit lineární nebo radiální gradient jako pozadí nebo ohraničení, podívejte se na náš 🌈 Generátor gradientů CSS.

📕 JAKCOLORS.WORK

Průvodce barevným zápisem CSS.

nebo si ji kupte na Leanpubu!

Jak používat Převod barev

Převod

Pro převod vložte do vstupního pole řetězec v jednom z těchto formátů barev, například „496C3C“, a klikněte na převést. Výsledek bude v části Převody a v následujících částech se dozvíte další podrobnosti o barvě.

Některé formáty barev používají stejný zápis a převod odhadne složení vyhledávacího dotazu. Jako příklad lze uvést, že pokud se pokusíte převést řetězec „104°, 44%, 42%“, může se jednat o barvu HSV nebo HSL, převod bude v tomto případě předpokládat HSL.

Jelikož by to mohlo vést k nesprávným převodům, můžete definovat, který formát předáváte, zabalením barevného řetězce do závorek s formátem před sebou. Vyhledávací řetězec „HSV(104°, 44%, 42%)“ vám poskytne správnou barvu HSV, protože není třeba hádat formát. Dalšími příklady mohou být „CIELAB(41,95, -22,52, 22,92)“, „CIELCH(42, 32,133, 134,485)“, „YXY(12,4678, 0,3233, 0,4517)“ a „CMYK(0,32, 0,00, 0,44, 0,58)“.

Podrobnosti

V části s podrobnostmi se nejprve zobrazí shrnutí barvy a popis, pokud je k dispozici, například „tmavě tlumená červená“. Rozdělení barev si můžete prohlédnout v různých formátech. Například ve formátu RGB se dozvíte množství červené, zelené a modré barvy.

Nakonec získáte gradienty jasu a sytosti barvy v krocích po 10 %. Pokud tedy potřebujete jasnější nebo tmavší verzi, můžete si ji zde vybrat.

Harmonie

Harmonie vám v podstatě ukazují barvy, které se hodí k právě zobrazované barvě. Pokud se vám některá z harmonií líbí, můžete z ní přímo vytvořit 🌈 CSS Gradient nebo 🔧 CSS Text Shadow nebo si harmonii prohlédnout jako 🖌️ Color Bucket.

SVG obrázky

Tato krátká část vám ukáže výběr SVG souborů, které používají aktuální barvu. Tyto soubory si můžete stáhnout a použít je ve svých projektech, například jako obrázek na pozadí.

Preview

Chcete vidět, jak vypadá vaše barva na bílém nebo černém pozadí? Pak byste se měli podívat do části „Náhledy“ na stránce s barvami.

Na těchto pozadích také uvidíte barevný kontrast své barvy a získáte odkaz na nástroj pro kontrolu barevného kontrastu s předvybranou barvou.

Simulace barevné slepoty

Při výběru barvy pro svůj projekt byste měli mít na paměti, jak tuto barvu vnímají osoby s vadou barevného vidění. Proto jsem přidal tuto část, ve které jsou zobrazeny náhledy barev pro různé typy nedostatků v barevném vidění.

Příklady CSS

Pokud s tvorbou webových stránek začínáte, možná se budete chtít podívat, jak použít barvu jako barvu popředí, pozadí nebo okraje. V části „Příklady CSS“ najdete přesně toto, nápovědu, jak použít aktuální barvu v CSS.

Pokud si prohlížíte barvu ve formátu, který není v CSS k dispozici, zobrazí se barva převedená do kompatibilního formátu.

Color Bucket

Rozhodli jste se pro barvy pro svůj příští projekt a chcete si je stáhnout jako paletu nebo je sdílet s přáteli a diskutovat o svém rozhodnutí? Pak byste se měli podívat na kbelík barev. Umožňuje uložit až 10 barev, automaticky vytváří palety barev pro každou z těchto barev na základě světlosti a poskytuje matici WCAG.

Každou z palet barev nebo vybrané barvy si můžete stáhnout jako paletu GIMP, Adobe® ASE nebo Tailwind CSS. Navíc si vše můžete zobrazit jako 🌈 CSS Gradient, 🔧 CSS Text Shadow nebo 📷 Obrázek palety barev.

Chcete-li přidat barvu do kbelíku barev, umístím odkaz „❤️ Přidat tuto barvu do kbelíku“ do záhlaví každé stránky na tomto webu.

Kontrola barevného kontrastu

Při rozhodování o barvách pro projekt je nutné mít na paměti barevný kontrast. Nástroj My Color Contrast Checker vám umožní zkontrolovat vybrané barvy podle pokynů pro přístupnost webového obsahu (WCAG) 2.0.

.