Softonic

Tek Renkli Palet Üreteci

Adım 1 / 3 Ölçeği oluştur

Renkler ve paletler bu tarayıcıda oluşturulur. Adımlı modda proje bu sekmenin oturum deposunda en fazla 30 dakika tutulur; hiçbir renk değeri sunucularımıza veya URL’ye girmez.

Tek renkli bir ölçek oluşturun

Bir renk girin; ardından dönüşümü, interpolasyon uzayını ve örnek sayısını seçin.

Kabul edilen biçimler: #RGB, #RRGGBB, rgb(0–255) ve yüzdeli hsl(). Alfa kanalları kabul edilmez.

CSS değişkeni, Tailwind, SCSS ve tasarım tokenı dışa aktarımlarında kullanılır.

Bir temel renk seçin; üreteç onun etrafında tek renkli bir palet kurar: açık tonlar (daha açık bir geçiş için kademeli olarak beyazla karıştırılır), koyu tonlar (daha koyu bir geçiş için kademeli olarak siyahla karıştırılır) ve kırık tonlar (doygunluğu azaltmak için griyle karıştırılır). Tek bir marka renginden tutarlı bir geçişe ihtiyaç duyan tasarım sistemleri için, Tailwind’in 50–950 ölçeği gibi ama ayarlanabilir, ya da paletten çıkmadan üzerine gelme ve etkin durumları seçmek için kullanışlıdır.

Palet nasıl üretilir

  1. 1

    Bir temel renk girin

    #RGB, #RRGGBB, tam sayı rgb() kanalları veya yüzdeli hsl() kullanın.

  2. 2

    Palet türünü seçin

    Tam açık ve koyu ölçek, beyaza giden açık tonlar, siyaha giden koyu tonlar veya nötre giden kırık tonlar seçin.

  3. 3

    Adım sayısını seçin

    5, 9 veya 11 adım. Dokuz adım Material tarzındaki yaygın 100–900 etiketlerini kullanır; 11 adım Tailwind tarzı bir ölçek için 50 ve 950 değerlerini ekler.

  4. 4

    Kopyalayın veya dışa aktarın

    HEX, RGB, HSL veya OkLCH kopyalayın; CSS, Tailwind, SCSS ve Design Tokens Community Group JSON dışa aktarın.

Açık tonlar, koyu tonlar ve kırık tonlar karşılaştırması

  • Açık ton = temel renk + beyaz. Daha açık, daha pastel. mix(temel, #fff, %y) burada y beyazın yüzdesidir.
  • Koyu ton = temel renk + siyah. Daha koyu, daha kasvetli. mix(temel, #000, %y).
  • Kırık ton = temel renk + gri. Aynı açıklık, daha düşük doygunluk, daha durgun.

Üç dönüşüm farklı görsel karakterler üretir: açık tonlar havadar ve iyimser hissettirir, koyu tonlar oturmuş ve ciddi hissettirir, kırık tonlar sade ve sofistike hissettirir.

Tek temelden 9 adımlı bir geçiş

Adım Açıklama Tipik kullanım
100 Çok açık Yüzeyler, çip arka planları
200 Açık Devre dışı durumlar
300 Orta-açık Kenarlıklar, ayraçlar
400 Hafif matlaşmış İkincil metin (açık arka plan)
500 Temel renk Varsayılan marka, temel çizginiz
600 Orta-koyu Birincil eylemlerde üzerine gelme durumları
700 Koyu Etkin durumlar, başlıklar
800 Çok koyu Açık arka plan üzerinde güçlü metin
900 En koyu ton En yüksek kontrastlı metin

Sayısal etiketler yaygın token kurallarından esinlenir; üretilen renkler resmi Material veya Tailwind değerleri değildir.

Tek renklilik arayüzlerde neden işe yarar

  • Tanıdıklık. Her öğe açıkça birbiriyle ilişkili görünür.
  • Tutarlılık. Tek bir renk tonunu tekrarlamak ilişkileri görünür kılar, ancak tek başına arayüzü renk görme farklılıklarına uygun hâle getirmez.
  • Basitlik. Tek bir karar, temel renk, tüm paleti yönlendirir.

Nötrlerle eşleştirme

Tek renkli bir palet grilere de ihtiyaç duyar. Yaygın desen:

  • Marka renginizden birincil geçiş (9 adım).
  • Birincilin doygunluğu giderilmiş bir sürümünden nötr geçiş (9 adım).
  • Belki bir vurgu rengi (uyarılar ve CTA’lar için iyi seçilmiş tek bir adım).

Bunu sabit bir kural değil, başlangıç yapısı olarak kullanın. Palet sayısı ürün durumlarına, veri görselleştirmeye, anlamsal renklere ve erişilebilirlik gereksinimlerine bağlıdır.

Kontrast kontrol noktaları

Bir arka plan üzerindeki metin için WCAG, normal metin için 4,5:1 ve büyük metin için 3:1 ister. 100, 500 veya 900 gibi etiketler belirli bir kontrast oranı anlamına gelmez; sonuç temel renge, palet türüne ve interpolasyon uzayına bağlıdır.

Kullanmayı planladığınız belirli kombinasyonları her zaman bir kontrast denetleyicisine karşı kontrol edin.

Tasarım sisteminize dışa aktarma

Çıktı biçimleri:

  • CSS özel özellikleri: --primary-50: #f0f9ff; --primary-100: ...
  • Tailwind yapılandırması: tailwind.config.js → theme.extend.colors içine yapıştırmaya hazır JS nesnesi.
  • Sass projeleri için SCSS haritası.
  • Design Tokens Community Group $type/$value yapısını kullanan tasarım tokenları JSON.

Sık Sorulan Sorular

Açık tonlar bilinçli olarak beyaza gider; bu yüzden doygun bir temel hızla pastele dönüşebilir. HSL ile OkLCH’yi karşılaştırın, daha az adım kullanın veya daha az doygun bir temel seçin.

HSL veya OkLCH seçebilirsiniz. HSL açıklık ve doygunluk eksenlerini değiştirir; OkLCH algısal açıklık ile chroma değerini değiştirir ve sonucu sRGB içinde tutmak gerektiğinde chroma değerini azaltır.

Tam ölçekte temel renk ortadaki 500 tokenıdır. Açık ton ölçeği temelde biter, koyu ton ölçeği temelde başlar ve kırık ton ölçeği temelde biter. Etiketler belirli bir açıklık vadetmez.

Doğrudan Figma entegrasyonu yoktur. Tek tek değerleri kopyalayın veya CSS, Tailwind, SCSS ya da Design Tokens Community Group JSON metnini kendi iş akışınız için başlangıç olarak kullanın.

İlgili Araçlar

İsimlik Oluşturucu

Ad | ikinci satır listesinden yazdırılabilir en fazla 60 isimlik oluşturun. A4 veya US Letter üzerinde sayfa başına 8 kart ya da 15 etiket seçin ve yerel olarak yazdırın.

QR Kod Okuyucu

PNG, JPG veya WebP görüntüsünden QR kodu tarayıcıda çözün. URL, Wi-Fi, vCard, SMS, e-posta, takvim, geo veya metni kullanmadan önce görün.

Fotoğrafı Eskize Dönüştürme

JPEG, PNG veya WebP fotoğrafı tarayıcıda grafit, yumuşak kalem ya da füzen tonlarında eskize dönüştürüp PNG veya JPEG olarak kaydedin.

Görsel boyutlandırıcı

Görselleri en boy oranını koruyarak kesin piksel ölçülerine veya yüzdelere göre yeniden boyutlandırın. Toplu hazırlık için uygundur, yükleme gerekmez.

Grafiti Yazı Oluşturucu

Tag, balon, blok, şablon, neon ve wild efektleriyle grafiti tarzı yazılar hazırlayın. Renkleri ayarlayıp tarayıcıda PNG veya SVG olarak dışa aktarın.

Görsel sıkıştırıcı

Görsel kaliteyi korurken dosya boyutunu azaltmak için JPG, PNG ve WebP görsellerini sıkıştırın. Tamamen tarayıcınızda çalışır, yükleme gerekmez.