QUBU / GAME DEVELOPMENT
Oyununuzun renklerini bulun.
Beş renk. Gerçek bir arayüz önizlemesi. Kullanıma hazır çıktılar.
Görseller cihazınızda işlenir. Hesap gerekmez.
Statik PNG, JPEG, WebP · 10 MiB · 16 MP · en fazla 8192 piksel kenar.
Oyun arayüzü önizlemesi
Yeni bir rota
Keşif ekibini hazırlayın. Bir sonraki durak sizi bekliyor.
Düğme metni otomatik siyah/beyaz seçilir. Bu alan görsel örnektir.
Metin kontrastı
Görev tamamlandı. Yeni bölge açıldı.
WCAG AA: normal metin 4,5:1; büyük metin 3:1. Büyük: en az 24 px veya yaklaşık 18,67 px kalın. Sonuç, yuvarlanmamış oranla belirlenir. Yalnızca seçili iki opak renk değerlendirilir.
Bu tarayıcıdaki paletler
Yalnızca Kaydet ile saklanır. En fazla 10 palet. Tarayıcı verileri silinirse kayıtlar kaybolur; JSON yedeği indirin.
Bir başlangıç rengi seçin veya görsel yükleyin.
Oyun arayüzü için renk paleti nasıl hazırlanır?
Bir oyun paleti yalnızca güzel renklerden oluşmaz: oyuncunun metni okuması, eylem düğmesini bulması ve paneli arka plandan ayırması gerekir. Bu araç beş düzenlenebilir rengi arka plan, panel, metin ve iki vurgu rolüne yerleştirir. Her rengin HEX, RGB ve HSL karşılığını görebilir, seçtiğiniz iki rengin metin kontrastını ölçebilirsiniz.
Başlangıç renginden çalışan bir arayüze
- Oyununuzu temsil eden başlangıç rengini seçin.
- Tamamlayıcı ya da analog ilişkiyle palet oluşturun. HSL renk çemberinde ikinci vurgu sırasıyla 180 veya 30 derece ötelenir. Koyu yüzeyler ve açık metin başlangıç değerleridir.
- Renk kartlarını düzenleyin. Altı basamaklı HEX veya renk seçiciyi kullanın.
- Önizlemede metin/panel kontrastını inceleyin. Vurgu metni gibi diğer çiftleri kontrast bölümünden ayrı kontrol edin.
- CSS değişkenlerini, JSON verisini veya 1000 × 320 PNG renk şeridini indirin.
Örnek: keşif oyununun görev paneli
Başlangıçtaki yeşil vurgu, devam düğmesinde kullanılır. Panel koyu, ana metin açık tutulur. İkinci vurgu bölüm etiketini ayırır. Etiketin rengini değiştirirseniz ikinci vurgu/panel çiftini de ölçün. Yalnızca ana metnin geçmesi bütün ekranın erişilebilir olduğu anlamına gelmez. Hata ve başarı durumlarını renk yanında metin veya simgeyle de anlatın.
Görselden renk çıkarma nasıl çalışır?
Statik PNG, JPEG ve WebP dosyaları tarayıcıda açılır. Dosya sınırı 10 MiB, çözünürlük sınırı 16 milyon piksel ve kenar sınırı 8192 pikseldir. Görsel en fazla 128 × 128 örneğe küçültülür. RGB kanalları 32 seviyelik aralıklarda gruplanır; en sık görülen beş grubun ortalama renkleri alınır. Alfa değeri 128’in altındaki örnekler sayılmaz. Beşten az renk bulunursa mevcut renkler tekrarlanır. Sonuçlar sıklık sırasındadır; arayüz rollerine otomatik uygunluk garantisi yoktur.
Bu yöntem tam piksel renk seçici değildir. Küçültme, yarı saydamlık ve tarayıcının renk yönetimi sonucu etkiler. Animasyonlar ve SVG kabul edilmez. Tamamen saydam görsellerden palet çıkarılmaz.
Kontrast sonucu nasıl yorumlanır?
Opak sRGB renkleri için WCAG bağıl parlaklık oranı hesaplanır. Normal metinde AA eşiği 4,5:1; en az 24 px veya yaklaşık 18,67 px kalın metinde 3:1’dir. Eşik karşılaştırması yuvarlamadan yapılır. Görsel arka planlar, gradyanlar, renk görme farklılıkları ve bütün arayüzün erişilebilirliği bu ölçümün kapsamı dışındadır. Ayrıntılar için W3C metin kontrastı açıklamasına bakın.
Çıktılar ve kayıtlar
CSS çıktısı beş adlandırılmış değişken içerir. JSON; renk rolleriyle birlikte HEX, RGB ve HSL verilerini taşır. PNG tasarım notları için renk şerididir; oyun arayüzünün ekran görüntüsü değildir. Kaydet, en fazla 10 paleti yalnızca kullandığınız tarayıcıya yazar. JSON indirimi taşınabilir yedektir; bu sürüm JSON içe aktarma sunmaz.
Sık sorulan sorular
Görseller sunucuda saklanır mı? Hayır. Dosya işleme cihazınızda gerçekleşir; görsel tarayıcı kayıtlarına da yazılmaz.
Uyumlu renkler otomatik okunabilir midir? Hayır. Renk ilişkisi ve metin kontrastı farklı konulardır; kullanılan her metin/zemin çiftini ölçün.
Renkleri oyun motorunda kullanabilir miyim? HEX veya RGB değerlerini aktarabilirsiniz. Motorun sRGB/linear renk ayarlarını kontrol edin; bu araç shader veya motor malzemesi üretmez.
İlgili araçlar
Animasyon kareleri için Sprite Sheet Oluşturucu, palet JSON’unu incelemek için JSON Düzenleyici, diğer iş akışları için QUBU Araçlar.