Színátváltó (HEX, RGB, HSL)
A színek konvertálása HEX (#RRGGBB), RGB (0–255) és HSL (színárnyalat, telítettség, világosság) között valós időben. Állítsd be a választó- vagy típusértékeket, hogy az összes formátum együtt frissüljön — ideális a CSS-hez, a Figma átadás-átvételhez és a márka irányelveihez.
Hogyan konvertáljunk színeket
1. Válassz színt vizuálisan, vagy írjon be HEX, RGB vagy HSL értékeket.
2. Azonnal megtekintheti az egyenértékű értékeket az összes támogatott formátumban.
3. Módosítsa a HSL világosságát a lebegési állapotokhoz, miközben megtartja a márka színárnyalatát.
4. Másold ki a veremhez szükséges formátumot (#hex CSS-hez, rgb() a modern böngészőkhöz).
Színkonverziós példák
Márkakék #2563
RGB rgb(37, 99, 235); HSL HSL (217, 84%, 53%). Sötét lebegtetés: hsl(217, 84%, 45%) hex kitalálása nélkül.
CSS rgb - HEX az SVG-hez
rgb(255, 87, 51) → #FF5733 SVG-kitöltéshez és Android XML-színforrásokhoz.
Semleges szürke a szegélyekhez
hsl(220, 10%, 90%) → nagyon világos hideg szürke; enyhén növelje a telítettséget a színezett felhasználói felület hátteréhez.
Mikor használd ezt az eszközt
• Amikor fordítja le a tervezési tokeneket a Figma HEX és a HSL között a CSS-változókban.
• Ha konzisztens világos/sötét témákat épít fel a HSL világosságának eltolásával.
• Amikor dokumentálja a fejlesztői márkapalettákat és marketingeseket.
Színelmélet a felhasználói felület munkához
Kiegészítő színek, kontrasztos kerék (18 ellentétes) a színárnyalaton CTA-k. Az analóg árnyalatok (±30°) harmonikusnak hatnak a műszerfalakon. A semleges felhasználói felület krómja gyakran alacsony telítettségű kéket vagy szürkét (hsl 220, 10%, 96%) használ a tiszta #EEE helyett, amely melegnek/hidegnek tűnhet különböző képernyőkön. Korlátozza a márkapalettát egy elsődleges árnyalatra, 2–3 semlegesre és szemantikai zöldre/pirosra az állapothoz.
Gyakori kérdések
Mire jó a HSL?
A világosság és a telítettség beállítása, miközben a színárnyalat stabil marad — pl. elsődleges, elsődleges lebegtetés, elsődleges elnémítás egy színárnyalat értékétől.
HEX gyorsírás #RGB?
Az #F53 #FF5533-ra bővül. Elfogadunk 3 vagy 6 jegyű hexadecimális számot (opcionális #).
sRGB vs display-P3?
Ez az eszköz a webes CSS szabvány sRGB-t használd. A széles tartományú kijelzők kissé eltérően jelenhetnek meg.
Alfa / átlátszóság?
A 8 számjegyű HEX (#RRGGBBAA) és az rgba() támogatott lehet ott, ahol az eszköz az alfa-t teszi közzé — ellenőrizd a felhasználói felület mezőit.
Miért néznek ki rosszul az RGB-ben a képek hex?
Minden csatorna 0–255 → két hexadecimális számjegy. 255 = FF, nem „255” összefűzve.