Hogyan használd?
- Válaszd ki az alapszínt, vagy írd be a HEX-kódját.
- Válassz harmóniát: kiegészítő, analóg, triád, osztott kiegészítő, négyes vagy monokróm.
- Nézd meg a kontrasztot fehér és fekete szöveggel.
- Másold ki a kódokat vagy a CSS-változókat.
Mire jó a színpaletta generátor?
A színpaletta generátor egy alapszínből harmonikus színkombinációt számol a színkör szabályai szerint. Akkor hasznos, ha van már egy színed (például a logód színe), és ehhez keresel jól illő kiegészítő színeket weboldalhoz, prezentációhoz, plakáthoz, szobához vagy esküvői dekorációhoz.
Minden szín mellett megtalálod:
- a HEX, RGB és HSL kódot, egy kattintással másolva,
- a kontrasztarányt fehér és fekete szöveggel, a WCAG akadálymentességi szint jelölésével.
A teljes palettát kimásolhatod HEX-listaként, CSS-változókként, vagy letöltheted JSON-fájlban. A palettát a böngésződ számolja ki a kiinduló színből, a színkódokat pedig te másolod ki; semmit nem tárolunk belőlük.
Harmóniaszabályok a színkörön
A színkör a színárnyalatokat egy 360 fokos körbe rendezi. A harmóniák azt írják le, milyen szögben álló színek mutatnak jól együtt:
| Harmónia | Mit csinál? | Hatás |
|---|---|---|
| Kiegészítő | Az alapszín és a vele szemben álló (180°) szín, világosabb és sötétebb változatokkal | Erős kontraszt, feltűnő |
| Analóg | Az alapszín szomszédai (±15°, ±30°) | Nyugodt, egységes |
| Triád | Három szín egymástól 120°-ra | Élénk, kiegyensúlyozott |
| Osztott kiegészítő | Az alapszín és a kiegészítő két szomszédja (150°, 210°) | Kontrasztos, de kevésbé harsány |
| Négyes (tetrád) | Négy szín 90°-onként | Gazdag, nehezebb egyensúlyozni |
| Monokróm | Egyetlen árnyalat világosabb és sötétebb változatai | Elegáns, letisztult |
Melyiket válaszd? Céges arculathoz és weboldalhoz az analóg vagy a monokróm paletta a legbiztonságosabb, mert nyugodt és könnyen kezelhető. Ha egy gombnak vagy akciós sávnak ki kell ugrania, a kiegészítő szín a jó választás. Gyerekeknek szóló anyagokhoz, játékokhoz a triád ad vidám, mégis rendezett hatást.
A palettában az alapszín mindig szerepel; monokróm palettánál középen, a többinél az első helyen.
Kontraszt és olvashatóság (WCAG)
A szöveg akkor olvasható, ha elég nagy a különbség a betű és a háttér világossága között. A WCAG 2 akadálymentességi irányelv ezt kontrasztaránnyal méri, 1:1 (nincs különbség) és 21:1 (fekete a fehéren) között.
| Szint | Normál szöveg | Nagy szöveg (kb. 24 px-től, vagy 19 px félkövér) |
|---|---|---|
| AA | legalább 4,5:1 | legalább 3:1 |
| AAA | legalább 7:1 | legalább 4,5:1 |
Az eszköz minden színnél kiírja, mennyi a kontraszt fehér és fekete szöveggel, és melyik szintet éri el. A színminta feliratát automatikusan arra a színre állítjuk, amelyik jobban olvasható rajta. Ha egy színre szöveget tennél, és egyik sem éri el a 4,5:1-et, válassz világosabb vagy sötétebb árnyalatot (a monokróm paletta ebben segít).
A paletta használata a gyakorlatban
Egy jól működő felületen ritkán használjuk egyforma arányban a színeket. Bevált szabály a 60–30–10:
- 60% semleges vagy nagyon világos alapszín (háttér),
- 30% másodlagos szín (felületek, kártyák, fejléc),
- 10% kiemelő szín (gombok, linkek, fontos jelzések).
A generált palettából válaszd ki, melyik legyen a kiemelő szín (általában a legtelítettebb), és melyik a másodlagos. A többi szín jó lehet ikonokhoz, grafikonokhoz, illusztrációkhoz.
Exportálás: a CSS-változók gombbal ilyen kódot kapsz, amit a stíluslapodba illeszthetsz:
:root { --szin-1: #0B7A55; --szin-2: … }
A JSON-letöltés designeszközökbe vagy saját programba importáláshoz hasznos.
Tippek és gyakori hibák
- A számolt színek kiindulópontok. A matematikailag harmonikus szín nem mindig szép: a sárga és a kék árnyalatok világossága például nagyon eltér. Finomhangold szemre, a HEX-kód átírásával.
- Nyomtatás: a képernyő RGB-színei nyomtatásban (CMYK) fakóbbak lehetnek, különösen az élénk zöldek és kékek. Nyomdai munkánál kérj próbanyomatot.
- Színtévesztés: a piros–zöld párost sokan nem különböztetik meg. Ha a szín jelentést hordoz (hiba, siker), legyen eltérés a világosságban is, vagy tegyél mellé ikont.
- Sötét téma: sötét háttéren a telített színek vakítanak; ilyenkor a világosabb, kevésbé telített változatokat használd.
Gyakori kérdések
Milyen harmóniákat ismer?
Kiegészítő, analóg, triád, osztott kiegészítő, négyes (tetrád) és monokróm palettát.
Hogyan adhatom meg a saját színemet?
A színválasztóval, vagy a HEX-kód beírásával (például #0B7A55 vagy rövid alakban #0B7).
Mit jelent az AA és az AAA?
A WCAG akadálymentességi szintjei: AA normál szövegnél legalább 4,5:1, AAA legalább 7:1 kontrasztot jelent.
Exportálhatom a palettát?
Igen: HEX-listaként, CSS-változókként vagy JSON-fájlban.
Miért nem tökéletes minden számolt szín?
A színkör szabályai matematikaiak, a szemünk viszont nem egyformán érzékeli a különböző árnyalatok világosságát. Érdemes szemre finomítani.
Elmentitek a palettát?
Nem, minden a böngésződben készül. A JSON-letöltéssel magadnak elmentheted.
Utoljára módosítva: 2026. november 3.