TL
Tool Lab
💰Donate
💰Donate

Tint & Shade Oluşturucu

Herhangi bir baz renkten açık tintler ve koyu shadeler oluşturun. Tasarım sisteminiz için tam bir renk skalası oluşturun.

Temel Renk
Seviyeler
Tintler (daha acik - beyazla karistirilmis)
#EBF3FE10%
#C4DAFC30%
#9DC1FB50%
#76A8F970%
#4F8FF790%
Temel
#3B82F6Temel
Golge (daha koyu - siyahla karistirilmis)
#3575DD90%
#295BAC70%
#1E417B50%
#12274A30%
#060D1910%
Tam Olcek (en aciktan en koyuya)

Bu araç hakkında

Tint ve Shade Ureteciyi, herhangi bir temel renkten daha acik ve daha koyu varyantlar olusturur. Tintler, temel rengi beyazla karistirarak (parlakligi artirarak) olusturulurken, shadeler siyahla karistirarak (parlakligi azaltarak) olusturulur.

Arac, 5 tint seviyesi ve 5 shade seviyesine kadar, arti orijinal temel renk uretir; bu, secilen tonu merkez alan 11 adimlik bir palet saglar. Hex kodunu kopyalamak icin herhangi bir renk ornegine tiklayin.

Nasıl kullanılır

  1. Renk seciciyi kullanarak veya bir hex kodu yazarak temel renk secin.
  2. Onceden ayarlanmis renkleri hizlica denemek icin ornek dugmeleri kullanin.
  3. Palet genisligini kontrol etmek icin seviye sayisini (3-5) ayarlayin.
  4. Hex kodunu kopyalamak icin herhangi bir renk ornegine tiklayin. Tam olcek icin Tumunu Kopyala kullanin.

Kullanım senaryoları

Tasarim sistemleri her marka rengi icin sistematik bir renk skalasina ihtiyac duyar. UI tasarimcilari tek bir aksiyon renginden hover, aktif ve devre disi durumlar olusturur. Frontend gelistiricileri tutarli renk varyantlari olusturur.

Sık sorulan sorular

  • Tint ile shade arasindaki fark nedir?Tint, rengi beyazla karistirir (daha acik); shade, siyahla karistirir (daha koyu). Ton griyle karistirilir ve burada uretilmez.
  • Seviyeler nasil hesaplanir?Her seviye, temel rengi beyaz veya siyahla %10, %30, %50, %70 ve %90 oranlarda karistirir ve tutarli gorsel adimlar saglar.
  • Bundan CSS degiskenleri alabilir miyim?Cikti hex kodlaridir. Bunlari CSS dosyaniza --color-500, --color-400 vb. olarak yapistirabilirsiniz.