Színútmutatók
Rövid, gyakorlatias útmutatók a képernyős színekről: formátumok, kontraszt, paletták, sötét mód és CSS. Minden szám kiszámolt, minden példa másolható.
- Az OKLCH érthetően: a színformátum, amely végre a szemedhez igazodikAz OKLCH azzal írja le a színt, hogy mennyire látszik világosnak, mennyire színes, és milyen a színezete. A HSL-lel ellentétben itt az azonos világosságérték minden színezetnél tényleg ugyanolyan világosnak látszik, így a paletták, a hover állapotok és az akadálymentes kontraszt kiszámíthatóvá válnak.2026. szeptember 28.3 perc olvasás
- APCA vagy WCAG 2: melyik kontrasztmérésben bízz?A jogszabályok a WCAG 2 kontrasztarányait írják elő. Az APCA egy újabb modell, amely sokkal jobban előre jelzi az olvashatóságot, különösen sötét témáknál és telített színeknél. Ha mindkettőt ellenőrzöd, a szöveged megfelel az előírásoknak, és tényleg könnyen olvasható is.2026. szeptember 28.3 perc olvasás
- A színtartomány (gamut) érthetően: sRGB, Display P3 és a tartományon kívüli színekA színtartomány (gamut) azoknak a színeknek a halmaza, amelyeket egy képernyő vagy színtér meg tud jeleníteni. A web az sRGB-re épült, de ma már a legtöbb telefon és sok laptop Display P3-at jelenít meg, amelyben érezhetően élénkebbek a pirosak, a zöldek és a narancsok.2026. szeptember 28.2 perc olvasás
- Színformátumok érthetően: HEX, RGB, HSL, OKLCH és a többiUgyanazt a színt egy tucatféleképpen le lehet írni. Itt megtudod, mit jelent mindegyik formátum, mikor érdemes használni, és hogyan néz ki ugyanaz a szín mindegyikben.2026. szeptember 28.2 perc olvasás
- Hex színkódok érthetően: így működik a #RRGGBBEgy hex színkód, például a #1e90ff, három pár hexadecimális számjegy: a piros, a zöld és a kék fény mennyisége, mindegyik 00-tól (semmi) ff-ig (teljes, 255). Egy negyedik párral az opacitást is megadhatod: a 80 nagyjából 50%, az ff teljesen fedő.2026. szeptember 28.6 perc olvasás
- Hogyan válassz színpalettát weboldalhoz vagy alkalmazáshozIndulj ki egyetlen márkaszínből, készíts belőle 50-től 950-ig tartó skálát, adj hozzá enyhén színezett szürkéket és négy állapotszínt, majd teszteld minden szövegpár kontrasztját és a színvakságot. A fokozatokat az OKLCH-világosság alapján válaszd, ne szemre: fehér háttéren a szöveg akkor felel meg a WCAG AA-nak, ha a világosság nagyjából 0,55-ig csökken, bármilyen is a színezet.2026. szeptember 28.6 perc olvasás
- Sötét mód színei: hogyan válassz hátteret, szöveget és kiemelőszíneketTiszta fekete helyett használj sötétszürke hátteret, például #121212-t, tiszta fehér helyett törtfehér szöveget, például #e5e5e5-öt, a márkaszíneidből pedig világosabb, kevésbé telített változatokat. A szöveget a WCAG 2 mellett APCA-val is ellenőrizd, mert a WCAG 2 sötét háttéren túlbecsüli a kontrasztot.2026. szeptember 28.5 perc olvasás
- Színharmóniák: komplementer, analóg, triád és a többiA színharmónia rögzített szögekben választ színezeteket a színkörön: komplementernél 180°, analógnál 30°, triádnál 120° a különbség. Ha a színezetet HSL helyett OKLCH-ban forgatod, a színek egyformán világosak maradnak, így egyik sem ugrik ki véletlenül.2026. szeptember 28.5 perc olvasás
- CSS color-mix() és relatív színek: világosítás, hover és átlátszóságA color-mix() két színt kever egy általad választott színtérben, a relatív színszintaxissal pedig egy meglévő szín egyetlen csatornáját módosíthatod, például így: oklch(from var(--brand) calc(l - 0.1) c h). Mindkettő a böngészőben fut, működik CSS változókkal, és kiváltja a legtöbb Sass színfüggvényt. Világosításhoz és hoverhez oklabban keverj, átlátszósághoz srgb-ben.2026. szeptember 28.6 perc olvasás
- Színvakbarát paletta: így ellenőrizd és javítsd a színeidetA színvakbarát paletta minden színpárt megkülönböztethetővé tesz protanópiában, deuteranópiában, tritanópiában és szürkeárnyalatban is. A legbiztosabb megoldás nem egy különleges színezet, hanem a világosságbeli különbség: az OKLCH világosságban nagyjából 0,2-vel eltérő színek minden szimulációnkban elkülönültek. Egészítsd ki ezt ikonokkal vagy feliratokkal, mert ha csak a szín hordozza az információt, az mindig kizár valakit.2026. szeptember 28.6 perc olvasás
- Tailwind CSS színek: a v4 OKLCH paletta, egyéni színek és árnyalatokA Tailwind CSS v4 26 színskálát ad, mindegyikben 11 árnyalattal 50-től 950-ig, összesen 286 színt, amelyek OKLCH-ban, CSS-változóként vannak megadva, például --color-blue-500. Sajátot így adhatsz hozzá: @theme { --color-brand-500: oklch(...) }. Az azonos fokozatszám nem jelent azonos világosságot: a blue-600 a legvilágosabb kék, amely fehéren eléri a 4,5:1-et, a sárgának viszont 700 kell.2026. szeptember 28.6 perc olvasás