Renk Tonları ve Palet Üretici

Nasıl çalışır?

Sol panele tek bir renk yazın — #2F6FED, rgb(47, 111, 237) ya da hsl(220, 84%, 56%) biçimlerinin üçü de tanınır; birden çok renk yazarsanız her satır kendi paletini üretir. Sonra ne istediğinizi seçin. Ton ve gölge seçeneği, rengin tonunu ve doygunluğunu sabit tutup yalnızca açıklığını %90'dan %10'a indirir; 7 renk seçtiğinizde #2F6FED açık uçta #D0DFFB, koyu uçta #04132F olan yedi basamaklı bir merdivene dönüşür. Tümleyen seçeneği renk çemberinde 180 derece karşıya geçer ve vurgu rengini verir; komşu seçeneği ±30 derecelik komşuları yayar, üçlü uyum ise 120 derece aralıklı üç rengi getirir. Her satırda HEX, RGB ve HSL karşılığı yan yana yazılır, çıktının altındaki kutular aynı HEX etiketiyle rengi canlı gösterir. Ürettiğiniz açık tonu zemin, koyu gölgeyi metin olarak kullanacaksanız ikisinin okunaklı olup olmadığını kontrast denetleyicisiyle ölçmeden karar vermeyin.

Ton (tint) nedir?

Ton, bir rengin açılmış hâlidir. Boyacılıkta rengin içine beyaz katarak elde edilir; ekranda ise HSL'deki açıklık değerini yükselterek üretilir. İki yöntemin sonucu aynı değildir: beyaz katmak doygunluğu düşürüp rengi soluklaştırırken, yalnız açıklığı yükseltmek rengin kimliğini korur. Arayüzde tonlar genellikle zemin, seçili satır vurgusu ve devre dışı düğme gibi geri planda kalması gereken yüzeylerde kullanılır.

Gölge (shade) nedir?

Gölge, bir rengin koyulaştırılmış hâlidir ve tonun tam tersi yönde çalışır: boyada siyah katmak, ekranda açıklık değerini düşürmek. Arayüzde gölgeler öne çıkması gereken yerlerde işe yarar — düğmenin üzerine gelindiğinde koyulaşan hâli, açık zeminde okunacak metin rengi, kenarlıklar. Koyu uçta dikkat edilmesi gereken tek şey, açıklık %10'un altına indiğinde farklı gölgelerin birbirinden ayırt edilemez hâle gelmesidir.

Açıklık (lightness) nedir?

Açıklık, HSL modelindeki üçüncü bileşendir ve rengin siyah ile beyaz arasındaki konumunu yüzdeyle anlatır: %0 tam siyah, %100 tam beyazdır; %50 ise rengin en doygun göründüğü orta noktadır. Bu araçtaki bütün ton ve gölge üretimi bu tek sayıyı oynatarak yapılır. Açıklığın %0 ya da %100'e dayandığı yerde ton ve doygunluk bilgisi anlamını yitirir — bu yüzden merdiven %90 ile %10 arasında tutulur.

Tümleyen renk (complementary) nedir?

Tümleyen renk, renk çemberinde bir rengin tam karşısında, yani 180 derece ötesinde duran renktir: mavinin tümleyeni turuncu, kırmızının yeşildir. Yan yana geldiklerinde birbirlerini olabilecek en güçlü şekilde öne çıkarırlar; bu yüzden vurgu renginin doğal adayıdır. Aynı sebeple geniş alanlarda kullanıldıklarında göz yorar ve titreşme hissi yaratırlar — tümleyeni sayfanın zemini değil, tek bir düğmenin rengi yapmak daha güvenlidir.

Komşu (analogous) ile üçlü (triadic) uyum arasındaki fark nedir?

İkisi de renk çemberinde dönerek palet kurar; değişen tek şey ne kadar döndükleridir. Komşu uyum yalnızca ±30 derecelik dar bir yayda kalır, bu yüzden ürettiği renkler aynı aileden görünür ve sakin, bütünlüklü bir yüzey verir — arka planlar ve dolgular için idealdir. Üçlü uyum çemberi 120 derecelik üç eşit parçaya böler; renkler birbirinden belirgin biçimde ayrışır, bu yüzden aynı grafikte üç ayrı seriyi göstermek gibi işlerde tercih edilir. Kabaca: komşu uyum birlik, üçlü uyum ayrım kurar.

Ton merdiveni neden açıklık üzerinden kuruluyor?

Bir rengi açmanın en yaygın iki yolu vardır: beyazla karıştırmak ya da HSL'deki açıklık değerini yükseltmek. Beyazla karıştırma doygunluğu da düşürür, yani renk açılırken aynı zamanda soluklaşır ve marka rengi bir iki adımda griye kaçar.

Bu araç ton ve doygunluğu sabit tutup yalnızca açıklığı oynatır. Sonuç, açık uçtan koyu uca kadar aynı ailede kalan ve eşit aralıklı bir merdivendir; arayüz temalarında istenen tam olarak budur.

Bir uyarı: çok koyu ve çok açık uçlarda insan gözü farkı daha az ayırt eder. 10 basamaklı merdivende iki uçtaki komşu renkler birbirine yapışık görünebilir — bu bir hata değil, gözün doğal davranışıdır.

Hangi uyumu nerede kullanmalı?

Dört seçenek aynı işe yaramaz; hangisini seçeceğiniz rengin arayüzde üstleneceği role bağlıdır.

• Ton ve gölge → tek renkli tema, düğme durumları, kenarlık ve zemin katmanları
• Tümleyen → dikkat çekmesi gereken tek bir vurgu (uyarı rozeti, çağrı düğmesi)
• Komşu → sakin, tek aileden görünen arka plan ve grafik dolguları
• Üçlü → veri grafiğinde birbirinden ayrışması gereken üç seri

Sık sorulanlar

Ton (tint) ile gölge (shade) ne demek?

Ton, rengin daha açık hâlidir; gölge ise daha koyu hâli. Bu araç ikisini tek merdivende üretir: listenin üst satırları tonlar, alt satırları gölgelerdir.

Ürettiğim HSL değerini CSS'e yazsam aynı rengi mi alırım?

Neredeyse. HSL değerleri okunabilirlik için tam sayıya yuvarlanır, HEX ise yuvarlanmamış hesaptan üretilir; ikisi arasında gözle görülmeyecek bir birimlik fark olabilir. Birebir eşleşme gerekiyorsa HEX değerini kullanın.

Kaç tonluk bir ölçek yeterli?

Küçük arayüzlerde 5 basamak yeter. Düğmenin normal, üzerine gelme, basılı ve devre dışı durumlarını ayrı ayrı renklendiriyorsanız 7, tam bir tasarım sistemi kuruyorsanız 10 basamak daha rahat çalışır.

Renklerim bir sunucuya gidiyor mu?

Hayır. Üretim tamamen tarayıcınızın içinde çalışır; yazdığınız renk kodları hiçbir sunucuya ya da üçüncü tarafa gönderilmez.