Renk rehberleri
Ekran renkleri üzerine kısa ve pratik rehberler: formatlar, kontrast, paletler, karanlık mod ve CSS. Her sayı hesaplanmıştır, her örnek kopyalanabilir.
- OKLCH nedir: gözünüzün gördüğüyle sonunda örtüşen renk formatıOKLCH bir rengi ne kadar açık göründüğüyle, ne kadar canlı olduğuyla ve hangi tonda olduğuyla tanımlar. HSL’den farklı olarak aynı açıklık değeri her tonda gerçekten aynı açıklıkta görünür. Bu da paletleri, hover durumlarını ve erişilebilir kontrastı öngörülebilir kılar.28 Eylül 20263 dk okuma
- APCA ve WCAG 2: hangi kontrast ölçümüne güvenmeliYasaların istediği WCAG 2 kontrast oranlarıdır. APCA ise okunabilirliği, özellikle koyu temalarda ve doygun renklerde, çok daha iyi öngören yeni bir modeldir. İkisini birlikte kontrol ederseniz hem uyumlu hem de gerçekten kolay okunan metin elde edersiniz.28 Eylül 20263 dk okuma
- Renk gamı nedir: sRGB, Display P3 ve gam dışı renklerRenk gamı, bir ekranın ya da renk uzayının gösterebildiği renklerin kümesidir. Web sRGB üzerine kuruldu, ama artık çoğu telefon ve birçok dizüstü bilgisayar, belirgin biçimde daha canlı kırmızılar, yeşiller ve turuncular sunan Display P3’ü gösterebiliyor.28 Eylül 20262 dk okuma
- Renk formatları: HEX, RGB, HSL, OKLCH ve diğerleriAynı renk onlarca farklı şekilde yazılabilir. Burada her formatın ne anlama geldiğini, ne zaman kullanılacağını ve aynı rengin hepsinde nasıl göründüğünü bulacaksınız.28 Eylül 20262 dk okuma
- Hex renk kodları: #RRGGBB nasıl çalışır#1e90ff gibi bir hex renk kodu üç çift onaltılık basamaktan oluşur: kırmızı, yeşil ve mavi ışığın miktarı, her biri 00 (hiç) ile ff (tam, 255) arasında. Opaklığı ayarlamak için dördüncü bir çift ekleyin: 80 yaklaşık %50, ff ise tamamen opak demektir.28 Eylül 20265 dk okuma
- Web sitesi veya uygulama için renk paleti nasıl seçilirTek bir marka renginden başlayın, ondan 50 ile 950 arasında bir skala üretin, hafifçe renklendirilmiş griler ve dört anlamsal renk ekleyin, ardından her metin çiftini kontrast ve renk körlüğü açısından test edin. Kademeleri göz kararı değil, OKLCH açıklığına göre seçin: beyaz arka planda metin, ton ne olursa olsun, açıklık yaklaşık 0,55’e indiğinde WCAG AA’yı geçer.28 Eylül 20266 dk okuma
- Karanlık mod renkleri: arka plan, metin ve vurgu renkleri nasıl seçilirSaf siyah yerine #121212 gibi koyu gri bir arka plan, saf beyaz yerine #e5e5e5 gibi kırık beyaz metin ve marka renklerinizin daha açık, daha az doygun sürümlerini kullanın. Metni WCAG 2’nin yanı sıra APCA ile de kontrol edin, çünkü WCAG 2 koyu arka planlarda kontrastı olduğundan yüksek gösterir.28 Eylül 20265 dk okuma
- Renk uyumları: tamamlayıcı, analog, üçlü ve diğerleriRenk uyumu, renk çemberinde sabit açılarla tonlar seçer: tamamlayıcı için 180°, analog için 30°, üçlü için 120° aralık. Tonu HSL yerine OKLCH’de döndürürseniz renkler eşit açıklıkta kalır ve hiçbir ton kazara öne fırlamaz.28 Eylül 20264 dk okuma
- CSS color-mix() ve göreli renkler: açık varyantlar, hover ve saydamlıkcolor-mix() iki rengi seçtiğiniz bir renk uzayında karıştırır; göreli renk sözdizimi ise mevcut bir rengin tek bir kanalını değiştirmenizi sağlar, örneğin oklch(from var(--brand) calc(l - 0.1) c h). İkisi de tarayıcıda çalışır, CSS değişkenleriyle uyumludur ve Sass renk fonksiyonlarının çoğunun yerini alır. Açık varyantlar ve hover için oklab uzayında, saydamlık için srgb uzayında karıştırın.28 Eylül 20266 dk okuma
- Renk körlüğüne uygun paletler: renklerinizi kontrol edin ve düzeltinRenk körlüğüne uygun bir palet, her renk çiftini protanopi, döteranopi, tritanopi ve gri tonlamada ayırt edilebilir tutar. En güvenilir çözüm özel bir ton değil, açıklık farkıdır: OKLCH açıklığında yaklaşık 0,2 fark olan renkler, yaptığımız her simülasyonda ayrı kaldı. Buna ikon ya da etiket ekleyin, çünkü tek başına renk her zaman birilerini dışarıda bırakır.28 Eylül 20265 dk okuma
- Tailwind CSS renkleri: v4 OKLCH paleti, özel renkler ve kademelerTailwind CSS v4, her biri 50’den 950’ye 11 kademeli 26 renk skalasıyla gelir; toplam 286 renk OKLCH ile, --color-blue-500 gibi CSS değişkenleri olarak tanımlanmıştır. Kendi renklerinizi @theme { --color-brand-500: oklch(...) } ile eklersiniz. Aynı kademe numarası aynı açıklık anlamına gelmez: blue-600 beyaz üzerinde 4,5:1’i geçen en açık mavidir, yellow ise 700’e ihtiyaç duyar.28 Eylül 20266 dk okuma