İnternet tutkunları için Uchū renk paleti

 (uchu.style)
2 puan yazan GN⁺ 2025-02-17 | 1 yorum | WhatsApp'ta paylaş
  • Uchū, NetOperator Wibby tarafından oluşturulmuş internet tutkunlarına yönelik bir renk paleti; renk adlarından çok oklch() sayısal değerleri listesi merkezde sunuluyor
  • Palet 8 renk grubuna ayrılıyor; her grup 9 aşamalı oklch(L C H) değerlerinden oluşuyor
  • İlk grup, doygunluğu 0.002~0.004 seviyesinde olan düşük doygunluklu bir seri; kalanları ise renk açısına göre kırmızı·pembe·mor·mavi·yeşil·sarı·turuncu serileri gibi görünüyor
  • Renk adları, uygulama örnekleri, kod örnekleri, indirme yöntemi ve lisans bilgisi sunulmuyor
  • Bir tasarım sisteminde veya temada kullanmak için sağlanan OKLCH sayısal değerlerini doğrudan kopyalayıp uygulamak gerekiyor

Uchū paletinin temel biçimi

  • Uchū, “the color palette for internet lovers” açıklamasıyla sunulan bir renk paleti
  • Oluşturan kişi NetOperator Wibby olarak belirtilmiş
  • Paletin odağında açıklama metninden çok oklch() değerleri listesi var; her değer, parlaklık·doygunluk·renk açısına karşılık gelen üç sayıyla rengi tanımlıyor

Paletin yapılandırılma biçimi

  • Tüm palet 8 renk grubundan oluşuyor
  • Her grupta 9 adet oklch() değeri bulunuyor
  • Aşama gösterimi her grupta ### 2 ile ### 9 arasında görünüyor; ilk değer ise ayrı bir sayı başlığı olmadan başta yer alıyor

Renk gruplarına göre OKLCH aralıkları

  • Düşük doygunluklu seri

    • Doygunluk değeri 0.002~0.004 seviyesinde
    • Başlangıç değeri: oklch(0.9557 0.003 286.35)
    • Son değer: oklch(0.5682 0.004 247.89)

  • Kırmızı·pembe serisi gibi görünen renk açıları

    • İkinci grubun renk açısı yaklaşık 3~19 aralığında
      • Başlangıç değeri: oklch(0.8898 0.052 3.28)
      • Son değer: oklch(0.4117 0.157 16.58)
    • Üçüncü grubun renk açısı yaklaşık 352~355 aralığında
      • Başlangıç değeri: oklch(0.958 0.023 354.27)
      • Son değer: oklch(0.5768 0.074 353.14)

  • Mor·mavi serisi gibi görünen renk açıları

    • Dördüncü grubun renk açısı yaklaşık 298~305 aralığında
      • Başlangıç değeri: oklch(0.891 0.046 305.24)
      • Son değer: oklch(0.3601 0.145 298.35)
    • Beşinci grubun renk açısı yaklaşık 258~260 aralığında
      • Başlangıç değeri: oklch(0.8966 0.046 260.67)
      • Son değer: oklch(0.3953 0.15 259.87)

  • Yeşil·sarı·turuncu serisi gibi görünen renk açıları

    • Altıncı grubun renk açısı yaklaşık 144~149 aralığında
      • Başlangıç değeri: oklch(0.9396 0.05 148.74)
      • Son değer: oklch(0.5277 0.138 145.41)
    • Yedinci grubun renk açısı yaklaşık 91~92 aralığında
      • Başlangıç değeri: oklch(0.9705 0.039 91.2)
      • Son değer: oklch(0.6229 0.097 91.9)
    • Sekizinci grubun renk açısı yaklaşık 51~57 aralığında
      • Başlangıç değeri: oklch(0.9383 0.037 56.93)
      • Son değer: oklch(0.5249 0.113 51.98)

Kullanırken kontrol edilmesi gerekenler

  • Her renk grubunun renk adı sunulmuyor
  • Tema uygulama örnekleri, kod örnekleri, indirme yöntemi ve lisans bilgisi dahil edilmemiş
  • Gerçek kullanıcıların listedeki oklch() değerlerini doğrudan kopyalayıp palet veya tema yapılandırmasında kullanması gerekiyor

İlgili okumalar

1 yorum

 
GN⁺ 2025-02-17
Hacker News görüşleri

  • Bugün oklch()’i öğrendim
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Neden uchu kelimesini kullandığını merak ediyorum
    Son zamanlarda renk paletleri, yapay zeka modelleri, startup’lar, araçlar, uygulamalar vb. neredeyse her şey rastgele seçilmiş tek bir Japonca kelimeyle adlandırılıyormuş gibi geliyor; nedenini bilmiyorum

    • Olumsuz konuşmak istemem ama artık biraz fazla kullanılıyormuş gibi hissettiriyor
      İlginçtir, Japonya’da da rastgele seçilmiş gibi duran İngilizce kelimelerle aynı şey oluyor; yani tamamen benzeri görülmemiş bir durum değil gibi
    • Galaxy veya Forester gibi ürün adları da seni rahatsız ediyor mu, merak ediyorum
      Tek kelimelik ürün adlarından şikâyet etmek epey tuhaf görünüyor. Sorun kelimenin hangi dilden geldiği mi, Navigator gibi uzun bir kelime yerine iki heceli bir kelime kullanılmasını kıskanmak mı, yoksa Chrome gibi tek heceli olmadığı için mi hoşuna gitmiyor, bilmiyorum
      Ubuntu Japonca olmadığı için sorun yok mu, yoksa Twitter veya Yahoo gibi adları da kaldırıp hepsini X gibi tek harfe mi indirmeliyiz, merak ediyorum
    • “uchū” Japoncada uzay/evren anlamına geliyor
      Bu temayı tüm projelerimde kullandığım için, bir bakıma evrensel olduğu anlamında
      Diğer örnekleri bilmiyorum ama kişisel olarak Japon tarzını ya da estetiğini seviyorum; uygun düşen bir kelimeyse kullanmaya çalışırım
    • Kısa ve telaffuz edilebilir kelimeler nadir
      4-6 harfli proje adı istiyorsanız Japonca kelimeler çoğu zaman şartlara iyi uyuyor; Japon kültürü de yurt dışında çok yaygın
    • Genç kuşak anime gibi Japon kültürüne, video oyunlarına ve retro olmayan kültürel göndermelere daha aşina büyüdükçe, kulağa hoş gelen kelimelerle adlandırma yapıyor gibi görünüyor

  • Bununla okunabilirlik analizi yapıp yapmadığını merak ediyorum
    Arka plan ile ön plan arasındaki kontrast çok düşük; uzun süreli okuma için rahat görünmüyor

    • Günümüzde okunabilirliğe fazla odaklanılıyor gibi geliyor
      İş yerinde yeni bir ekip kuruldu ve okuma güçlüğü olan kişiler için tüm kontrastları ölçtürüyorlar. Kontrastın %80’in üzerinde olması gerektiği, yazı boyutunun da çok büyük olması gerektiği söyleniyor; tema değiştirmeye izin verilmiyor ve “güvenlik nedeniyle” Dark Reader gibi eklentilerin kurulması da yasak
      Sorun şu ki sonuç diğer insanlar için çok çirkin oluyor ve göz yoruyor. Artık Dark Reader da kullanamadığımız için daha da kötü. Her şey kalın ve bağırıyormuş gibi; neyin önemli olduğunu ayırt etmek de zorlaşıyor. 4,7 milyon renk gösterebilen bir ekranı sadece 10 renk görmek için almadım. Çok yüksek kontrast bende baş ağrısı yapma eğiliminde, bu yüzden Solarized gibi yumuşak temaları daha çok seviyorum
      Görme sorunu olan çalışanların %0,5’i, kendi sorunlarına göre ayarlama yapan tarayıcı eklentileriyle de yeterince destek alabilir. Görme zorlukları da tek tip değil. Bazıları belirli renk kombinasyonlarını göremez; bunlardan kaçınmak veya düzeltmek gerekir. Bazıları bulanık görür; büyük yazıya ihtiyaç duyar ve bu yazı şu ankinden çok daha büyük olmak zorunda olabilir. Hiç göremeyen biri için bunların da faydası yok; Braille ekran ve iyi görsel alternatif metinleri gerekir. Ama şirkette bunlarla ilgilenmiyorlar, sadece göze çarpan şeylerle ilgileniyor gibiler
      Eskiden yumuşak bir e-posta imzası vardı; şimdi ise anaokulu renkleri ve dev yazılarla çok üstümüze geliyor. Zaten kimsenin okumadığı bilgiler bunlar. Bilerek daha az vurgulanmasının bir nedeni vardı: İhtiyaç olursa orada olduğunu bilirsiniz ama önemli bilgi olmadığını da anlarsınız. Gerçekten okumak isterseniz seçip bakabilir, düz metin moduna da geçebilirsiniz
      Erişilebilirlik desteğine kesinlikle karşı değilim ama daha kişiselleştirilmiş bir yaklaşım görmek isterim. Bir şeyi düzeltmeye çalışırken geri kalan herkes için bozma tarzını sevmiyorum. Telefonumu da dev yazı modunda kullanmıyorum ama ihtiyacı olanlar için o özelliğin bulunmasını iyi buluyorum
    • Kontrast derken renk örneği alanını mı kastediyorsun, merak ediyorum
      Öyleyse küçük renk değerleri bilgi aktarmaktan çok görsel amaçlı; depoda değerler okunması kolay bir biçimde yer alıyor. Örneğin açık turuncu yazıyı turuncu arka plan üzerinde bir paragraftan uzun süre okumak istemezsiniz

  • Renk düzeni ifadesi kafa karıştırıcı
    Benim için renk düzeni, Monokai gibi birbiriyle iyi uyum sağlayan az sayıda renk demek. Kod editörlerinde sözdizimi vurgulama gibi kullanım alanları da net ve kolay
    Bu ise tek renk ailelerinden çok sayıda rengin olduğu bir liste gibi görünüyor; nasıl kullanılması gerektiğini bilmiyorum. Küçümsemek için söylemiyorum, gerçekten kafam karıştı

    • Bu, Tailwind’in UI geliştirmede kullanılabilecek eksiksiz bir renk paleti sunma biçimine benziyor
      Aynı rengin birden fazla açıklık/koyuluk seviyesi olduğunda aynı ailedenmiş gibi hissettiren ve birbiriyle iyi uyum sağlayan UI öğeleri oluşturmak esnek oluyor. Örneğin mavi bir kartta mavi tonlarında bir kenarlık kullanmak istiyorsanız, arka planda daha açık bir mavi, kenarlıkta daha koyu bir mavi kullanabilirsiniz
      Siyah kenarlığa saydamlık vermek yerine, bu paletteki her açıklık/koyuluk seviyesi aynı renk ailesi içinde uyumlu olacak şekilde tek tek seçilmiş. Bir başka avantaj da her “açıklık/koyuluk seviyesi”nin renkler arasında tutarlı olduğunun garanti edilebilmesi. %50 gri, %50 kırmızıyla benzer bir konumdadır
      Daha genel olarak, buradaki her renk diğer tüm renklerle iyi uyum sağlayacak şekilde tasarlanmış. Herhangi bir renk olması yetmez; birbirleriyle uyumlu olmaları gerekir
    • Buna renk paleti demek daha doğru olur
    • Kişisel olarak ben de “renk paleti” denmesi gerektiğini düşünüyorum. Benzer örnekler şunlar
      OpenProps’un Open Color’ı https://yeun.github.io/open-color/
      Tailwind’in renk paleti https://tailwindcss.com/docs/colors
      Tasarım açısından renk paletlerini, iyi renk kontrastı puanlarını ve diğer erişilebilirlik ölçütlerini koruyarak seçmek çok zor olabilir. Standartlaştırılmış paletler bu işi sizin yerinize yaptığı için faydalıdır. OC veya Tailwind paletlerini sık kullanıyorum ama istediğim renk ailelerinin eksik olduğu sık oluyor; bu yüzden böyle 3 seçeneğin olması oldukça iyi
    • Açıkçası renk kutuları listesinin 476 puan almasını ben de aynı şekilde anlayamıyorum

  • Bu palet algısal olarak tekdüze görünmüyor
    Yani her ton ile beyaz/siyah arasındaki kontrast oranı tüm renklerde aynı değil. https://huetone.ardov.me/ üzerinde analiz edip etmediğini merak ediyorum

  • Bunun neden internet meraklıları için bir renk düzeni olduğunu merak ediyorum

    • İnterneti seviyorum, havalı renkleri de seviyorum. Umarım böyle olan sadece ben değilimdir ;)

  • Numaraları kendi aralarında karşılaştırınca mavi diğer renklere göre çok daha canlı ve opak görünüyor
    Tüm 5 seviyeyi yan yana karşılaştırınca mavi elektrik gibi öne çıkıyor, diğer renkler ise ton verilmiş gibi görünüyor
    Elbette monitör gaması ve renk profiline göre değişir, ama niyetin her numaranın saf renge göre benzer bir ton gibi görünmesini sağlamak olup olmadığını merak ediyorum. Şu anda, renk yoğunluğu ölçeklendirmesine göre algısal eşdeğerlik oluşturan bir Munsell Color System uygulamasından ziyade, gösterimi farklı bir RGB/CMYK’ye benzer bir sistem gibi görünüyor

    • Tam olarak öyle değil
      Bu renklere bir formülle ulaşmadım; sadece göz kararı baktım ve bana uygun gelene kadar ayarladım

  • Android’de Firefox’ta bakıyorum ve sadece beyaz arka plan üzerinde siyah yazı görüyorum
    Normalde daha fazlasını görmem gerekiyor gibi, doğru mu merak ediyorum

    • CSS nesting[1] kullanıyor. SCSS gibi düşünebilirsiniz. Tam destek için Firefox 117 ve Chrome 120 gerekiyor[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Linux masaüstündeki Firefox’ta da aynı, JavaScript’i açınca da değişmiyor
      Düzenleme: Görünüşe göre Oklab/oklch() [1] kullanıyor; Firefox 113’ten itibaren çalışması gerektiği yazıyor ama 115’te çalışmıyor gibi. Ya da başka bir şey bozuyor olabilir
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Aşağı kaydırdığınızda açıklık/koyuluk seviyelerine göre gruplanmış birden çok renk örneği seti görmüyorsanız, doğru görmüyorsunuz demektir
      Benim Firefox’umda düzgün çalışıyor ama Android kullanmıyorum
    • Linux’taki Firefox 50’de de aynı
      Geriye dönük uyumluluğu yok sayan insanlara ne demek gerekir bilmiyorum. Benim sitem gerekirse IE6’da bile çalışır
    • Chromium PC’de de aynı

  • Tailwind kullanmıyorum ama bu tür amaçlar için Tailwind paletini kullanıyordum
    https://tailwindcss.com/docs/colors

    • Dikkatli olmak lazım. Tailwind, 3 ile 4 sürümleri arasında renkleri yine değiştirdi; bu şimdiden üçüncü kez oluyor
      Açık konuşayım, bir CSS kütüphanesini son sürüme yükselttiğinizde tüm sitenin renk temasının fark edilmeden değişmemesi gerekir, ama gerçekte böyle oluyor
      Bu yüzden Radix Colors tarafına geçmeye başladım

  • Renkler arasında doygunluğun tutarlı olması gerektiğine dair güçlü bir gereklilik yoktur herhalde, ama benim zevkime göre biraz düzensiz görünüyor
    Koyu sarı ve turuncu biraz fazla soluk hissettiriyor
    Genel palet iyi. Özellikle “kırmızı” kırmızıdan kaçınılması hoşuma gitti. Bence birçok tasarımcının sevmediği bir renk. Göz rengiyle renk tercihi arasındaki ilişkiyi ele alan bir araştırma varsa görmek isterim
    Benzer yönde, ama daha fazla renk ailesi var: https://www.s-ings.com/scratchpad/oklch-smooth/

    • Sarı ve turuncu kesinlikle zor
      Bağlantı için teşekkürler; o renk aileleri gerçekten çok iyi görünüyor