Palette, Shades ve Tints Nedir?

Palet (palette), bir tasarımda kullanılan renklerin organize edilmiş kümesidir. Tints ve shades ise ana rengin türevleri olup, tutarlı ve profesyonel paletler oluşturmanın temel taşlarıdır. Bu kavramları anlamak, tek bir renkten zengin bir renk sistemi kurmanıza olanak tanır.

Tint, renge beyaz eklenerek elde edilen açık tonlardır. Shade ise renge siyah eklenerek elde edilen koyu tonlardır. Tones ise gri eklenerek elde edilir. Hepsi aynı hue'yu (ana ton) korur; sadece lightness değişir.

Palet Nedir?

Renk paleti, bir projede veya markada kullanılan renklerin tanımlı koleksiyonudur. Genellikle 5-7 ana renk ve bunların tints/shades'lerini içerir. Tutarlı bir palet sayesinde tüm sayfalar ve bileşenler uyumlu görünür.

Tint (Açık Ton) Nasıl Oluşturulur?

Tint, ana renge beyaz karıştırılarak elde edilir. HSL'de Lightness değerini artırarak veya RGB'de her kanala beyaza doğru değer ekleyerek üretilir. Örn: #3b82f6 (mavi) → açık mavi tintleri #60a5fa, #93c5fd. Arka planlar ve hover durumları için idealdir.

Tint Örnekleri (Mavi Ana Renk)
/* Ana renk: #3b82f6 */
--blue-50: #eff6ff;  /* En açık tint */
--blue-100: #dbeafe;
--blue-500: #3b82f6; /* Ana renk */
--blue-900: #1e3a8a; /* Koyu shade */

Shade (Koyu Ton) Nasıl Oluşturulur?

Shade, ana renge siyah karıştırılarak elde edilir. HSL'de Lightness azaltılır. Metin, kenarlıklar ve vurgu alanları için kullanılır. Koyu arka planlar da shade'lerden oluşturulabilir.

Tasarımda Kullanım

60-30-10 kuralına göre ana rengi dominant yapın; açık tintleri arka planlarda, koyu shade'leri metin ve kenarlıklarda kullanın. Gradient'lerde tint'ten shade'e geçiş yaparak derinlik oluşturabilirsiniz.

Erişilebilirlik Dikkatleri

Palet oluştururken kontrast oranlarını kontrol edin. Açık arka plan üzerinde koyu metin (4.5:1 veya üzeri) tercih edin. Tint'ler çok açıksa metin okunamaz hale gelir. WCAG rehberimiz detaylı bilgi sunar.