HEX Renk Tonu & Gölge Üretici

Bir HEX renginin açılmış ve koyulaştırılmış tonlarını üretin; paleti kontrast ve tasarım bağlamında ayrıca değerlendirin.

Bu aracın ana girdisi tarayıcınızda işlenir ve harici API’ye gönderilmez. Yazı tipi ve arayüz dosyaları harici sağlayıcılardan yüklenebilir.

YULATOOLS · KULLANIM REHBERİ

HEX Renk Tonu & Gölge Üretici

HEX renk tonu aracı, seçtiğiniz temel rengin RGB bileşenlerini beyaza doğru açıp siyaha doğru koyulaştırarak bir dizi HEX renk örneği oluşturur. Swatch'lara tıklayarak tek bir değeri panoya kopyalayabilir, paleti görsel olarak karşılaştırabilirsiniz.

Bu hesaplama hazır bir tasarım sistemi veya uyum garantisi sunmaz. Renkler arka plan, yazı boyutu, cihaz ve çevre ışığına göre farklı algılanabilir; arayüzde kullanacağınız her ön plan-arka plan çiftini kontrast kontrolünden geçirin.

Hangi durumlarda kullanılır?

  • Bir marka renginden arayüz için daha açık ve koyu varyantlar çıkarmak.
  • Kart, hover ve kenarlık durumları için aynı rengin yakın tonlarını karşılaştırmak.

Nasıl kullanılır?

  1. Renk seçicisinden temel HEX rengini belirleyin.
  2. Oluşan açık ve koyu swatch'ları inceleyin; istediğiniz rengin üstüne tıklayıp kopyalayın.
  3. Seçtiğiniz tonu gerçek bileşende deneyip metin ve arka plan kontrastını ayrı ölçün.

Örnek

Girdi: #3366CC

Çıktı: #3366CC renginden türetilen açık ve koyu HEX swatch dizisi

Kimler için?

  • Arayüz tasarımcıları
  • CSS token paleti hazırlayan geliştiriciler
  • Marka rengi çevresinde varyant arayan içerik ekipleri

Gizlilik ve sınırlar

Renk seçimi ve ton hesaplaması tarayıcıda yapılır; renk girdisi bir API'ye gönderilmez. Çıktı renk swatch'larıdır; otomatik erişilebilirlik veya marka uygunluğu değerlendirmesi içermez.

Sık sorulan sorular

Tonlar nasıl oluşturuluyor?

Araç temel HEX rengi üzerinden RGB bileşenlerini beyaza veya siyaha doğru kaydıran basit bir hesaplama uygular; algısal olarak eşit parlaklık aralıkları sağlamaz.

Her swatch erişilebilir mi?

Hayır. Üretilen renklerin WCAG kontrastını araç hesaplamaz. Kullanacağınız metin ve arka plan çiftlerini ayrı kontrast testiyle doğrulayın.

Renk kodunu nasıl kopyalarım?

Palet içindeki swatch'a tıklayın; ilgili HEX değeri panoya kopyalanır. Panoya erişim tarayıcı izinlerine bağlıdır.

Bu palet marka standardımı belirler mi?

Hayır. Çıktı keşif ve taslak içindir. Marka rehberi, renk profili, farklı ekranlardaki görünüm ve tasarım bağlamı insan kontrolü gerektirir.