Bu siteyi çalıştırmak ve izninizle trafiği ölçüp ilgili reklamları göstermek için çerezler kullanıyoruz. Tüm çerezleri kabul edebilir, zorunlu olmayanları reddedebilir veya tercihlerinizi aşağıdan yönetebilirsiniz.Gizlilik Politikası · Kullanım Koşulları
OKLCH ya da OKLab karışımı ve sRGB yedeğiyle doğrusal, radyal ve konik CSS gradyanları oluşturun; CSS, Tailwind sınıfı, SVG kopyalayın ya da PNG indirin.
🔒Tamamen tarayıcınızda çalışır - gradyanlarınız hiçbir yere yüklenmez.
AaAa
Renk durakları
Durak eklemek için çubuğa tıklayın, taşımak için durağı sürükleyin. Bir durak seçiliyken ok tuşları onu taşır, Delete tuşu siler.
Hazır ayarlar
Renk karışım alanı
Aynı duraklar, üç farklı şekilde karıştırılmış. Klasik sRGB, birbirinden uzak renkler arasında grileşebilir ya da bulanıklaşabilir; OKLab parlaklığı dengeli tutar, OKLCH ise rengin canlılığını korur. OKLab veya OKLCH'yi tanımayan tarayıcılar, aynı görünen bir sRGB yedeği alır.
Üstteki metin
Beyaz metin
2,1:1
Çok düşük
Siyah metin
4,2:1
AA yalnızca büyük metin
Gradyanın herhangi bir noktasındaki en düşük kontrast. WCAG AA, gövde metni için 4,5:1, büyük metin için 3:1 ister.
CSS gradyanınızı göz kararı oluşturun ve her yerde çalışan kodu kopyalayın. Doğrusal, radyal veya konik türü seçin, renk duraklarını sürükleyin ve renklerin nasıl karışacağını belirleyin: modern tarayıcılar OKLab veya OKLCH içinde karıştırabilir, bu da klasik sRGB gradyanlarındaki gri ölü bölgeyi önler; kod, eski tarayıcılar için eşleşen bir sRGB yedeğiyle birlikte gelir. Üstteki beyaz veya siyah metnin okunaklı kalıp kalmadığını da görür, Tailwind sınıfı, SVG ya da istediğiniz boyutta PNG olarak dışa aktarabilirsiniz.
Sık sorulan sorular
sRGB, OKLab ve OKLCH gradyanları arasındaki fark nedir?+−
Bunlar, iki durak arasındaki renkleri hesaplamanın farklı yollarıdır. Klasik CSS gradyanları sRGB'de karışır; bu da griye kaymaya (maviden sarıya geçiş donuk bir griden geçer) ya da ortada koyulaşmaya yol açabilir. OKLab, eşit adımlar eşit görünecek şekilde tasarlanmıştır, bu yüzden karışımın parlaklığı dengeli kalır. OKLCH ise açıklığı, renk doygunluğunu ve tonu ayrı ayrı karıştırır; böylece renk çemberi boyunca ilerler ve canlı kalır - kırmızıdan maviye geçiş, koyu ve soluk bir leylak rengi yerine mordan geçer. Bunları kullanmak için gradyanın içine “in oklab” veya “in oklch” yazın.
OKLCH gradyanı her tarayıcıda çalışır mı?+−
Chrome ve Edge 111+, Safari 16.2+ ve Firefox 127+ “in oklch” ve “in oklab” ifadelerini anlar. Daha eski tarayıcılar için kodda iki “background” satırı bulunur: ilki, araya ek duraklar eklenmiş düz bir sRGB gradyanıdır, bu sayede neredeyse aynı görünür; ikincisi ise modern olanıdır. Tarayıcılar anlamadıkları satırı atlar, böylece herkes kendi tarayıcısının çizebildiği en iyi sürümü görür.
Tailwind CSS ile nasıl kullanırım?+−
“Tailwind sınıfı” seçeneğini seçip kopyalayın: bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)] gibi bir keyfi değerdir (arbitrary value) ve Tailwind'in beklediği gibi boşluklar alt çizgiyle yazılır. Bunu class içine yapıştırın - herhangi bir yapılandırma gerekmez.
Konik gradyanı neden SVG olarak indiremiyorum?+−
SVG'de yalnızca doğrusal ve radyal gradyanlar vardır ve radyal bir gradyan CSS'teki gibi tekrarlanamaz. Bu durumlarda PNG indirin: aynı matematikle piksel piksel çizildiği için, seçtiğiniz her boyutta CSS ile birebir aynı görünür.
Paylaşım bağlantısı gizli mi?+−
Gradyan, bağlantıdaki # işaretinden sonraki kısımda saklanır; tarayıcılar bu kısmı hiçbir zaman sunucuya göndermez. Sayfa da tamamen tarayıcınızda çizilir. Hiçbir şey yüklenmez ve gradyan yalnızca bu cihazda tutulur, böylece geri döndüğünüzde hâlâ yerinde olur.