HTML Színválasztó RGB HEX HSL formátumokhoz

Könnyedén szerezzen HTML CSS színkódokat a weboldalához a színválasztóval, konvertálja a színformátumot HEX, RGB, HSL, HSV között.

Válasszon egy színt

Adja meg a színértéket

Vagy használja a HTML5 választót

Kiválasztott szín

Vörös: 0
Zöld: 255
Kék: 255
HUE (fok): 180
Fényerő: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Színg csoport: Cyan
CSS3 színpélda

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
          
Legsötétebb és Világosabb stílusok

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

Mi az a HTML Színkód?

A HTML színkódok a színek megadásának egy módja a webdesignban. Ezeket a kódokat használják a HTML-ben és a CSS-ben a színek meghatározására az elemek, mint például a szöveg, a hátterek, a szegélyek és egyebek színezésére. A HTML színkódok megértése elengedhetetlen a vizuálisan vonzó és konzisztens weboldalak létrehozásához.

Például a piros szín az alábbi formátumok segítségével azonosítható:

A HTML Színkódok típusai


Hexadecimális Színkódok:
  • A HTML-ben és CSS-ben a színek megadásának leggyakoribb módja a hexadecimális (hex) színkódok használata. Egy hex színkód egy hatjegyű szám- és betűkombináció, amelyet a piros, zöld és kék (RGB) összetevők keveréke határoz meg.
  • Formátum: #RRGGBB
  • Példa: #FF5733 egy árnyalatot képvisel a narancssárgából.
  • Minden számjegypár a piros, zöld és kék intenzitását jelenti, egy skálán 00 (nincs intenzitás) és FF (teljes intenzitás) között.
RGB Színkódok:
  • Az RGB színkódok a színeket azok piros, zöld és kék összetevőik alapján határozzák meg.
  • Formátum: rgb(piros, zöld, kék)
  • Példa: rgb(255, 87, 51) az #FF5733 RGB egyenértéke.
  • Minden összetevő (piros, zöld és kék) egy 0 és 255 közötti számmal van megadva.
RGBA Színkódok:
  • Hasonló az RGB-hez, de tartalmaz egy alpha összetevőt az átlátszósághoz.
  • Formátum: rgba(piros, zöld, kék, alpha)
  • Példa: rgba(255, 87, 51, 0.5) ugyanezt a színt adja meg 50%-os átlátszósággal.
HSL Színkódok:
  • A HSL a Hue (színárnyalat), Saturation (telítettség) és Lightness (világosság) rövidítése.
  • Formátum: hsl(árnyalat, telítettség%, világosság%)
  • Példa: hsl(9, 100%, 60%) egy másik módja annak, hogy kifejezzük a #FF5733 színt.
  • Az árnyalat egy fok a színkeréken (a 0 és 360 között), a telítettség egy százalék (0% szürkeárnyalatos, 100% teljes szín), és a világosság is százalék (0% fekete, 100% fehér).
HSLA Színkódok:
  • Hasonló a HSL-hez, de tartalmaz egy alpha összetevőt az átlátszósághoz.
  • Formátum: hsla(árnyalat, telítettség%, világosság%, alpha)
  • Példa: hsla(9, 100%, 60%, 0.5) ugyanezt a színt adja meg 50%-os átlátszósággal.
HTML Színkódok használata:

A HTML színkódok különböző CSS-tulajdonságokban használhatók webes elemek stílusához. Például:

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

Ebben a példában a szöveget, a hátteret és a keretet különböző HTML színkód típusokkal formázták, mind ugyanazt az árnyalatot képviselve narancssárgából.

A HTML színkódok a webdesign alapvető részét képezik, lehetővé téve a fejlesztők számára, hogy pontosan meghatározzák és kezeljék a színeket. A hex, RGB, RGBA, HSL és HSLA színkódok megértésével vizuálisan összefüggő és vonzó weboldalakat hozhat létre, amelyek javítják a felhasználói élményt.