Online Színválasztó
Válassz egy színt a kerékben, finomítsd a telítettség-vászonon, és olvasd vissza minden formátumban, amit a projekted beszél – a #RRGGBB-től az oklch()-ig. Ez a színválasztó azt is tudja, amit más eszközök gyakran kihagynak: háromféle kerékgeometriát, beleértve a festői RYB kereket, harmónia-átfedéseket, amelyek palettát építenek neked, alfacsatornát, és az egész paletta egy kattintással történő exportálását CSS változóként, SCSS-ként vagy JSON-ként. Mindez helyben, a böngésződben számolva.
Három kerék, nem egy
A Kerék módja választó megváltoztatja magának a keréknek a geometriáját:
- A HSV és a HSL a digitális kerekek – az árnyalatok úgy vannak elrendezve, ahogy az RGB kijelzők keverik a fényt. Abban térnek el egymástól, ahogy a négyzet alakú vászon viselkedik: a HSV-nél a legfényesebb sarok a tiszta árnyalat, a HSL-nél a tiszta árnyalatok 50%-os világosságnál helyezkednek el, felettük fehérrel.
- Az RYB (festői) úgy rendezi el az árnyalatokat, ahogy azt a festők tanulták: piros, sárga és kék mint alapszínek, közöttük narancs, zöld és lila. Gyakorlati haszna a harmóniáknál mutatkozik meg – az RYB kerékben a piros kiegészítő színe a zöld, a kéké pedig a narancs, a klasszikus pigmentpárok, míg egy digitális kerék a pirost a ciánnal párosítja. Ha egy “kiegészítő” paletta egy hagyományos színválasztóból valaha is furcsának tűnt a szemednek, most már tudod, miért.
Harmóniák, amelyek megépítik neked a palettát
Válassz egy szabályt a Színharmónia alatt, és a kerék megjelöli a kísérő színeket, amelyek kész palettaként jelennek meg:
- Kiegészítő — egy szemközti szín. A legerősebb kontraszt; egyetlen akcentushoz használd egy domináns márkaszín mellett.
- Osztott kiegészítő — a kiegészítő szín két szomszédja. Majdnem ugyanannyi kontraszt, sokkal könnyebb egyensúlyba hozni.
- Triádikus — három egyenletesen elosztott árnyalat. Élénk, mégis stabil; hagyd, hogy egy domináljon, a másik kettőt használd visszafogottan.
- Tetradikus (négyzet) — négy árnyalat. Gazdag kombinációk illusztrációkhoz és adatvizualizációhoz; felhasználói felületen nehéz egyensúlyba hozni.
- Analóg — a közvetlen szomszédok. Alacsony feszültség, jó hátterekhez és színátmenetekhez.
- Monokróm — egy árnyalat lépcsőzetes világosságban. A legbiztonságosabb választás felületi állapotokhoz (hover, aktív, letiltott).
A palettapanel egy kattintással másolja az egész készletet, a választott formátumban: egyszerű HEX, RGB, HSL, OKLCH, beilleszthető CSS egyéni tulajdonságok (--color-1: …), SCSS változók, vagy JSON kódba adáshoz.
Illessz be bármit, olvass ki mindent
A beviteli mezők gyakorlatilag bármilyen színjelölést elfogadnak: #f80, #ff8800, 8 jegyű hex alfával, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, vagy CSS színneveket, mint a rebeccapurple. Bármi is érkezik, hét szinkronizált kimenet jön vissza: HEX, RGB, HSL, HSV, LCH, OKLCH és CMYK, mindegyik saját másolás gombbal.
Az előnézet alatti két segédcímke elnevezi neked a színt: a legközelebbi CSS színnév (jó gyors prototípusokhoz és a színekről való beszélgetéshez) és a legközelebbi Tailwind token (pl. orange-500), így a design rendszereden belül maradhatsz, ahelyett hogy egyedi értékeket találnál ki.
Húzd az alfa csúszkát az előnézet alatt, és a kimenetek átváltanak az átlátszó formájukra – #RRGGBBAA, rgba(), hsla() –, az előnézet pedig sakktábla mintán jelenik meg, hogy megítélhesd az átlátszóságot.
Melyik formátumot használd?
| Formátum | Teljes név | Mikor használd? |
|---|---|---|
| HEX | Hexadecimális | A web alapértelmezettje. Kompakt, mindenhol támogatott, könnyen másolható. 8 számjegy alfát is ad hozzá. |
| RGB | Vörös, Zöld, Kék | Ahogy a kijelzők gondolkodnak. Három fénycsatorna, 0–255. A legtöbb API és canvas kód ezt várja. |
| HSL | Árnyalat, Telítettség, Világosság | Kézi szerkesztéshez embereknek. “Kicsit világosabb” vagy “kevésbé telített” egyetlen szám módosítása. |
| HSV | Árnyalat, Telítettség, Érték | Grafikai szoftverek. A Photoshop és a GIMP színválasztói mögötti modell. |
| LCH | Világosság, Króma, Árnyalat | Percepciálisan egységes. Egyenlő numerikus lépések egyenlő vizuális lépésnek tűnnek – amit a HSL csak imitál. |
| OKLCH | OK Világosság, Króma, Árnyalat | A modern CSS választás. Kijavítja az LCH árnyalateltolódásait a kékeknél; minden mai böngészőben támogatott, ideális design-token rendszerekhez. |
| CMYK | Cián, Magenta, Sárga, Fekete | Nyomdai tájékozódás. Közelítő átváltás nyomdai tervezőkkel való egyeztetéshez – a végleges értékek mindig a nyomda színprofiljából jönnek. |
Apróságok, amik időt spórolnak
- Az előzmények maguktól megmaradnak. Az utolsó 24 szín, amivel dolgoztál, túléli az oldal frissítését – kizárólag a böngésződ helyi tárolójában, sosem feltöltve sehova.
- Pipetta. Az EyeDropper API-t támogató böngészőkben (Chrome és Edge) a képernyő bármely pontjáról kiválaszthatsz egy színt, akár a böngészőablakon kívülről is.
- Billentyűzetes vezérlés. A kerék és a telítettség-vászon reagál a nyílbillentyűkre a pixelpontos finomhangoláshoz.
- Az Előbeállítások a gyakori alapszíneket fedik le, ha csak gyors kiindulópontra van szükséged.
Gyakran Ismételt Kérdések (GYIK)
Biztonságos az oklch() használata éles CSS-ben?
Igen. A Chrome, az Edge, a Firefox és a Safari minden mai verziója támogatja azoklch()-t, és ez lett a preferált jelölés a design tokenekhez (a Tailwind CSS 4 a teljes palettáját ebben definiálja). Nagyon régi böngészőkhöz adj meg egy HEX tartalék értéket az előző sorban – ez az eszköz mindkét értéket megadja.