Renk değerleri HSV veya RGB biçiminde ya da renk adı kullanılarak verilebilir.
Ton-Doygunluk-Değer
Bir rengi tanımlamanın en basit yolu, ton-doygunluk-değer (HSV) renk modelindeki tonu tanımlayan 0 ile 360 arasında bir sayıdır.
HSV'yi tüm blok renkleri için sabitlenmiş doygunluk ve değerle kullanmak, tüm blokların uyumlu bir palet paylaşmasını sağlarken bir blok rengi seçmenize olanak tanır.
Doygunluk ve değerler, aşağıdaki işlevler çağrılarak her uygulamaya uyarlanabilir:
Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
HSV seçici gibi çeşitli renk seçicilerde HSV renk alanı sunulur. Blockly'nin doygunluk ve değer sabitlerini girin (varsayılan değerler sırasıyla% 45 ve% 65'tir), ardından tonu seçtiğiniz renge kaydırın. colour değeri olarak bu ton numarasını kullanın.
RGB
HSV renk alanının kullanılması önemle tavsiye edilir ancak Blockly, #RRGGBB onaltılık dize olarak belirtilen renkleri destekler. Bu, diğer uygulama renkleriyle (ör. CSS'deki stiller) ve tasarım uygulamalarıyla (ör. Photoshop) kullanmanız, dikkatli seçilmediği takdirde uyumsuz bloklara yol açabilecek bir tasarım riskidir.
Özel görsel tasarım kaynaklarınız yoksa HSV renk alanının kısıtlamaları dahilinde çalışmanız önerilir. Tüm renkleri bu şekilde yeniden tanımlamaya çalışıyorsanız Google'ın renklerle ilgili Material Design kaynaklarını inceleyebilirsiniz.
Renk adları
W3C tarafından tanımlanan renk adlarını kullanarak da renkleri belirtebilirsiniz.
Renk referansları
Genellikle birden fazla blok aynı rengi paylaşır. Renk tanımlarını merkezileştirmek, renkleri yönetmeyi ve doğru renkte yeni bloklar eklemeyi kolaylaştırır. Blok renkleri ve araç kutusu kategorileri, tam olarak bunu yapmak için yerelleştirme jetonlarını kullanabilir.
Blockly, araç kutusu kategorilerine karşılık gelen dokuz renk sabitinin yanı sıra dinamik değişkenler için farklı bir renk içeren dize tablosu içerir:
'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'
Bu dize değerleri hem JSON tanımlarında hem de block.setColour(..) içinde kullanılabilir.
Blockly.Msg öğesine ekleyerek kendi renk sabitlerinizi ekleyebilirsiniz:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Renkleri yerelleştirme dizesi tablosunda depolamak alışılmadık görünebilir ancak JSON notasyonunda referanslar zaten desteklendiğinden bu yöntem kullanışlıdır. Ayrıca, gerektiğinde renkleri yerelleştirmenize de olanak tanır.