Tresnak

Tailwinderako kolore-eskalak

Tailwind CSSrako kolore-eskalen sortzailea

Sortu kolore baten 50–950 tonu-eskala osoa Tailwind CSSn erabiltzeko.

Pribatua diseinuz

Tresna honi buruz

Tailwindek kolore bakoitza hamaika tonuko eskala batean antolatzen du, 50etik (ia zuria) 950era (ia beltza). Tresna honek eskala osoa sortzen du zure markaren koloretik abiatuta, bg-primary-100 edo text-primary-700 bezalako klaseak emaitza koherentearekin erabil ditzazun. Tailwindetik kanpo ere balio du, diseinu-sistema baten tonuak edo edozein webguneren kolore-aldagaiak sortzeko.

Aukeratu oinarrizko kolorea hautatzailearekin edo itsatsi haren HEX kodea, jarri izen bat (adibidez, «primary» edo «marka») eta aukeratu sortze modu bat: Klasikoa, Tonu-desplazamendua, Zurian eta beltzean ainguratua, Bizia edo Apala. Hamaika tonuak zerrenda batean eta taula batean ikusiko dituzu; egin klik edozeinetan kopiatzeko. Behean kopiatzeko prest dauden hiru bloke dituzu: CSS aldagaiak, OKLCH formatuko CSS aldagaiak eta Tailwind konfigurazioaren zatia.

Kalkulua zure nabigatzailean egiten da, ezer zerbitzarira bidali gabe. Tonuak OKLCH espazioan sortzen dira maila bakoitzeko argitasun finkoekin, beraz zure oinarrizko koloreak ez du zertan 500ean zehazki geratu: 500a argitasun ertaineko tonu bat izango da, ñabardura berarekin. Oso saturatuta dauden tonu batzuk sRGB mugara egokitzen dira. Tresnak ez du tonuen arteko kontrastea neurtzen irisgarritasunerako.

Ohiko galderak

Nola gehitu kolore pertsonalizatu bat Tailwindi?

Kopiatu «Tailwind konfigurazioa» blokea eta itsatsi tailwind.config.js fitxategiko theme.extend.colors barruan. Tailwind v4an, itsatsi CSS aldagaiak @theme barruan aurrizkia --color- bihurtuta, adibidez --color-primary-500.

Zergatik ez da nire kolorea 500 tonuan zehazki agertzen?

Maila bakoitzak argitasun finko bat du, eskala guztiak elkarren artean koherenteak izan daitezen. Zure koloreak tonua eta saturazioa zehazten ditu, baina oso argia edo oso iluna bada, 300etik edo 700etik gertuago egokituko da.

Zein sortze modu aukeratu?

«Klasikoa» Tailwinden lehenetsitako paleten antzekoa da. «Tonu-desplazamenduak» argiak berotu eta ilunak hozten ditu emaitza naturalagoa lortzeko, «Bizia» moduak saturazioa handitzen du eta «Apala» moduak tonu diskretuak ematen ditu interfaze soiletarako.

Beste tresna batetik kolore bat ireki dezaket hemen?

Bai. Paleta-sortzaileak eta paleta-erauzleak botoi bat dute kolore bakoitzaren ondoan, orri hau kolore hori kargatuta irekitzen duena.

Lotutako tresnak

Daltonismo-simulagailuaEgiaztatu nola ikusten dituzten zure koloreak eta irudiak daltonismo mota desberdinak dituzten pertsonek.Kolore-bihurgailuaBihurtu kolore bat HEX, RGB, HSL, OKLCH, LAB, LCH eta OKLAB formatuen artean berehala.Kontraste-egiaztatzaileaNeurtu testuaren eta atzealdearen arteko kontrastea eta egiaztatu WCAG AA eta AAA jarraibideak betetzen dituen.Gradiente-sortzaileaDiseinatu gradiente linealak, izkinakoak eta sarezkoak, eta esportatu CSS edo irudi gisa.Kolore-harmoniakSortu konbinazio osagarriak, analogoak edo triadikoak oinarrizko kolore batetik abiatuta.Paleta-bildumaArakatu hautatutako 280 kolore-paleta baino gehiago eta ireki sortzailean haien kodeak kopiatu edo doitzeko.