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. A HSL megkönnyíti az intuitív módosításokat (világosabb/sötétebb árnyalateltolás nélkül), mint a hexadecimális számjegyek szerkesztését.
Szín
Eredmény
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
Mikor válassz mást
• Amikor ellenőriznie kell a WCAG kontrasztot, használd a kontrasztellenőrzőt.
• Ha CMYK-ra vagy Pantone-ra van szüksége a nyomtatáshoz — használjon nyomtatásspecifikus eszközöket.
• Teljes színátmenetek generálásakor használd a CSS gradiensgenerátort.
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.
A hozzáférhetőség az átalakításkor kezdődik
A gyönyörű #7C3AED lila fehéren a kis szövegek kontrasztját meghiúsíthatja. Miután itt kiválasztotta a színeket, futtassa az előtér/háttér párokat a kontrasztellenőrzőn. Előnyben részesítse a HSL-beállításokat a hibák kijavításához: sötétítse a szöveget vagy világosítsa a hátteret az árnyalat megőrzése mellett. Ne hagyatkozzon csak a színekre a hibákért — párosítsa ikonokkal és címkékkel (WCAG 1.4.1).
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.
Elküldik az adataimat szerverre?
Nem.
Ingyenes az eszköz?
Igen.