Renk Tonları Oluşturucu

Tüm araçlar

Tek bir renkten ton ve gölgelerin tam aralığını oluşturun — koyulaştırma/açma adımınızı ve ton sayısını seçin, ardından herhangi bir değeri anında kopyalayın.

Temel renk
Adım
%
Her tonun adım başına ne kadar açık/koyu olacağı (%1–25).
Ton sayısı
Temel rengin her iki tarafında oluşturulacak ton ve gölge sayısı.
Degrade
Oluşturulan tonlar

Temel renk, adım yüzdesi ve sayı seçin — her ton ve gölge tarayıcınızda anında hesaplanır.

Renk Tonları Oluşturucu Hakkında

Color Shades Generator, tek bir rengi tam bir açık ton ve koyu ton yelpazesine genişletir. Ona bir taban renk verin; bir tarafta giderek açılan tonlar, diğer tarafta giderek koyulaşan tonlar üretir — modern tasarım sistemlerinde kullanılan klasik 50'den 900'e stil rampa.

Çıktıyı iki kontrol şekillendirir: adım yüzdesi her tonun ne kadar açılacağını veya koyulaşacağını (adım başına %1–25) belirler, sayı ise tabanın her iki tarafında en fazla ona kadar kaç açık ve koyu ton görüneceğini belirler. Bir gradyan şeridi tüm rampayı bir bakışta önizler.

Üretim, siz yazarken tarayıcınızda anında gerçekleşir — hiçbir şey sunucuya gönderilmez. Tek bir değeri, tam listeyi veya tüm rampayı bir tasarım-token dosyasına ya da Tailwind tarzı bir renk skalasına eklemeye hazır CSS değişkenleri olarak kopyalayın.

Renk Tonları Oluşturucu Nasıl Kullanılır

  1. Seçiciyle bir taban renk seçin veya bir değer yazın; ilham için "Rastgele renk"e tıklayın.
  2. Her tonun ne kadar güçlü açılacağını veya koyulaşacağını kontrol etmek için adım yüzdesini ayarlayın.
  3. Her tarafta kaç açık ve koyu ton görüneceğine karar vermek için ton sayısını seçin.
  4. Bir renk örneğini kopyalamak için tıklayın veya tam rampa için "Tümünü kopyala" ve "CSS değişkenlerini kopyala"yı kullanın.

Sıkça sorulan sorular

Evet, tamamen. Tüm açık ve koyu tonlar tarayıcınızda canlı olarak hesaplanır, bu yüzden herhangi bir maliyet, hesap veya kaç rampa oluşturabileceğinize dair bir sınır yoktur.

Açık ton, taban renginizin beyaza doğru karıştırılmış halidir (daha açık), koyu ton ise tabanın siyaha doğru karıştırılmış halidir (daha koyu). Oluşturucu, taban renginizin etrafında "Açık tonlar (daha açık)" ve "Koyu tonlar (daha koyu)" olarak etiketlenmiş her iki yönü de aynı anda üretir.

Toplamda dokuz ila on bir renk örneği elde etmek için sayıyı taraf başına 4 veya 5 olarak ayarlayın, tabanınız ortada olsun. Yaklaşık %8–10'luk bir adım genellikle popüler çerçevelerin kullandığı 50–900 skalalarına benzer bir aralık verir.

Küçük adımlar (%3–6) hafif hover ve kenarlık varyasyonları verir; orta adımlar (%8–12) tam tasarım sistemi rampalarına uyar; büyük adımlar (%15–25) yüksek kontrastlı, poster benzeri setler oluşturur. Gradyan önizlemesini izleyin — iyi bir rampa bantlanma olmadan eşit şekilde koyulaşmalıdır.

Evet. "CSS değişkenlerini kopyala" tüm rampayı adlandırılmış CSS özel özellikleri olarak çıkarır, "Tümünü kopyala" ise SCSS haritalarından JavaScript tema nesnelerine kadar her yere yapıştırabileceğiniz düz bir değer listesi verir.
Paylaş
İlgili Araçlar
Renk Paleti Oluşturucu Etkileşimli renk tekerleğinden uyumlu renk paletleri oluşturun — analogous, complementary veya triad gibi uyum kuralları uygulayın, ardından herhangi bir değeri anında kopyalayın. Ücretsiz
Renk Karıştırıcı Bir başlangıç rengini bitiş rengine 10 adıma kadar harmanlayın — degradeyi önizleyin, her tonu alın ve herhangi bir biçimi anında kopyalayın. Ücretsiz
Palet Dışa Aktarıcı Bir renk seti yapıştırın veya içe aktarın ve CSS değişkenleri, SCSS, Tailwind config, JSON veya SVG renk kartları olarak anında dışa aktarın — herhangi bir paletin son adımı. Ücretsiz
Görüntüden Renk Çıkarıcı Herhangi bir görüntüden rafine, kopyalamaya hazır renk paleti çıkarın. Ücretsiz
Web Güvenli Renk Paleti Klasik 216 web güvenli rengi tıklanabilir bir renk kartı ızgarası olarak inceleyin — renk tonuna veya küp sırasına göre sıralayın, hex değerine göre filtreleyin ve herhangi bir HEX veya rgb() değerini anında kopyalayın. Ücretsiz
Yazı Tipi Eşleştirme ve Google Fonts Dizini Popüler Google Fonts yazı tiplerinden oluşan özenle seçilmiş bir dizini canlı önizlemelerle inceleyin, kategoriye göre filtreleyin ve ada göre arayın, ardından yapıştırmaya hazır CSS'yi kopyalayın ve önerilen yazı tipi eşleşmelerini keşfedin — tümü tarayıcınızda. Ücretsiz
Popüler aramalar
renk tonu oluşturucu açık ve koyu tonlar rengi açma ve koyulaştırma bir rengin tonları renk ton oluşturucu renk tonları oluştur
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.