색상 값은 HSV 또는 RGB 형식으로 지정하거나 색상 이름을 사용하여 지정할 수 있습니다.
색조-채도-값
색상을 정의하는 가장 간단한 방법은 0~360 사이의 숫자로 색조-채도-값 (HSV) 색상 모델에서 색조를 정의하는 것입니다.
모든 블록 색상의 채도와 값이 고정된 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 값으로 사용합니다.
RGB
HSV 색상 공간을 사용하는 것이 좋지만 Blockly는 #RRGGBB 16진수 문자열로 지정된 색상을 지원합니다. 이렇게 하면 다른 애플리케이션 색상 (예: CSS의 스타일) 및 디자인 애플리케이션 (예: Photoshop)을 사용하면 신중하게 선택하지 않으면 조정이 맞지 않는 블록이 생길 수 있는 디자인 위험이 있습니다.
전용 시각적 디자인 리소스가 없는 경우 HSV 색상 공간의 제약 조건 내에서 작업하는 것이 좋습니다. 이 방식으로 모든 색상을 재정의하려는 경우 색상에 관한 Google의 Material Design 리소스를 참고하세요.
색상 이름
W3C에서 정의한 색상 이름을 사용하여 색상을 지정할 수도 있습니다.
색상 참조
여러 블록이 동일한 색상을 공유하는 경우가 많으며 색상 정의를 중앙 집중화하면 색상을 관리하고 올바른 색상의 새 블록을 추가하는 것이 간편해집니다. 블록 색상과 도구 상자 카테고리는 현지화 토큰을 사용하여 이를 실행할 수 있습니다.
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 표기법에서 이미 참조를 지원하므로 편리합니다. 또한 필요한 경우 색상을 현지화할 수 있습니다.