대부분의 Blockly 앱은 다양한 블록 색상을 사용하여 블록을 카테고리로 시각적으로 그룹화합니다. Blockly와 함께 제공된 블록에는 여러 카테고리가 포함되어 있으며, 색상은 데모의 다양한 툴바 카테고리에서 미러링됩니다.
블록의 추가 색상은 기본 색상에서 파생됩니다. 예를 들어 그림자 블록은 기본 색상의 채도가 낮은 버전이고 테두리 색상은 어두운 버전입니다.
블록 색상 설정
블록 색상은 JSON 또는 JavaScript 표기법으로 정의할 수 있습니다.
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
영국식 철자를 확인합니다. 색상을 설정하지 않으면 검은색 블록이 표시됩니다.
색상 형식
colour 값은 HSV 또는 16진수 형식으로 제공될 수 있습니다.
색조-채도-값
블록의 색상을 정의하는 가장 간단한 방법은 색조-채도-값 (HSV) 색상 모델에서 블록의 색조를 정의하는 0~360 사이의 숫자입니다.
모든 블록 색상의 채도와 값이 고정된 HSV를 사용하면 모든 블록이 일관된 팔레트를 공유하면서 블록 색상을 선택할 수 있습니다.
다음 함수를 호출하여 채도와 값을 각 애플리케이션에 맞게 조정할 수 있습니다.
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 선택 도구와 같은 여러 색상 선택 도구에서 HSV 색상 공간을 제공합니다. Blockly의 채도와 값 상수 (기본값은 각각 45% 와 65%)를 입력한 다음 색조를 선택한 색상으로 슬라이드합니다. 이 색조 번호를 colour 값으로 사용합니다.
16진수
HSV 색 공간을 사용하는 것이 좋지만, Blockly는 #RRGGBB 16진수로 지정된 블록 색상을 지원합니다. 이렇게 하면 다른 애플리케이션 색상 (예: CSS의 스타일) 및 디자인 애플리케이션 (예: Photoshop) 설계 위험은 신중하게 선택하지 않으면 조정되지 않은 블록이 발생할 수 있습니다.
전용 시각적 디자인 리소스가 없는 한 HSV 색 공간의 제약 조건 내에서 작업하는 것이 좋습니다. 이 방식으로 모든 색상을 재정의하려면 색상에 관한 Google의 Material Design 리소스를 참고하세요.
색상 참조
종종 여러 블록이 동일한 색상을 공유하므로 색상 정의를 중앙 집중화하면 색상을 관리하고 올바른 색상의 새 블록을 추가하는 것이 간소화됩니다. 블록 색상은 문자열 표 참조를 사용하여 정확하게 이 작업을 수행할 수 있습니다.
Blockly는 문자열 표에 도구 상자 카테고리에 해당하는 9가지 색상 상수와 동적 변수를 위한 고유한 색상을 포함합니다.
'%{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}'
이러한 문자열 값은 JSON 정의와 block.setColour(..)에서 모두 사용할 수 있습니다.
Blockly.Msg에 추가하여 자체 색상 상수를 추가할 수 있습니다.
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
현지화 문자열 테이블에 색상을 저장하는 것이 드물게 보일 수 있지만 JSON 표기법에 이미 참조가 지원되므로 편리합니다. 필요한 경우 색상을 현지화할 수도 있습니다.
접근성 문제
Blockly는 각 블록의 역할에 관한 강력한 힌트로 색상을 사용하고 블록을 그룹화합니다. 포함된 블록의 경우 이 어포던스는 블록의 텍스트에 보조적이므로 중요한 속성이 아닙니다. 그러나 블록 색상 팔레트를 선택할 때는 색맹을 고려해야 합니다.
Blockly는 일부 유형의 색맹을 수용하기 위해 여러 테마를 제공합니다. 이 페이지에는 가장 일반적인 형태의 색맹을 극대화하기 위한 예시 7, 12, 15 색상 팔레트가 포함되어 있습니다. 이는 Blockly의 7, 12 또는 15 블록 카테고리에 매핑되지 않습니다. 일부 음영은 섀도우 블록 및 필드에 예약되어야 하기 때문입니다.