Preskoči na vsebino
100% lokalno

Ustvarjalnik temne palete

Generiraj temno paleto iz svojih svetlih barv s preverjenim WCAG kontrastom. Zalipi heksadecimalne vrednosti in orodje preslika vsako v temno enakovredno.

Vhod
30
Izhod

Ustvarjalnik temne palete

Zalipi barve iz svetle teme — eno po vrstici — ta orodja ustvari temno enakovredno za vsako, pripravljeno za vstavitev v slogovno datoteko. Zgrajeno je za vsakodnevno dostavo temne teme, ko je svetla že obstaja: zalipi ozadje, površino in akcentne barve in vrne enak niz, obrnjen za temni UI.

Poimenuj vsako vrstico kot CSS prilagojeno lastnost ("background: #ffffff", "--accent: #3366cc") ali samo zalipi golo heksadecimalno vrednost. Ozadje teme v temnem postavi ozadje strani, zoper katerega je paleta grajena, in kontrast vsake barve se preveri zoper njo. Ciljna kontrasta izbira WCAG AA (4.5:1) ali AAA (7:1) — poudarki (bolj nasičene postavke, namenjene besedilu, povezavam in ikonam) se potiskajo gegen temu razmerju, medtem ko se prigušene površine pošteno poročajo vendar se nikoli ne forsirajo, ker podlaga kartice ni bralna kot besedilo. Zmanjšanje zasičenosti mehka barve, ki bi sicer žarele pri polni zasičenosti v temnem, Ohranite barvo akcentov ohrani barvo blagovne znamke in intenziteto nedotaknjeno, in Sloji površine po elevaciji stopnjuje nevtralne odtenke v subtilno rampo nad ozadjem, na način, kako kartica sedi nad stranjo za njo.

Vrstica, ki jo orodje ne more brati kot barvo — zalutali komentar, prazna naslova — se preskoči namesto prekinjenja preostanka seznama, in štetje se pojavi v seštevku skupaj s številom ustvarjenih barv in koliko poudarkov je doseglo ciljno razmerje. Zelo dolgi seznami in Windows ali Unix zaključki vrstic se obdelajo brez dodatne nastavitve.

Vse se izvaja lokalno v vašem brskalniku: barve se nikoli ne nalagajo ali pošiljajo nikamor. Kopiraj rezultat, ga preznesi kot .txt datoteko, ali pošlji izhod direktno nazaj v vnos, da nastaviš sladiti paleto.

FAQ

Kakšno obliko vnosa pričakuje?
Ena barva na vrstico, kot heksadecimalna vrednost. Poimenuj jo kot CSS spremenljivka ("primary: #3366cc") za berljivo ime spremenljivke, ali zalipi golo heksadecimalno kodo in orodje jo avtomatsko imenuje.
Kako odloči, katere barve so poudarki?
Barva z vidno zasičenostjo se obravnava kot poudarek — namenjena besedilu, povezavam ali ikonam — in se potiska gegen vašo izbrano ravnovesje kontrasta. Blizu-siva barva se obravnava kot površina in sledi preslikavanju elevacije namesto.
Zakaj ni vsaka barva dosegla ciljnega razmerja kontrasta?
Samo poudarki se potiskajo k cilju, ker je to razmerje besedilo-kontrast pravilo. Površine in ozadje polnila niso besedilo, zato se njihov kontrast poroča v seštevku vendar se ne forsira.
Kaj "Sloji površine po elevaciji" počne?
Stopnjuje vaše nevtralne, nizko zasičene barve od novega temnega ozadja v majhnih, enakomerno razporejenih korakih, namesto zrcaljenja njihove prvotne svetlosti — isti slojeviti videz kot kartice, ki sedijo nad ozadjem strani.
Je moj seznam barv naložen kamor koli?
Ne. Paleta je ustvarjena povsem v vašem brskalniku in nikoli ne zapusti vaše naprave.