CodeKitHubMi ez az eszköz?
A weben a színeket többféle, egyenértékű formátumban írjuk le, amelyeket a CSS Color specifikáció az MDN-en határoz meg. A HEX (#4f46e5) a tömör forma, amelyet mindenhol használnak CSS-ben és tervezői átadásokban. Az RGB (rgb(79, 70, 229)) közvetlenül megadja a piros, zöld és kék összetevőket, amire a kódnak gyakran szüksége van. A HSL (hsl(243, 75%, 59%)) az árnyalatot, telítettséget és világosságot írja le — ez a legkönnyebben érthető formátum egy szín módosításához, például sötétebbé vagy kevésbé telítetté tételéhez.
Mindhárom ugyanazt a színt írja le; ez az eszköz pontosan átalakítja őket egymásba, és előnézetet is mutat, hogy biztos lehess benne, a megfelelő színt kaptad.
Miért érdemes használni?
- Bármilyen formátumot elfogad bemenetként — HEX (3 vagy 6 jegyű), RGB vagy HSL —, és mindegyik formátumot megadja kimenetként.
- Élő előnézeti minta, így nem csak számokat, hanem magát a színt is látod.
- Vizuális színválasztó, ha inkább szemre választanál.
- Egykattintásos másolás formátumonként, azonnal használható CSS-ben vagy kódban.
- Ingyenes, azonnali, feltöltés nélkül.
Használati útmutató
- Gépelj be vagy illessz be egy színt: #4f46e5, rgb(79, 70, 229) vagy hsl(243, 75%, 59%) — mindegyik működik.
- Vagy kattints a színválasztóra, és válassz vizuálisan.
- Olvasd le mindhárom formátumot az eredmények között, és ellenőrizd az előnézeti mintát.
- Kattints a "Másolás" gombra a kívánt formátum mellett.
Példa
Bemenet
#4f46e5Kimenet
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Három jelölés, egyetlen azonos szín.
Melyik formátumot használd?
Mindhárom pontosan ugyanazt a színt írja le — a választás azon múlik, melyikkel dolgozol könnyebben az adott feladatnál, nem a pontosságon.
| Formátum | Mire a legjobb | Miért |
|---|---|---|
| HEX (#4f46e5) | CSS, tervezői átadások, gyors másolás-beillesztés | A legrövidebb begépelni és beilleszteni; univerzális formátum az olyan tervezőeszközökben, mint a Figma. |
| RGB (rgb(79,70,229)) | Kód, amely közvetlenül kezeli a csatornákat, canvas/kép munka | Megegyezik azzal, ahogyan a grafikus API-k és a képpont-adatok valójában tárolják a színt. |
| HSL (hsl(243,75%,59%)) | Egy szín módosítása — világosabb, sötétebb, telítettebb/kevésbé telített | A világosság és telítettség külön számok, amelyeket közvetlenül hangolhatsz, ellentétben a HEX/RGB-vel, ahol minden csatorna együtt változik. |
Gyakori felhasználási esetek
- Vizuálisan kiválasztasz egy színt egy tervezőeszközben, majd átalakítod a CSS-ben vagy kódban szükséges pontos HEX vagy RGB értékre.
- Kapcsolódó árnyalatok (világosabb/sötétebb változatok) sorozatát generálod úgy, hogy HSL-re alakítod, módosítod a világosságot, majd visszaalakítod.
- Egy márkaszínt egyeztetsz különböző eszközök között, amelyek mindegyike más formátumot vár — egy logófájl RGB-ben, egy stílusútmutató HEX-ben, egy CSS változó, amelynek HSL-re van szüksége a témázáshoz.
- Ellenőrzöd, hogy egy képernyőképről vagy tervezői fájlból kinyert szín (gyakran RGB-ben megadva) megegyezik-e a stíluslapon szereplő HEX értékkel.
Gyakori kérdések
Mikor érdemes HSL-t használni HEX vagy RGB helyett?
Amikor egy színnel logikusan szeretnél dolgozni. Egy szín 10%-kal sötétebbé tétele HSL-ben annyi, hogy a világosság értéket 10 ponttal csökkented; HEX-ben vagy RGB-ben ehhez újra kellene számolnod az összes csatornát. A dizájnrendszerek gyakran pont ezért definiálják a palettáikat HSL-ben.
Támogatja az eszköz a 3 jegyű HEX-et, mint a #fff?
Igen. A #fff a #ffffff rövidített formája — minden számjegy megduplázódik. Mindkét forma elfogadott, a kimenet pedig a teljes 6 jegyű formát mutatja.
Mi a helyzet az alfával (átlátszósággal)?
Ez az eszköz átlátszatlan színeket alakít át (az RGB/HSL értékeket). Ha átlátszóságra van szükséged, add hozzá magad az alfa értéket: rgba(79, 70, 229, 0.5) vagy #4f46e580 — a szín része változatlan marad.
Miért térnek el a HSL értékeim 1-gyel egy másik eszközhöz képest?
Kerekítés miatt. A HSL↔RGB átalakítás tört értékeket eredményez, és az eszközök eltérően kerekítenek. Egy ±1 eltérés az árnyalatban vagy százalékban láthatatlan és teljesen normális.
Támogatottak az olyan színnevek, mint a 'red'?
Az első fázisban nem — az eszköz arra a három számszerű formátumra fókuszál, amelyet a fejlesztők leggyakrabban alakítanak át. Add meg a szín HEX/RGB/HSL értékét, vagy válaszd ki vizuálisan a színválasztóval.
Mikor használjam a HEX-et, RGB-t vagy HSL-t?
Ha átlátszóságra van szükséged, használj 8 jegyű HEX-et (#RRGGBBAA) vagy rgba()-t — a 6 jegyű HEX-nek nincs alfa csatornája. Ha ugyanannak a színnek világosabb vagy sötétebb változatait szeretnéd, a HSL a legegyszerűbb: tartsd fixen az árnyalatot és a telítettséget, és csak a világosság számot változtasd. Egyszerű másolás-beillesztéshez CSS-be vagy tervezőeszközökbe a 6 jegyű HEX marad a legáltalánosabban elfogadott forma.