Hầu hết các ứng dụng Blockly đều sử dụng nhiều màu khối để nhóm các khối thành các danh mục một cách trực quan. Các khối được vận chuyển bằng Blockly bao gồm một số danh mục, với màu sắc được phản ánh qua nhiều danh mục trên thanh công cụ trong bản minh hoạ:
Màu bổ sung trên khối có nguồn gốc từ màu chính. Ví dụ: khối bóng là phiên bản khử bão hoà của màu chính và màu đường viền là phiên bản tối hơn.
Đặt màu khối
Bạn có thể xác định màu khối trong các ký hiệu JSON hoặc JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Hãy chú ý cách đánh vần tiếng Anh. Nếu không đặt được màu thì sẽ tạo ra một khối màu đen.
Định dạng màu
Bạn có thể cung cấp giá trị colour ở định dạng HSV hoặc Hex.
Giá trị độ bão hoà màu
Cách đơn giản nhất để xác định màu của một khối là một số trong khoảng từ 0 đến 360, xác định màu của khối trong mô hình màu hue-saturation-value (HSV).
Việc sử dụng HSV với độ rực màu và giá trị cố định cho tất cả màu khối cho phép bạn chọn màu khối trong khi vẫn đảm bảo tất cả các khối có chung một bảng màu nhất quán.
Bạn có thể điều chỉnh độ bão hoà và các 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ố bộ chọn màu cung cấp hệ màu HSV, chẳng hạn như công cụ chọn HSV. Nhập các hằng số độ rực màu và giá trị của Blockly (giá trị mặc định lần lượt là 45% và 65%), sau đó trượt sắc độ đến màu đã chọn. Hãy dùng số màu này làm giá trị colour.
Thập lục phân
Bạn nên sử dụng hệ màu HSV, nhưng Blockly vẫn hỗ trợ các màu khối được chỉ định là hệ thập lục phân #RRGGBB. Mặc dù cách này có thể hỗ trợ việc phối hợp với các màu khác của ứng dụng (ví dụ: kiểu trong CSS) và ứ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.
Nếu không có tài nguyên thiết kế hình ảnh chuyên biệt, bạn nên làm việc trong các giới hạn của không gian màu HSV. Nếu bạn cố gắng xác định lại tất cả màu theo cách này, hãy xem xét tài nguyên Material Design của Google về màu.
Tham khảo màu sắc
Thông thường, nhiều khối có cùng một màu và việc tập trung vào các định nghĩa màu giúp đơn giản hoá việc quản lý màu và thêm các khối mới đúng màu. Màu khối có thể sử dụng tham chiếu bảng chuỗi để 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 trong bảng chuỗi bản địa hoá có vẻ bất thường, nhưng rất thuận tiện vì ký hiệu JSON đã hỗ trợ các tệp tham chiếu. Tính năng này cũng cho phép bản địa hoá màu sắc nếu cần.
Vấn đề về khả năng hỗ trợ tiếp cận
Khối sử dụng màu sắc làm gợi ý rõ ràng về vai trò của mỗi khối và để nhóm các khối lại với nhau. Đối với các khối đi kèm, thuộc tính tương tác này chỉ đóng vai trò phụ so với văn bản trên khối nên không phải là thuộc tính quan trọng. Tuy nhiên, khi chọn bảng màu khối, bạn nên cân nhắc đến vấn đề mù màu.
Blockly cung cấp một số chủ đề nhằm hỗ trợ một số loại khiếm khuyết về khả năng nhìn thấy màu sắc. Trang này bao gồm ví dụ về 7, 12 và 15 bảng màu cố gắng tối đa hoá sự khác biệt trên các dạng mù màu phổ biến nhất. Lưu ý rằng thuộc tính này sẽ không ánh xạ đến 7, 12 hoặc 15 danh mục khối trong Blockly, vì một số sắc độ cần được dành riêng cho các khối bóng và trường.