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
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) ésFF
(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
és255
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
és360
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.
- Az összes CSS színnév megtekintéséhez tekintse meg a HTML Színnevek részt.
- Az összes színcsoport megtekintéséhez tekintse meg a Színcsoportok részt.
- A színábrák megtekintéséhez tekintse meg a HTML Színábrák részt.
- Ha többet szeretne olvasni a html színekről, a Wikipédián egy jó forrás található a webes színekről: https://en.wikipedia.org/wiki/Web_colors.