Gradiens készítő

OKLCH észlelésileg egységes gradiens, szürke sáv nélkül, egykattintásos CSS export.

Profil →Pozíció0%

Profil →Pozíció100%

Szög90°Sima interpoláció (nincs holt zóna)

Gradienszkönyvtár

48 klasszikus közösségi kombináció – kattints a megállóhelyek, típus és szög egyidejű alkalmazásához.

Naplemente

Óceán

Erdő

Cukorka

Alkonyat

Nyugodt

CSS kód

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Hogyan működik a gradiens eszköz – megállók létrehozása, hangolás, CSS másolás.

2–6 szabadon pozicionálható megálló, OKLCH interpoláció zavaros sávok nélkül, plusz 48 válogatott előbeállítás.

01
Megállók létrehozása
2–6 megálló: válaszd ki minden színt, húzd a pozíciókat, vagy illessz be HEX értékeket.
02
Hangolás
Válts lineáris/radisális/kónikus mód között, húzd a szöget – vagy egy kattintással alkalmazz egy válogatott előbeállítást.
03
Másolás
A sima mód automatikusan kibővíti az OKLCH felezőpontokat; a CSS készen áll a beillesztésre, és a hordozó a gradiensedet tartalmazza.

Gradiens GYIK

Négy kérdés, amit a felhasználók valóban feltesznek.

Miért szürkülnek a gradienssek a közepén?: Az RGB interpoláció az alacsony telítettségű területeket metszi. Az OKLCH interpoláció a árnyalatot követi, így a köztes tiszta marad.
Hozzáadhatok további állomásokat?: Igen – 2 és 6 közötti állomás, mindegyiknek saját színe és pozíciója van. A sima mód OKLCH köztes pontokat szúr be a szomszédok közé, így a teljes színátmenet tiszta marad.
Mely böngészők futtatják az exportált CSS-t?: Minden modern böngésző. Az eszköz sima RGB állomásokat bocsát ki, így nincs szükség konverzióra még a régebbi motorok esetén sem.
Hogyan oszthatok meg egy színátmenetet?: Minden módosítás szinkronizálódik az oldal URL-jébe (#g=...). Küldd el a címsorban lévő hivatkozást egy társadnak, és pontosan úgy nyílik meg, ahogy te beállítottad.

Az eredmény megérkezése után

Folytassa innen, és használja fel a színeket.

Árnyalatskála-generátor

Bármely szín 11 lépésből álló, OKLCH-ben észlelésileg egyenletes design-rendszer skálává alakítható, minden lépésben WCAG kontraszt, exportálás Tailwind/CSS/SCSS/JSON formátumba.

Színkonverter

Írjon be bármilyen formátumot (HEX / RGB / HSL / név) és konvertálja le valós időben az összes színteret.

Paletta tábla

Szóköz a randomizáláshoz, zárolás, húzás az átrendezéshez, megosztás URL-lel – minden, amit egy paletta táblának tudnia kell.

Kontrasztellenőrző

WCAG 2.1 kontraszt validálás bármilyen előtér és háttér szín között.

Hogyan működik a gradiens eszköz – megállók létrehozása, hangolás, CSS másolás.

2–6 szabadon pozicionálható megálló, OKLCH interpoláció zavaros sávok nélkül, plusz 48 válogatott előbeállítás.

Megállók létrehozása

2–6 megálló: válaszd ki minden színt, húzd a pozíciókat, vagy illessz be HEX értékeket.

Hangolás

Válts lineáris/radisális/kónikus mód között, húzd a szöget – vagy egy kattintással alkalmazz egy válogatott előbeállítást.

Másolás

A sima mód automatikusan kibővíti az OKLCH felezőpontokat; a CSS készen áll a beillesztésre, és a hordozó a gradiensedet tartalmazza.

Gradiens GYIK

Négy kérdés, amit a felhasználók valóban feltesznek.

Miért szürkülnek a gradienssek a közepén?

Az RGB interpoláció az alacsony telítettségű területeket metszi. Az OKLCH interpoláció a árnyalatot követi, így a köztes tiszta marad.

Hozzáadhatok további állomásokat?

Igen – 2 és 6 közötti állomás, mindegyiknek saját színe és pozíciója van. A sima mód OKLCH köztes pontokat szúr be a szomszédok közé, így a teljes színátmenet tiszta marad.

Mely böngészők futtatják az exportált CSS-t?

Minden modern böngésző. Az eszköz sima RGB állomásokat bocsát ki, így nincs szükség konverzióra még a régebbi motorok esetén sem.

Hogyan oszthatok meg egy színátmenetet?

Minden módosítás szinkronizálódik az oldal URL-jébe (#g=...). Küldd el a címsorban lévő hivatkozást egy társadnak, és pontosan úgy nyílik meg, ahogy te beállítottad.