HTML Color Codes

HTML Výběr Barvy pro formáty RGB HEX HSL

Snadno získejte HTML CSS kódy barev pro váš web pomocí výběru barvy, převádějte formáty barev mezi HEX, RGB, HSL, HSV.

Vybrat barvu

Zadejte hodnotu barvy

Nebo použijte HTML5 výběr

Vybraná barva

Červená: 0
Zelená: 255
Modrá: 255
HUE (Stupně): 180
Jas: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Skupina barev: Cyan
Sdílet:
Příklad barvy CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Nejtmavší a nejsvětlejší styly

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Získat barvy z obrázku

get pixel color from pic

Vybrat barvu a vytvořit paletu

select color and create palette

Co je HTML barevný kód?

HTML barevné kódy jsou způsob, jak určit barvy ve webovém designu. Tyto kódy se používají v HTML a CSS k definování barev prvků, jako jsou texty, pozadí, okraje a další. Porozumění HTML barevným kódům je zásadní pro vytváření vizuálně atraktivních a konzistentních webových stránek.

Například, červenou barvu lze identifikovat pomocí následujících formátů:

Typy HTML barevných kódů


Hexadecimální barevné kódy:
  • Nejběžnější způsob, jak určit barvy v HTML a CSS, je použití hexadecimálních (hex) barevných kódů. Hex barevný kód je šestimístná kombinace čísel a písmen definovaná směsí červené, zelené a modré (RGB) složky.
  • Formát: #RRGGBB
  • Příklad: #FF5733 představuje odstín oranžové.
  • Každý pár číslic odpovídá intenzitě červené, zelené a modré, v rozmezí od 00 (žádná intenzita) do FF (plná intenzita).
RGB barevné kódy:
  • RGB barevné kódy definují barvy na základě jejich červené, zelené a modré složky.
  • Formát: rgb(červená, zelená, modrá)
  • Příklad: rgb(255, 87, 51) je RGB ekvivalent #FF5733.
  • Každá složka (červená, zelená, modrá) je určena číslem mezi 0 a 255
RGBA barevné kódy:
  • Podobně jako RGB, ale zahrnuje alfa složku pro průhlednost.
  • Formát: rgba(červená, zelená, modrá, alfa)
  • Příklad: rgba(255, 87, 51, 0.5) specifikuje stejnou barvu s 50% průhledností.
HSL barevné kódy:
  • HSL znamená Hue (odstín), Saturation (sytost) a Lightness (světlost).
  • Formát: hsl(odstín, sytost%, světlost%)
  • Příklad: hsl(9, 100%, 60%) je další způsob, jak reprezentovat barvu #FF5733
  • Odstín je úhel na barevném kole (od 0 do 360), sytost je procento (0% je stupně šedi, 100% je plná barva), a světlost je také procento (0% je černá, 100% je bílá).
HSLA barevné kódy:
  • Podobně jako HSL, ale zahrnuje alfa složku pro průhlednost.
  • Formát: hsla(odstín, sytost%, světlost%, alfa)
  • Příklad: hsla(9, 100%, 60%, 0.5) specifikuje stejnou barvu s 50% průhledností.
Použití HTML barevných kódů:

HTML barevné kódy lze použít v různých CSS vlastnostech k stylizaci webových prvků. Například:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

V tomto příkladu jsou text, pozadí a okraj stylizovány pomocí různých typů HTML barevných kódů, které všechny představují stejný odstín oranžové.

HTML barevné kódy jsou základním aspektem webového designu, umožňující vývojářům přesně definovat a manipulovat s barvami. Porozuměním hex, RGB, RGBA, HSL a HSLA barevným kódům můžete vytvářet vizuálně soudržné a atraktivní webové stránky, které zlepšují uživatelský zážitek.