Renk Tonu ve Aciklik Uretici
Tek bir ana renkten HEX ve WCAG kontrast oranlariyla 10 adimli 50-900 olcegi olusturun.
Renk Tonu ve Aciklik Uretici hakkında
HSL icinde %50 aciklik sari ve mavi icin birebir ayni sayidir, ama goz %50 sariyi %50 maviden cok daha parlak okur; bu yuzden yalnizca L kanali uzerinde ilerleyen bir rampa gorsel olarak esit araliklar vermez. Bu urec standart 50-900 olcegini ana renginizi beyaza ve siyaha dogru enterpole ederek kurar ve her adimin yanina gercek WCAG kontrast oranini yazar, boylece goz kararyla degil sayiyla secersiniz. Renk tonu on adim boyunca sabit tutulur, yani olcek marka kimliginden sapmaz.
Renk Tonu ve Aciklik Uretici nasıl kullanılır
- 1
Ana rengi seciciyle alin veya metin kutusuna HEX, RGB ya da HSL olarak yazin.
- 2
Degisken adini belirleyin; ayni ad iki ciktida da kullanilir ve gecersiz karakterler otomatik olarak tireye cevrilir.
- 3
Acik ve koyu tonlar fazla doygun gorunuyorsa yumusatma secenegini acin, boylece uc adimlarda doygunluk duser.
- 4
Her satirda HEX kodunu ve beyaza ile siyaha karsi kontrasti okuyun; tek bir adimi kopyalamak icin koda tiklayin.
- 5
Alttaki panellerden CSS degisken blogunu veya Tailwind yapilandirma parcasini toptan kopyalayin.
Sıkça sorulan sorular
Adimlar neden gozume esit araliklarda gorunmuyor?
Cunku HSL algisal bir renk uzayi degildir. Sabit bir sayisal aciklik farki sabit bir algilanan farka karsilik gelmez; bu ozellikle ayni L degerinde mavilerden cok daha parlak gorunen sari ve turkuazlarda belirgindir. Gercekten esit aralik icin OKLCH gibi algisal bir uzay gerekir; burada pratik ve nesnel olcutunuz kontrast orani sutunudur.
Govde metni icin hangi adimi kullanmaliyim?
Yaygin bir varsayim 500 adiminin marka rengi oldugu ve dolayisiyla metin icin guvenli oldugudur. Genelde degildir. Turkuaz #22d3ee beyaz uzerinde yalnizca 1.81:1 alir ve buyuk metin esigini bile gecemez. Beyaz zeminde 4.5:1 degerini yakalamak icin cogunlukla 600 veya 700 adimina inmeniz gerekir; beyaz uzerinde sutunu bunun tam olarak nerede gerceklestigini soyler.
Acik bir renkle basladigimda 50-300 neden neredeyse ayni gorunuyor?
Bu yontemin gercek bir sinirlamasidir. Ana renk her zaman 500 adimina oturur; acikligi zaten %90 civarindaysa beyaza dogru yalnizca %10 pay kalir ve ustteki dort adim zorunlu olarak birbirine yaklasir. Dengeli bir rampa icin acikligi kabaca %45-60 arasinda olan bir orta ton verin; giris kutusunun altindaki HSL degeri nerede oldugunuzu gosterir.
Cikti Tailwind paletleriyle ayni olur mu?
Hayir. Tailwind varsayilan paletleri elle ayarlanmistir ve olcek boyunca renk tonunu bilerek biraz kaydirir. Bu arac kendi renginizden matematiksel olarak tutarli, sabit tonlu bir rampa uretir. Parca theme.extend.colors altina girer, yani yerlesik paletleri silmeden kendi olceginizi ekler.