CSS Gradyan Renkleri: Gradyanlar Neden Ortada Griye Döner ve 3 Çözüm
Maviyi sarıya karıştırın, orta kısım griye döner, çünkü hex renkler RGB'de karışır. Orta bir durak ekleyin, OKLCH'de karıştırın ya da renk çarkında komşu renkleri seçin. Beş hazır gradyan dahil.
Bir gradyan ortada griye döner, çünkü tarayıcı hex renkleri RGB'de karıştırır ve birbirinin tam karşısında duran iki renk yarı yolda birbirini yok eder. Çözüm, ortaya bilerek bir renk vermek ya da karışımın hesaplanma biçimini değiştirmektir. İşte üç çözüm ve yapıştırabileceğiniz beş gradyan.
Orta neden griye kaçar
Bulanık görünen bir gradyana bakın ve uçları boşverin. Uçlar iyi. Onları siz seçtiniz. Ortayı ise kimse seçmedi.
Gradyan bir karışımdır ve karışım matematik ister. Hex renkler RGB değerleridir, bu yüzden tarayıcı varsayılan olarak onları kanal kanal karıştırır.
Mavi ile sarının tam ortasında kırmızı 0 ile 255'in ortasında, yeşil 0 ile 255'in ortasında, mavi de 255 ile 0'ın ortasındadır. Her kanal 128 civarına düşer. Eşit kırmızı, yeşil ve mavi, grinin tanımıdır.
#0000FF'den #FFFF00'a
#0EBAAE orta duraklı
Bu sizin monitörünüzün ya da sıkıştırmanın sorunu değil. Bu aritmetik ve iki renk renk çarkında birbirinden uzak olduğunda ortaya çıkıyor. Mavi ve sarı neredeyse tam zıt, yani en kötü senaryo.
Çözüm 1: orta durak ekleyin
En doğrudan çözüm, ortayı şansa bırakmayı bırakmak. %50'ye sizin seçtiğiniz bir renkle üçüncü bir renk durağı ekleyin.
background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00);
#0EBAAE, algılanan renk olarak mavi ile sarı arasında duran bir deniz mavisidir. Karışım artık maviden deniz mavisine, sonra deniz mavisinden sarıya gider ve iki yarı da griden geçmez.
Bu her tarayıcıda çalışır ve yeni bir sözdizimi gerektirmez, yani her yerde aynı görünmesi gereken bir tasarım için güvenli seçimdir. Orta rengi gözle seçin, sonra iki ucun yanında kontrol edin. Bedeli, artık iki yerine üç renge sahip olmanız.
Çözüm 2: OKLCH'de karıştırın
Diğer çözüm renk eklemek yerine matematiği değiştirir. CSS, karışımın hangi renk uzayında yapılacağını seçmenize izin verir ve OKLCH rengi açıklık, kroma ve ton olarak tanımlar. Kroma bir rengin ne kadar renkli olduğudur, yani krormayı koruyan bir karışım renkli kalır.
background: linear-gradient(in oklch, #0000FF, #FFFF00);
in oklch ile tarayıcı, gri merkezin içinden dümdüz geçmek yerine renk çarkının çevresinden dolaşır, yeşillerden ve deniz mavilerinden geçer. İki renk kalır ve kod kısa kalır. MDN bunu gradyan fonksiyonunun içindeki renk interpolasyon yöntemi olarak belgeler ve eski hex renkler, eski sayfalarla uyumlu kalmak için siz bir şey seçmediğinizde yalnızca RGB kullanır.
Bilmeniz gereken iki şey var. Bu yolculuktaki bazı renkler ekranın gösterebileceğinin dışına düşebilir, bu yüzden tarayıcılar onları gösterilebilir en yakın değere kırpar. Ayrıca izlediği rota çarkın kısa tarafıdır, o yüzden seçtiği yolun hoşunuza gidip gitmediğini kontrol edin. Modern CSS'te OKLCH renk rehberimiz bu uzayı daha derin anlatıyor.
Çözüm 3: komşu renkleri seçin
Üçüncü çözüm koda dokunmaz. Birbirini yok edemeyecek renkler seçer.
#0066FF'den #FF8800'e
#6440E0'dan #E040A0'a
Zıt renkler griye karışır. Komşu renkler, aralarında hâlâ renk olan bir şeye karışır. Bir marka iki zıt rengi eşleştiriyorsa, yine de gradyanda kullanabilirsiniz: aralarına bir orta durak koyun ya da OKLCH'de karıştırın.
Maviden turuncuya, varsayılan karışım
Maviden turuncuya, oklch'de
Kendi gradyanınızı nasıl kontrol edersiniz
- Uçlara değil, ortaya bakın.
- Orada gördüğünüz rengi adlandırın. Ad gri, kahverengi ya da çamursa, #808080 veya #807780'de olduğu gibi, sorun budur.
- Yukarıdaki çözümlerden birini seçin ve iki sürümü yan yana karşılaştırın.
Bir gradyan en kötü noktası kadar iyidir ve en kötü noktası neredeyse her zaman ortasıdır.
Çalabileceğiniz beş gradyan
Her biri ortasının renkli kaldığı doğrulanarak kontrol edildi. İlkinde yerleşik bir orta durak var. Diğer dördü komşu tonlar kullanıyor. Kopyalamak için bir koda dokunun.
| Gradyan | Başlangıç | Orta | Bitiş | Neden işe yarıyor |
|---|---|---|---|---|
| Mavi, deniz mavisi, sarı | #0000FF | #0EBAAE | #FFFF00 | Zıt uçlar, gerçek bir orta durakla kurtarıldı |
| Menekşeden pembeye | #6440E0 | yok | #E040A0 | Çarkta komşular |
| Maviden deniz mavisine | #2F5BEA | yok | #14B8A6 | Çarkta komşular |
| Turuncudan şok pembeye | #FF7A00 | yok | #FF2E93 | Çarkta komşular |
| Yeşilden misket limonuna | #00A86B | yok | #C6F432 | Çarkta komşular |
Bunu geliştiricinize verin
.gradient-sunrise { background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00); }
.gradient-violet { background: linear-gradient(90deg, #6440E0, #E040A0); }
.gradient-ocean { background: linear-gradient(90deg, #2F5BEA, #14B8A6); }
.gradient-sunset { background: linear-gradient(90deg, #FF7A00, #FF2E93); }
.gradient-meadow { background: linear-gradient(90deg, #00A86B, #C6F432); }
/* Two opposite colors, no middle stop: choose the blend space instead. */
.gradient-opposites { background: linear-gradient(in oklch, #0066FF, #FF8800); }
Bir tarayıcı in oklch ifadesini anlamazsa tüm bildirimi yok sayar. Yedek olarak önce sade bir linear-gradient(...) satırı yazın, ardından OKLCH satırını ekleyin.
SSS
Gradyanım neden ortada griye dönüyor?
Hex renkler RGB'de karışır ve renk çarkında birbirinden uzak iki rengin ortalaması griye çıkar. Mavi #0000FF ile sarı #FFFF00 #808080'de buluşur.
CSS gradyanının bulanık görünmesini nasıl engellerim?
Gerçek renkli bir orta renk durağı ekleyin, linear-gradient(in oklch, ...) ile OKLCH'de karıştırın ya da çarkta yan yana duran iki renk seçin.
CSS gradyanında "in oklch" ne yapar?
Tarayıcıya renkleri RGB yerine OKLCH renk uzayında karıştırmasını söyler, böylece orta kısım griye düşmek yerine rengini korur.
Hangi gradyan renkleri birlikte iyi görünür?
Renk çarkında komşu olanlar, örneğin menekşe #6440E0'dan pembe #E040A0'a ya da yeşil #00A86B'den misket limonu #C6F432'ye. Karışımları baştan sona parlak kalır.
Tüm tarayıcılar OKLCH'de gradyanı destekliyor mu?
Modern tarayıcılar destekliyor, ama desteklemeyen bir tarayıcı bildirimi atar. Yedek olarak öncesine sade bir gradyan satırı ekleyin.
Maviden sarıya neden yeşil değil de gri oluyor?
Çünkü karışım RGB'deki düz yolu izler ve ikisinin ortalaması griye çıkar. Yeşil bir orta ancak onu durak olarak eklerseniz ya da OKLCH'de karıştırırsanız ortaya çıkar.
Kaynaklar
- CSS Color Module Level 4, interpolation: hex gibi eski sRGB renkler varsayılan olarak sRGB'de interpolasyon yapar, diğer uzaylar renk interpolasyon yöntemiyle seçilir.
- MDN, linear-gradient():
<color-interpolation-method>sözdizimi,in oklch. - MDN, OKLCH color: açıklık, kroma ve ton.
- (0, 0, 255) ile (255, 255, 0) değerlerinin orta noktası (127,5, 127,5, 127,5) olup bu, OKLCH kroması 0 olan #808080'dir. #0066FF'den #FF8800'e (#807780) ve #6440E0'dan #E040A0'a (#A240C0) orta noktalar tarafımızca sRGB'de hesaplandı. Bu sayfadaki çubuklar bu hesaplardan üretildi ve OKLCH çubuğu, tarayıcıların yaptığı gibi ekran aralığı dışındaki renkleri kırpıyor.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want gradients, color and every other detail designed as one system? Our team designs and builds product UI that holds up on every screen.
Get Started
