Bạn có thể cung cấp giá trị màu ở định dạng HSV hoặc RGB hoặc sử dụng tên màu.
Sắc độ-Độ bão hoà-Giá trị
Cách đơn giản nhất để xác định màu là một số từ 0 đến 360, xác định màu sắc trong mô hình màu hue-saturation-value (HSV).
Việc sử dụng HSV với độ bão hoà và giá trị cố định cho tất cả các màu khối cho phép bạn chọn một màu khối trong khi vẫn đảm bảo tất cả các khối đều có chung một bảng màu.
Bạn có thể điều chỉnh độ bão hoà và giá trị cho từng ứng dụng bằng cách gọi các hàm sau:
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
Một số công cụ chọn màu cung cấp không gian màu HSV, chẳng hạn như công cụ chọn màu HSV. Nhập độ bão hoà và hằng số giá trị của Blockly (mặc định là lần lượt 45% và 65%), sau đó trượt sắc độ sang màu đã chọn. Sử dụng số sắc độ này làm giá trị colour.
RGB
Bạn nên sử dụng không gian màu HSV, nhưng Blockly cũng hỗ trợ các màu được chỉ định dưới dạng chuỗi thập lục phân #RRGGBB. Mặc dù điều này có thể tạo điều kiện cho việc phối hợp với các màu ứng dụng khác (ví dụ: kiểu trong CSS) và các ứng dụng thiết kế (ví dụ: Photoshop), đây là một rủi ro về thiết kế có thể dẫn đến các khối không phối hợp nếu không được chọn cẩn thận.
Trừ phi bạn có tài nguyên thiết kế hình ảnh chuyên dụng, bạn nên làm việc trong phạm vi giới hạn của không gian màu HSV. Nếu bạn muốn xác định lại tất cả màu theo cách này, hãy cân nhắc các tài nguyên về màu sắc của Material Design của Google.
Tên màu
Bạn cũng có thể chỉ định màu bằng cách sử dụng tên màu do W3C xác định.
Tài liệu tham khảo về màu
Thông thường, nhiều khối có cùng một màu và việc tập trung các định nghĩa màu sẽ đơn giản hoá việc quản lý màu và thêm các khối mới có màu chính xác. Màu khối và danh mục hộp công cụ có thể sử dụng mã thông báo bản địa hoá để thực hiện chính xác việc đó.
Blockly bao gồm 9 hằng số màu trong bảng chuỗi, tương ứng với các danh mục hộp công cụ, cùng với một màu riêng biệt cho các biến động:
'%{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}'
Bạn có thể sử dụng các giá trị chuỗi này trong cả định nghĩa JSON và block.setColour(..).
Bạn có thể thêm hằng số màu của riêng mình bằng cách thêm vào Blockly.Msg:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Việc lưu trữ màu sắc trong bảng chuỗi bản địa hoá có vẻ không bình thường, nhưng lại rất thuận tiện vì ký hiệu JSON đã hỗ trợ các tệp tham chiếu. Lớp này cũng cho phép bản địa hoá màu sắc nếu cần.