Online színválasztó

Válassz egy színt a kerékben, finomítsd a telítettség és fényerő vásznon, és olvasd vissza minden formátumban, amit a projekted használ, a #RRGGBB-től az oklch()-ig. Az eszköz azt is tudja, amit más színválasztók kihagynak: három kerékgeometriát, köztük a hagyományos festői RYB kereket, harmóniákat, amelyek maguktól összeállítják a palettát, alfacsatornát és az egész paletta egykattintásos exportját CSS változóként, SCSS-ként vagy JSON-ként. Minden a böngésződben számolódik.

RYB vagy RGB? Három színkör egy helyett

A Kerék módja kapcsoló megváltoztatja, hogyan helyezkednek el az árnyalatok a kerékben:

• A HSV és a HSL digitális kerekek. Az árnyalatok ott állnak, ahol a képernyőn a fény keveri őket. A négyzet alakú vászon viselkedésében térnek el egymástól: HSV-ben a legfényesebb sarok a tiszta árnyalat, HSL-ben a tiszta árnyalatok középső világosságnál vannak, felettük fehérrel.
• Az RYB (festői) úgy rendezi az árnyalatokat, ahogy a festők tanulják: piros, sárga és kék mint alapszínek, közöttük narancs, zöld és lila (RYB színmodell, angolul). A különbség főleg a harmóniáknál látszik. Az RYB kerékben a piros kiegészítő színe a zöld, a kéké pedig a narancs, vagyis a klasszikus pigmentpárok. A digitális kerék a pirost a ciánnal párosítja. Ha egy hagyományos színválasztó “kiegészítő” palettája valaha furcsának tűnt, most már tudod, miért.

Színharmóniák: paletta, ami magától összeáll

A Színharmónia mezőben válassz egy szabályt. A kerék megjelöli a kísérő színeket, alattuk pedig megjelenik a kész paletta:

• Kiegészítő: egy szemközti szín. A legerősebb kontraszt, egyetlen akcentushoz jó a fő márkaszín mellett.
• Osztott kiegészítő: a kiegészítő szín két szomszédja. Majdnem ugyanolyan erős kontraszt, de könnyebben kiegyensúlyozható.
• Triádikus: három egyenletesen elosztott árnyalat. Élénk, mégis stabil, ha az egyik dominál, a másik kettőt visszafogottan használod.
• Tetradikus (négyzet): négy árnyalat. Gazdag kombináció illusztrációkhoz és grafikonokhoz, egy alkalmazás felületén nehéz egyensúlyba hozni.
• Analóg: a legközelebbi szomszédok. Nyugodt kombináció háttereknek és átmeneteknek.
• Monokróm: egy árnyalat több világossági szinten. A legbiztonságosabb választás gombállapotokhoz (hover, aktív, letiltott).

Az egész palettát egy kattintással másolhatod a kívánt formátumban: egyszerű HEX, RGB, HSL, OKLCH, beilleszthető CSS egyéni tulajdonságok (--color-1: …), SCSS változók vagy JSON a kódhoz. Ha azt szeretnéd ellenőrizni, hogy a paletta kontrasztja azoknak is működik, akik nehezebben különböztetik meg az árnyalatokat, készíts képernyőképet, és alakítsd szürkeárnyalatossá.

HEX, RGB, HSL, OKLCH és CMYK átváltás: illessz be bármit, kapd meg mindet

A beviteli mezők szinte bármilyen színjelölést elfogadnak: #f80, #ff8800, nyolcjegyű hex alfával, rgb() és rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, valamint elnevezett CSS színeket, mint a rebeccapurple. Bármit adsz meg, hét összehangolt kimenetet kapsz: HEX, RGB, HSL, HSV, LCH, OKLCH és CMYK, mindegyiket saját másoló gombbal.

Az előnézet alatti Átlátszatlanság (alfa) csúszka átkapcsolja a kimeneteket az átlátszó alakjukra: #RRGGBBAA, rgba() és hsla(). Az előnézet közben sakktáblamintán jelenik meg, így az átlátszóságot azonnal látod.

A legközelebbi Tailwind CSS token bármely színhez

Az előnézet alatti két címke elnevezi a színt: a legközelebbi elnevezett CSS szín (gyors prototípusokhoz jó) és a legközelebbi Tailwind token, például orange-500. Így a design rendszereden belül maradhatsz, nem kell egyedi értékeket kitalálnod. Kattints a címkére a másoláshoz.

Ez arra a kérdésre válaszol, ami minden design-átadásnál felmerül: a grafikus küldött egy hex kódot, melyik Tailwind osztály áll hozzá legközelebb? Az egyezést a Tailwind CSS 4 alapértelmezett palettájához számítjuk (lásd a Tailwind dokumentációját, angolul), így a tokent rögtön beillesztheted az osztály nevébe.

Melyik színformátumot használd?

Formátum	Teljes név	Mikor használd
HEX	Hexadecimal	Webes alapértelmezés. Rövid, mindenhol támogatott, könnyen másolható. Nyolc számjegy hozzáadja az átlátszóságot.
RGB	Red, Green, Blue	Így gondolkodnak a képernyők. Három fénycsatorna 0 és 255 között. Ezt várja a legtöbb API és canvas kód.
HSL	Hue, Saturation, Lightness	Szemre végzett módosításhoz. A “kicsit világosabb” vagy “kevésbé telített” egyetlen szám módosítását jelenti.
HSV	Hue, Saturation, Value	Grafikai programok. A Photoshop és a GIMP színválasztója mögötti modell.
LCH	Lightness, Chroma, Hue	Érzékelt egyenletesség. Az egyenlő numerikus lépések egyenlő vizuális lépésnek tűnnek, amit a HSL csak megjátszik.
OKLCH	OK Lightness, Chroma, Hue	Modern választás CSS-hez. Kijavítja a kékeknél az LCH árnyalateltolódásait. Minden mai böngésző támogatja, ideális design tokenekhez.
CMYK	Cyan, Magenta, Yellow, Key	Nyomdai tájékozódás. Közelítő átváltás a nyomdával való egyeztetéshez, a végső értékeket a nyomda színprofilja határozza meg.

Hogy az OKLCH miért egyenletesebb érzékelésű a régebbi modelleknél, azt Björn Ottosson, az Oklab tér megalkotója fejti ki az eredeti cikkében (angolul). A szintaxist és a böngészőtámogatást az MDN foglalja össze (angolul). A nyomdai modell működését a CMYK színtér Wikipédia-szócikke írja le.

Apróságok, amik időt spórolnak

• Az előzmények maguktól megmaradnak. Az utolsó 24 szín túléli az oldal frissítését. Csak a böngésződ tárhelyén maradnak, sehova nem kerülnek feltöltésre.
• 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. Ha egy fotóból vagy egy logófájlból van szükséged színre, használd az online színpipettát.
• Billentyűzetes vezérlés. A kerék és a telítettség-vászon reagál a nyílbillentyűkre, így apró lépésekben finomíthatod a színt.
• Előbeállítások kínálnak gyakori alapszíneket, ha csak egy gyors kiindulópontra van szükséged.

Gyakori kérdések

Hogyan váltom át az OKLCH-t HEX-re?

Illessz be egy oklch() értéket az OKLCH mezőbe, és minden más kimenet, a HEX-et is beleértve, azonnal frissül. Fordítva is működik: add meg a HEX kódot, és leolvashatod a hozzá tartozó oklch() értéket. Egy megkötés van: az OKLCH az sRGB tartományon kívüli színeket is le tudja írni, ezek pedig levágásra kerülnek arra, amit az sRGB meg tud jeleníteni. Egy nagyon telített oklch() ezért nem fog ugyanúgy kinézni, mint a HEX változata egy széles gamutú kijelzőn.

Használható az oklch() éles CSS-ben?

Igen. A Chrome, az Edge, a Firefox és a Safari minden aktuális verziója támogatja az oklch()-t, és népszerű jelölés lett a design tokenekhez (a Tailwind CSS 4 ebben definiálja a teljes palettáját). Nagyon régi böngészőkhöz tegyél elé egy HEX tartalékértéket. Ez az eszköz mindkét értéket megadja.

Miért változnak a harmóniák, ha átváltok az RYB kerékre?

Mert az, hogy mi számít "szemközti"-nek, attól függ, hogyan oszlanak el az árnyalatok a kör mentén. Az RYB kerék egyenletesen osztja el a pigment alapszíneket, így a kiegészítő párok azt tükrözik, amit a festők ismernek: piros és zöld, kék és narancs, sárga és lila. A HSV és a HSL kerék a fénykeverés szerint osztja el az árnyalatokat, ezért a pirost a ciánnal párosítja. Egyik sem téves: az RYB a hagyományos képzőművészeti oktatást követi, a HSV és a HSL azt, amit a képernyők csinálnak.

Megbízhatók a CMYK értékek nyomtatáshoz?

Kezeld tájékoztató jellegűnek. A valódi nyomdai átváltás a nyomda, a papír és a festék ICC-profiljától (angolul) függ. Ugyanaz az RGB szín máshogy jön ki fényezett és fényezetlen papíron. Az itt látható értékeket a szabványos képlet számolja, ami közel visz, de a végső próbanyomat a nyomdáé.

Hol van a pipetta gomb Firefoxban vagy Safariban?

Szándékosan rejtve van. Az EyeDropper API (MDN, angolul), amire a gomb épül, jelenleg csak a Chromium alapú böngészőkben érhető el (Chrome, Edge, Opera). Az eszköz minden más funkciója mindenhol működik, csak a képernyőről történő színkiválasztás hiányzik. Ha egy képből van szükséged színre, használd az online színpipettát, amely minden böngészőben működik.

Privát marad a színelőzményem?

Igen. Az előzmények a böngésződ localStorage-ában, a saját eszközödön tárolódnak. Semmi, amit kiválasztasz, beillesztesz vagy másolsz, nem kerül elküldésre sehova. Az egész eszköz JavaScriptként fut a böngésződben, amit a fejlesztői eszközök Hálózat fülén magad is ellenőrizhetsz.