Hầu hết các ứng dụng của Blockly dùng nhiều màu khối để nhóm các khối lại với nhau một cách trực quan theo các danh mục. 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 các danh mục thanh công cụ khác nhau trong bản minh hoạ:
Các màu bổ sung trên khối được lấy 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 theo ký hiệu JSON hoặc JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Hãy lưu ý cách viết tiếng Anh. Nếu bạn không đặt màu, thì một khối màu đen sẽ xuất hiện.
Định dạng màu
Giá trị colour có thể được cung cấp ở định dạng HSV hoặc hex.
Hue-Saturation-Value
Cách đơn giản nhất để xác định màu của một khối là một số từ 0 đến 360, xác định màu sắc của khối 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ão hoà và các giá trị có thể được điều chỉnh cho phù hợp với từng ứng dụng bằng cách gọi phương thức 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 hệ màu HSV, chẳng hạn như HSV
bộ chọn. Nhập độ bão hoà và hằng số giá trị của Blockly (mặc định lần lượt là 45% và 65%), sau đó trượt sắc độ sang màu đã chọn. Hãy sử 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 không gian màu HSV, nhưng Blockly hỗ trợ màu khối được chỉ định dưới dạng 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 hệ 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.
Màu sắc tham khảo
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 của khối có thể sử dụng bảng chuỗi tham khảo để làm chính xác điều đó.
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 điều này thuận tiện vì ký hiệu JSON đã hỗ trợ tham chiếu. Nó cũng cho phép màu sắc đã bản địa hoá, nếu cần.
Vấn đề về hỗ trợ tiếp cận
Blockly sử dụng màu sắc như một gợi ý rõ ràng về vai trò của mỗi khối và để nhóm khối. Đối với các khối được đưa vào, thuộc tính này là phụ thuộc vào văn bản trên khối và do đó 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 cần cân nhắc đến chứng mù màu.
Blockly cung cấp một số giao diện để hỗ trợ một số loại hội chứng mù màu. Chiến dịch này trang bao gồm ví dụ 7, 12 và 15 màu các bảng màu cố gắng tối đa hoá sự khác biệt trên các dạng phổ biến nhất mù màu. Xin lưu ý rằng việc này sẽ không liên kết với 7, 12 hoặc 15 danh mục khối trong Blockly, vì một số sắc thái phải được dành riêng cho các khối và trường bóng.