Ücretsiz araç
Tek renkten
tam palet
Marka renginizin kodunu yazın. Araç ondan 11 tonluk bir skala kurar, her tonun nerede kullanıldığını ve metin için uygun olup olmadığını gösterir. Kodu tek tıkla kopyalarsınız.
Paletiniz
Bir tona dokunun, kodu kopyalanır. 500 sizin ana renginizdir.
Zemin
Kenarlık, ikon
Buton
Üzerine gelme, basma
Metin
Kontrast WCAG kuralıyla ölçülür: normal metin için en az 4,5:1, büyük yazı ve ikon için 3:1.
Sitede böyle görünür
Örnek yalnızca bu skaladan kuruldu. Koyu temada skala tersten okunur: 50 ile 950, 100 ile 900 yer değiştirir.
Yaz indirimi başladı
Seçili ürünlerdeki indirim hafta sonuna kadar sürüyor.
Şehir içi teslimat ücretsiz.
Yaz indirimi başladı
Seçili ürünlerdeki indirim hafta sonuna kadar sürüyor.
Şehir içi teslimat ücretsiz.
Aynı renk beyaz ve siyah katılarak
Yaygın yöntem: açık tonlar için renge beyaz, koyular için siyah katmak. Açık tonlar solar, koyular bulanıklaşır. Yukarıdaki skala rengin canlılığını OKLCH hesabıyla korur.
Bu araç
Beyaz ve siyah katarak
Kodu alın
:root {
--brand-50: #f2f0ff;
--brand-100: #e1ddff;
--brand-200: #cac3ff;
--brand-300: #ab9eff;
--brand-400: #8066ff;
--brand-500: #5f1fff;
--brand-600: #5000df;
--brand-700: #4300be;
--brand-800: #36009e;
--brand-900: #2c0085;
--brand-950: #1a0356;
}Paletle çalışmak
Her ton kendi yerinde
Skala hazır seçimlerden oluşan bir settir. Rengi her seferinde gözle seçmek yerine her işe kendi tonunu verirsiniz ve bütün site tek bir aile gibi görünür.
En açık tonlar: zemin
Bölümler, kartlar ve bildirim kutuları. Gözü yormaz ama marka rengini hissettirir.
Açık ve orta tonlar: kenarlık ve ikon
Çizgiler, çerçeveler, ikonlar. Beyaz zeminde bunları normal metin için kullanmayın: kontrast yetmez.
Ana ton: buton
Butonlar, bağlantılar, vurgular. Bütün sitede aynı ton kalır, ziyaretçi neye tıklanabileceğini çabuk öğrenir.
Bir iki basamak koyu: üzerine gelme ve basma
Fare üzerine gelince buton bir basamak, basılınca bir basamak daha koyulaşır. Yeni renk uydurmaya gerek kalmaz.
En koyu tonlar: metin
Başlıklar ve metin. Düz gri yerine markanın koyu tonu metni de renk ailesinin parçası yapar.
Başlamak için üç skala yeter
- Marka skalası: buton, bağlantı, vurgu
- Gri skala: metin, kenarlık, zemin
- Durum renkleri: başarı, uyarı, hata, bilgi
- Koyu tema için yeni renk yok: aynı skala tersten
Sitede kullanılan renklerin düzenli listesidir. Her rengin birkaç tonu olur ve her ton kendi işini yapar: biri zemin, biri buton, biri metin için. Böylece sitede rastgele renk kalmaz.
50'den 950'ye 11 basamak Tailwind CSS'te ve birçok tasarım sisteminde standarttır. Basamaklar arasındaki adım küçük olduğu için metinle zemin arasında yeterli kontrastı veren tonu bulmak kolaylaşır.
Ana renk skalanın ortasıdır: açık tonlar ondan beyaza, koyu tonlar siyaha doğru hesaplanır. Renginiz çok açık ya da çok koyuysa araç uyarır: böyle bir rengi zemin veya metin olarak kullanmak, buton için başka bir ton seçmek daha doğrudur.
Yazı ile zemin arasındaki parlaklık farkıdır. WCAG'ye göre normal metin için en az 4,5:1, büyük yazı ve ikon için en az 3:1 gerekir. Araç her tonu beyaz ve koyu zeminde ölçer ve ne için uygun olduğunu yazar.
Beyaz katınca renk solar, siyah katınca bulanık ve grimsi görünür. Araç OKLCH renk modelinde çalışır: parlaklığı değiştirir, rengin canlılığını ise her basamak için ayrıca hesaplar.
CSS değişkenleri her sitede, Tailwind kodu Tailwind CSS projelerinde, JSON ise Figma eklentileri ve diğer araçlar için. Kodu kopyalayıp projenize yapıştırmanız yeterli.
Projenizi konuşalım!
