Renk Tonu ve Tint Oluşturucu

Herhangi bir temel rengin tint ve gölgelerini oluşturun.

Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız hiçbir zaman bir sunucuya yüklenmez.

Tints (mixed with white)

#d8e6fd

#b1cdfb

#89b4fa

#629bf8

Base

#3b82f6

Shades (mixed with black)

#2f68c5

#234e94

#183462

#0c1a31

Bu oluşturucu ne yapar?

Tek bir temel renkten dokuz adımlı bir renk skalası kurar: beyaza doğru karıştırılmış dört açık tint, temel rengin kendisi ve siyaha doğru karıştırılmış dört koyu gölge.

Nasıl kullanılır?

Üç veya altı haneli bir HEX renk girin. Temel renk normalleştirilir ve sekiz tint/gölge örneği hemen görünür; HEX değerini kopyalamak için herhangi bir örneğe tıklayın.

Örnek hesaplama

#3b82f6 temel rengi, beyaza doğru %80, %60, %40 ve %20 karıştırılmış tintler ve siyaha doğru %20, %40, %60 ve %80 karıştırılmış gölgeler üretir — toplamda dokuz örnek.

Karışım nasıl hesaplanır?

Her adım, temel rengin kırmızı, yeşil ve mavi kanallarını belirtilen yüzdede beyaza (255, 255, 255) veya siyaha (0, 0, 0) doğru doğrusal olarak enterpolasyon yapar, ardından sonucu yuvarlar.

Algısal sınırlamalar

Bu, algısal HSL, OKLCH veya gama düzeltmeli karışım değil, doğrudan sRGB kanal enterpolasyonudur; bu yüzden eşit yüzde adımları göze her zaman eşit aralıklı görünmez — bazı adımlar diğerlerinden daha büyük bir sıçrama gibi görünebilir.

Pratik kullanım

Dokuz renklik set, bir tasarım sisteminde hover/aktif durumlar, kenarlıklar, arka planlar ve arka plan üzerindeki metin kombinasyonları için iyi bir başlangıç noktasıdır — herhangi bir çifti metin için kullanmadan önce kontrastı ayrıca doğrulayın.

Gizlilik

Üretim tamamen tarayıcınızda gerçekleşir; girdiğiniz renk yüklenmez.

Sıkça Sorulan Sorular

Tint ve gölge arasındaki fark nedir?
Tint, beyazla karıştırılmış bir renktir (daha açık); gölge, siyahla karıştırılmış bir renktir (daha koyu) — birlikte bir renk skalası oluştururlar.
Bu kaç adım oluşturur?
Dört tint, temel renk ve dört gölge — toplamda dokuz adım, tipik bir 50-900 arayüz renk skalasına benzer.
Gölgeler ve tintler ne için kullanılır?
Bir tasarım sisteminde hover/aktif durumlar, kenarlıklar, arka planlar ve arka plan üzerindeki metin kombinasyonları için yaygın olarak kullanılırlar.