Renk Tonu Üretici

Tek bir temel HEX rengini ayarlanabilir adımlar, adım başına WCAG kontrast ipuçları ve CSS, Tailwind, JSON dışa aktarımıyla OKLCH, HSL veya RGB ölçeğine dönüştürün.

Araç yükleniyor…

Renk Tonu Üretici — Tek bir temel rengi HEX olarak girin ve OKLCH ya da HSL'de algısal olarak eşit aralıklı interpolasyonla — ton sabit, parlaklık eşit dağılmış — veya klasik doğrusal RGB karışımıyla, istediğiniz kadar adımla anında eksiksiz bir ölçek oluşturun. Tonu ve doygunluğu ayarlayın, her adım için hangi tonların beyaz ve siyah üzerinde metin olarak okunabilir kaldığını gösteren bir WCAG kontrast ipucu okuyun ve tüm diziyi CSS özel özellikleri, Tailwind renk yapılandırması veya JSON olarak kopyalayın. Her şey tamamen tarayıcınızda çalışır; hiçbir renk asla bir sunucuya gönderilmez.

Renk Tonu Üretici nedir?

Renk Tonu Üretici, tek bir temel HEX rengini bir tasarım sistemi için eksiksiz bir açık-koyu ton ölçeğine dönüştürür. Yalnızca RGB'de doğrusal karıştırmak yerine OKLCH veya HSL'de interpolasyon yapabildiği için ton sabit kalır ve parlaklık eşit dağılır; bu da soluk veya yıkanmış adımlar olmadan algısal olarak dengeli bir dizi verir. Kaç adım üreteceğini seçersiniz — 2'den 24'e kadar veya virgülle ayrılmış özel bir etiket listesi —, tonu kaydırır veya doygunluğu ölçeklersiniz ve her adım için hangi tonların beyaz ve siyah üzerinde metin olarak çalıştığını gösteren bir WCAG kontrast ipucu okursunuz. Tamamlanan ölçek tek tıklamayla CSS özel özellikleri, Tailwind renk yapılandırma nesnesi veya JSON olarak kopyalanır.

Renk Tonu Üretici nasıl kullanılır

  1. Temel renk (HEX) alanına #rrggbb veya #rgb biçiminde bir temel renk yazın ya da görsel olarak seçmek için büyük örneğe tıklayın.
  2. Bir renk uzayı seçin: sabit tonlu, algısal olarak eşit bir dizi için OKLCH veya HSL, klasik doğrusal karışım için RGB.
  3. Kaç adım istediğinizi belirleyin (2–24) ya da Ayarlar'ı açıp virgülle ayrılmış özel bir adım listesi girin, tonu kaydırın, doygunluğu ölçekleyin ve dışa aktarma renk adını ayarlayın.
  4. Her satırın iki kontrast hücresini okuyun — beyaz ve siyah üzerindeki A harfi —; o ton metin için WCAG AA'yı sağladığında vurgulanır.
  5. Tek bir adımın HEX değerini kopyalayın ya da kopyalama düğmeleriyle tüm ölçeği CSS değişkenleri, Tailwind yapılandırması veya JSON olarak kopyalayın.

Örnekler

Marka mavisinden eşit OKLCH dizisi

OKLCH seçin ve 11 adımı koruyun: 50–950 ölçeği mavi tonu korurken parlaklığı eşit dağıtır, böylece doğrusal RGB karışımında olabileceği gibi hiçbir adım soluk veya yıkanmış görünmez.

Beş adımlık özel Tailwind yapılandırması

Özel adım listesine 100, 300, 500, 700, 900 girerek yalnızca beş örnek üretin, ardından bunları tam olarak o etiketleri anahtar alan bir Tailwind renk nesnesi ya da CSS değişkenleri ve JSON olarak kopyalayın.

Sıkça sorulan sorular

RGB, HSL ve OKLCH seçenekleri arasındaki fark nedir?
RGB renginizi beyaza ve siyaha doğru doğrusal karıştırır; hızlıdır ama orta tonlarda düzensiz görünebilir. HSL ve OKLCH ise tonu sabit tutar ve parlaklığı eşit dağıtır; OKLCH algısal olarak eşdüzeydir, bu yüzden her adım eşit bir parlaklık sıçraması gibi görünür. En dengeli dizi için OKLCH'yi seçin.
Kaç ton üretebilirim ve bunları adlandırabilir miyim?
2 ile 24 arasında herhangi bir adım sayısı belirleyin. 11 değeri tanıdık Tailwind numaralandırmasını (50, 100…900, 950) kullanır; diğer değerler 50'den 950'ye eşit dağıtılır. Ayrıca Ayarlar'da virgülle ayrılmış özel bir etiket listesi yazabilirsiniz; bu, adım sayısını geçersiz kılar ve her adımı tam yazdığınız gibi adlandırır.
WCAG kontrast ipucu nasıl hesaplanır?
Araç her ton için göreli parlaklıktan yola çıkarak saf beyaz ve saf siyaha karşı WCAG kontrast oranını hesaplar. Her satırdaki iki küçük hücre beyaz ve siyah üzerinde A harfini gösterir ve oran 4.5:1'e (normal metin için AA) ulaştığında vurgulanır; tam oranı ve AA mı AAA mı olduğunu görmek için üzerine gelin.
Renk verilerim herhangi bir yere yükleniyor mu?
Hayır. Renk matematiği, kontrast kontrolleri ve üç dışa aktarmanın tümü tamamen tarayıcınızda çalışır, bu yüzden hiçbir renk değeri asla bir sunucuya gönderilmez. Çevrimdışı çalışır ve paletinizi gizli tutar.

İlgili araçlar

Koddan Görsele

Bir kod parçacığını tarayıcınızda söz dizimi vurgulu bir görsele dönüştürün; 20'den fazla dil, özel temalar ve arka planlar, satır numaraları ve PNG veya SVG dışa aktarma ile.

Renk Kontrastı Denetleyici

Metin ve arka plan rengi arasındaki WCAG 2.1 kontrastını ve APCA Lc puanını denetleyin, AA, AAA ve 3:1 rozetlerini görün ve en yakın geçen rengi uygulayın.

Renk Karıştırıcı

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Renk Körlüğü Simülatörü

Bir görsel yükleyin ve protanopi, döteranopi, tritanopi veya tam renk körlüğünde nasıl göründüğünü önizleyin, ardından simüle edilmiş sonucu indirin.