รูปแบบสี

ค่าสีสามารถระบุในรูปแบบ HSV หรือ RGB หรือใช้ชื่อสีก็ได้

โทนสี-ความอิ่มตัว-ค่า

วิธีกำหนดสีที่ง่ายที่สุดคือตัวเลขระหว่าง 0-360 ซึ่งกำหนดโทนสีในรูปแบบสี hue-saturation-value (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 แม้ว่าวิธีนี้จะช่วยให้คุณใช้สีที่ประสานกับสีของแอปพลิเคชันอื่นๆ (เช่น สไตล์ใน CSS) และแอปพลิเคชันการออกแบบ (เช่น Photoshop) อาจเป็นความเสี่ยงด้านการออกแบบที่อาจทําให้บล็อกไม่สอดคล้องกันหากไม่ได้เลือกอย่างระมัดระวัง

เราขอแนะนำให้ใช้พื้นที่สี HSV เว้นแต่คุณจะมีทรัพยากรการออกแบบภาพโดยเฉพาะ หากต้องการกำหนดสีทั้งหมดใหม่ด้วยวิธีนี้ ให้ดูแหล่งข้อมูลเกี่ยวกับสีใน Material Design ของ Google

ชื่อสี

นอกจากนี้ คุณยังระบุสีโดยใช้ชื่อสีที่ 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 รองรับการอ้างอิงอยู่แล้ว และยังช่วยให้แปลสีได้หากจำเป็น