Sebagian besar aplikasi Blockly menggunakan berbagai warna blok untuk mengelompokkan blok secara visual ke dalam kategori. Blok yang dikirimkan dengan Blockly mencakup beberapa kategori, dengan warna yang dicerminkan oleh berbagai kategori toolbar dalam demo:
Warna tambahan pada blok berasal dari warna utama. Misalnya, blok bayangan adalah versi terdesaturasi dari warna utama, dan warna batas adalah versi yang lebih gelap.
Menetapkan warna blok
Warna blok dapat ditentukan dalam notasi JSON atau JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Perhatikan ejaan bahasa Inggris. Jika warna tidak disetel, warna akan menjadi blok hitam.
Format warna
Nilai colour
dapat diberikan dalam format HSV atau Hex.
Nilai-Saturasi-Rona
Cara termudah untuk menentukan warna blok adalah angka antara 0-360, yang menentukan hue blok dalam model warna nilai saturasi hue (HSV).
Menggunakan HSV dengan saturasi dan nilai yang ditetapkan untuk semua warna blok memungkinkan Anda memilih warna blok sekaligus memastikan semua blok berbagi palet yang kohesif.
Saturasi dan nilai dapat disesuaikan untuk setiap aplikasi dengan memanggil fungsi berikut:
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
Beberapa pemilih warna menawarkan ruang warna HSV, seperti alat pilih
HSV. Masukkan saturasi
dan konstanta nilai Blockly (default masing-masing adalah 45% dan 65%), lalu
geser hue ke warna yang dipilih. Gunakan nomor hue ini sebagai nilai colour
.
Heksadesimal
Menggunakan ruang warna HSV sangat direkomendasikan, tetapi Blockly mendukung warna
blok yang ditentukan sebagai heksadesimal #RRGGBB
. Meskipun hal ini dapat memfasilitasi
koordinasi dengan warna aplikasi lainnya (mis., gaya dalam CSS) dan aplikasi
desain (mis., Photoshop), merupakan risiko desain yang dapat menyebabkan
blok yang tidak terkoordinasi jika tidak dipilih dengan hati-hati.
Kecuali Anda memiliki resource desain visual khusus, sebaiknya bekerja dalam batasan ruang warna HSV. Jika mencoba menentukan ulang semua warna dengan cara ini, pertimbangkan referensi Desain Material Google tentang warna.
Referensi warna
Sering kali, beberapa blok memiliki warna yang sama, dan memusatkan definisi warna akan menyederhanakan pengelolaan warna dan penambahan blok baru dari warna yang benar. Warna blok dapat menggunakan referensi tabel string untuk melakukannya.
Blockly menyertakan sembilan konstanta warna dalam tabel string, yang sesuai dengan kategori toolbox, ditambah warna yang berbeda untuk variabel dinamis:
'%{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}'
Nilai string ini dapat digunakan dalam definisi JSON dan
block.setColour(..)
.
Anda dapat menambahkan konstanta warna Anda sendiri dengan menambahkan ke Blockly.Msg
:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Menyimpan warna dalam tabel string pelokalan mungkin tampak tidak biasa, tetapi mudah mengingat notasi JSON sudah memiliki dukungan untuk referensi. Hal ini juga memungkinkan warna dilokalkan, jika diperlukan.
Masalah aksesibilitas
Blockly menggunakan warna sebagai petunjuk kuat tentang peran setiap blok, dan untuk mengelompokkan blok bersama-sama. Untuk blok yang disertakan, kemampuan ini bersifat sekunder untuk teks pada blok, sehingga bukan atribut penting. Namun, ketika memilih palet warna blok, buta warna harus menjadi pertimbangan.
Blockly menyediakan beberapa tema sebagai upaya untuk mengakomodasi beberapa jenis gangguan penglihatan warna. Halaman ini berisi contoh 7, 12, dan 15 palet warna yang berupaya memaksimalkan perbedaan di berbagai bentuk kebutaan warna yang paling umum. Perhatikan bahwa ini tidak akan dipetakan ke 7, 12, atau 15 blok kategori di Blockly, karena beberapa bayangan harus dicadangkan untuk blok dan kolom bayangan.