Color Picker útmutató: HEX színválasztás, RGB, HSL és OKLCH

A Color Picker a webdesign egyik legalapvetőbb, mégis gyakran túl egyszerűen megvalósított eszköze. Nem csak arról szól, hogy rákattintasz egy színre: jó esetben ugyanazt az árnyalatot azonnal megkapod több színtérben, fejlesztői kódként és egy névvel ellátott színadatbázishoz kapcsolva is.

Hogyan működik egy vizuális Color Picker?

A legtöbb modern picker az árnyalatot külön hue sávon, a telítettséget és világosságot pedig egy kétdimenziós mezőben kezeli. Így gyorsan megközelíthetsz egy színt, majd a pontos HEX értékkel finomhangolhatod.

A vizuális választás és a numerikus kód nem egymás alternatívái. Tervezés közben a szemeddel keresel irányt, fejlesztés közben viszont reprodukálható, másolható értékre van szükséged.

HEX, RGB és HSL: ugyanaz a szín, más leírás

HEX

A #RRGGBB jelölés rövid, jól másolható és rengeteg design rendszerben alapértelmezett. A #2563EB például ugyanazt az RGB csatornaértéket írja le, mint az rgb(37, 99, 235).

RGB

Az RGB közvetlenül a vörös, zöld és kék csatornákat mutatja 0–255 tartományban. Akkor praktikus, ha csatornánként számolsz, színeket keversz vagy programból módosítasz egy értéket.

HSL

A HSL külön kezeli az árnyalatot, telítettséget és világosságot. Emiatt kézzel könnyebb például ugyanabból a hue-ból világosabb vagy sötétebb variációkat készíteni.

HSV és a picker belső logikája

Sok vizuális picker HSV vagy HSB jellegű modellt használ a szerkesztéshez. A hue adja a színcsaládot, a saturation a színességet, a value pedig a fényességi tengelyt. Ettől a kétdimenziós szerkesztő természetesebben kezelhető, mint ha három RGB számot kellene kézzel változtatni.

OKLCH: amikor a perceptuális különbség is számít

Az OKLCH modernebb megközelítés, amelynek egyik előnye, hogy a világosság változtatása sok esetben intuitívabban és egyenletesebben viselkedik, mint klasszikus HSL-ben. Design tokenek, skálák és hozzáférhető színrendszerek építésénél ezért egyre hasznosabb formátum.

CMYK: csak tájékozódási pont a böngészőben

A böngészőben kiszámított CMYK érték matematikai átváltás. Professzionális nyomdai színhez ICC profil, konkrét nyomtatási eljárás és hordozó is számít, ezért egy online picker CMYK kimenete nem helyettesít proof folyamatot.

Miért hasznos a legközelebbi színnév?

A HEX kód pontos, de emberi kommunikációban kevésbé beszédes. Ha a picker megmutatja a legközelebbi névvel ellátott árnyalatot, könnyebb kapcsolódó színeket, palettákat és színcsaládokat felfedezni.

A színkódot ne kézzel írd át minden frameworkhöz

Egy jó picker a nyers érték mellett rögtön használható kódot is ad. CSS változó, Chakra UI prop, React style objektum vagy Tailwind arbitrary value ugyanazt a színt más szintaxisban használja.

• CSS custom property és background-color
• Chakra UI bg és color prop
• React inline style
• Tailwind arbitrary color value
• HEX, RGB, HSL, HSV, CMYK és OKLCH másolás

Color Picker és gradient

Gradient készítésnél különösen fontos, hogy minden color stop ugyanazzal a picker logikával szerkeszthető legyen. Így nem kell más UI-t megtanulni a kezdőszínhez, köztes ponthoz és végszínhez.

Color Picker és színkeverés

Színkeverésnél nem csak a két végpont fontos. Több bemeneti szín és külön súly használatával már palette átlagokat, domináns brand árnyalatokat vagy különböző keverési modelleket is összehasonlíthatsz.

Összefoglalás

A jó Color Picker egy központi színmunkafelület. Vizuálisan kiválasztod az árnyalatot, pontos kódot kapsz, egy kattintással másolsz, framework-specifikus kimenetet használsz, majd továbbléphetsz a legközelebbi színnévre, gradientre vagy keverésre. Ettől lesz valódi eszköz, nem csak egy natív color input köré épített oldal.