Tvůrce gradientů

OKLCH vnímavě jednotné gradienty, bez šedých pásů, export CSS jedním kliknutím.

Profil →Pozice0%

Profil →Pozice100%

Úhel90°Hladká interpolace (bez mrtvé zóny)

Knihovna gradientů

48 klasických kombinací od komunity – klikněte pro aplikaci zastávek, typu a úhlu najednou.

Západ slunce

Oceán

Les

Cukroví

Soumrak

Tlumené

CSS kód

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

Jak funguje nástroj pro přechody – vytvoření zarážek, ladění, kopírování CSS.

2–6 zarážek s volným umístěním, interpolace v OKLCH bez nečistých pásů, plus 48 vybraných přednastavení.

01
Vytvořte zarážky
2–6 zarážek: vyberte každou barvu, přetáhněte pozice nebo vložte hodnoty HEX.
02
Ladění
Přepněte mezi lineárním, radiálním nebo kuželovým přechodem, přetáhněte úhel – nebo použijte vybrané přednastavení jedním kliknutím.
03
Kopírování
Režim plynulosti automaticky rozšiřuje střední body OKLCH; CSS je připraveno ke zkopírování a odkaz obsahuje váš přechod.

Často kladené otázky k přechodům

Čtyři otázky, které uživatelé skutečně kladou.

Proč jsou přechody uprostřed šedé?: RGB interpolace prochází oblastmi s nízkou saturací. OKLCH interpolace sleduje odstín, takže střed zůstane čistý.
Mohu přidat další zarážky?: Ano – 2 až 6 zarážek, každá s vlastní barvou a pozicí. Režim plynulosti vkládá OKLCH střední body mezi sousedy, takže celá přechodová plocha zůstane čistá.
Které prohlížeče podporují exportované CSS?: Všechny moderní prohlížeče. Nástroj generuje prosté RGB zarážky, takže není potřeba žádná konverze ani pro starší enginy.
Jak mohu sdílet přechodovou plochu?: Každá úprava se synchronizuje do adresy stránky (#g=...). Odkaz z adresního řádku pošlete kolegovi a otevře se přesně tak, jak jste ji nastavili.

Po získání výsledku

Pokračujte odsud a využijte barvy v praxi.

Generátor škál

Jakákoli barva na 11stupňovou škálu pro designový systém, vnímavě rovnoměrná v OKLCH, kontrast WCAG na stupeň, export do Tailwind/CSS/SCSS/JSON.

Převaděč barev

Zadejte libovolný formát (HEX / RGB / HSL / název) a převeďte ho do všech barevných prostorů v reálném čase.

Paletová deska

Mezerník pro náhodné generování, zamykání, přetahování pro změnu pořadí, sdílení přes URL – vše, co paletová deska má dělat.

Kontrola kontrastu

Ověření kontrastu podle WCAG 2.1 mezi libovolnou barvou popředí a pozadí.

Jak funguje nástroj pro přechody – vytvoření zarážek, ladění, kopírování CSS.

2–6 zarážek s volným umístěním, interpolace v OKLCH bez nečistých pásů, plus 48 vybraných přednastavení.

Vytvořte zarážky

2–6 zarážek: vyberte každou barvu, přetáhněte pozice nebo vložte hodnoty HEX.

Ladění

Přepněte mezi lineárním, radiálním nebo kuželovým přechodem, přetáhněte úhel – nebo použijte vybrané přednastavení jedním kliknutím.

Kopírování

Režim plynulosti automaticky rozšiřuje střední body OKLCH; CSS je připraveno ke zkopírování a odkaz obsahuje váš přechod.

Často kladené otázky k přechodům

Čtyři otázky, které uživatelé skutečně kladou.

Proč jsou přechody uprostřed šedé?

RGB interpolace prochází oblastmi s nízkou saturací. OKLCH interpolace sleduje odstín, takže střed zůstane čistý.

Mohu přidat další zarážky?

Ano – 2 až 6 zarážek, každá s vlastní barvou a pozicí. Režim plynulosti vkládá OKLCH střední body mezi sousedy, takže celá přechodová plocha zůstane čistá.

Které prohlížeče podporují exportované CSS?

Všechny moderní prohlížeče. Nástroj generuje prosté RGB zarážky, takže není potřeba žádná konverze ani pro starší enginy.

Jak mohu sdílet přechodovou plochu?

Každá úprava se synchronizuje do adresy stránky (#g=...). Odkaz z adresního řádku pošlete kolegovi a otevře se přesně tak, jak jste ji nastavili.