โดยสรุป
- เฉดสีคือตำแหน่งของสีบนวงล้อ เป็นมุมตั้งแต่ 0° ถึง 360° คือแดงที่ 0° เขียวราว 120° น้ำเงินราว 240° แล้วกลับมาที่แดง
- ความอิ่มตัวของสีคือปริมาณของเฉดสีนั้นที่มีอยู่ ตั้งแต่ 0 เปอร์เซ็นต์ (เทา) ถึง 100 เปอร์เซ็นต์ (สีบริสุทธิ์) ความสว่างคือความอ่อน ตั้งแต่ 0 เปอร์เซ็นต์ (ดำ) ถึง 100 เปอร์เซ็นต์
- เพราะเฉดสีเป็นวงกลม สองเฉดสีห่างกันได้มากที่สุด 180° คืออยู่คนละฝั่งของวงล้อ ความคลาดเคลื่อนที่ใหญ่กว่านั้นจริง ๆ เล็กกว่าถ้านับอีกทาง
- HSB ใช้เลือกและบรรยายสีด้วยสายตา RGB คือวิธีที่หน้าจอสร้างสี Lab ใช้วัดว่าสองสีดูต่างกันแค่ไหน สามอย่างนี้ตอบคำถามที่ต่างกัน
- การสร้างสีขึ้นใหม่ด้วยแถบเลื่อนสามแถบแยกกันเผยว่าการตัดสินไหนในสามอย่างหลุด การเลือกจากตัวอย่างสีทำไม่ได้
สามตัวเลข สามคำถาม
ลองนึกถึงสีหนึ่ง สมมติเป็นสีเขียวน้ำเงินหม่น ๆ ถ้าถูกขอให้บรรยาย คุณจะไม่นึกถึงว่ามีแสงแดง เขียว และน้ำเงินอยู่เท่าไร ทั้งที่นั่นคือสิ่งที่หน้าจอกำลังทำ คุณจะบอกว่ามันเป็นสีน้ำเงินอมเขียว ไม่ได้เข้มมาก ค่อนข้างมืด นั่นคือ HSB คือเฉดสี ความอิ่มตัวของสี ความสว่าง ตามลำดับที่คนคิดจริง ๆ Alvy Ray Smith เสนอแบบจำลองนี้ในช่วงปลายทศวรรษ 1970 เพื่อให้คนเลือกสีได้ในแบบที่ตรงกับวิธีที่พวกเขามองเห็นพอดี มันเรียกว่า HSV ด้วย โดย V คือค่า (value) ทั้งสองคือแบบจำลองเดียวกัน
| มิติ | คำถามที่มันตอบ | ช่วง | ปลายทั้งสอง |
|---|---|---|---|
| เฉดสี | มันคือสีไหน | 0°–360° | แดงที่ 0° ผ่านเหลือง เขียว ฟ้าอมเขียว น้ำเงิน และม่วงแดง แล้วกลับมาที่แดง |
| ความอิ่มตัวของสี | มีสีนั้นอยู่ในนั้นมากแค่ไหน | 0–100% | 0% คือสีเทาที่ไม่มีเฉดสีเลย 100% คือเฉดสีรุ่นที่บริสุทธิ์ที่สุด |
| ความสว่าง | อ่อนแค่ไหน | 0–100% | 0% คือสีดำไม่ว่าอีกสองมิติจะเป็นเท่าไร 100% คืออ่อนที่สุดเท่าที่เฉดสีนั้นเป็นได้ |
เฉดสีเป็นมุม และนั่นสำคัญ
เฉดสีถูกวางบนวงกลมเพราะสเปกตรัม ซึ่งเรียงเป็นเส้นจากแดงถึงม่วง ต่อกันเป็นวงผ่านสีม่วงที่ไม่มีอยู่ในรุ้ง คือม่วงแดงอยู่ระหว่างม่วงกับแดงและปิดวงให้ครบ เฉดสีจึงวัดเป็นมุม แดงคือ 0° เหลืองราว 60° เขียวราว 120° ฟ้าอมเขียวราว 180° น้ำเงินราว 240° ม่วงแดงราว 300° และ 360° คือแดงอีกครั้ง
วงกลมมีผลที่เส้นตรงไม่มี คือมีระยะห่างที่มากที่สุดที่เป็นไปได้ และมันอยู่ที่ครึ่งทางรอบวง สองเฉดสีห่างกันเกิน 180° ไม่ได้ การเดา 350° สำหรับเป้าหมาย 10° ไม่ได้คลาด 340° แต่คลาด 20° ข้ามด้านบนของวงล้อ คะแนนเฉดสีที่ตรงไปตรงมาต้องวัดทางสั้น และความคลาดเคลื่อนของเฉดสีที่แย่ที่สุดที่เป็นไปได้คือสีตรงข้ามของสีนั้น คือเฉดสีที่อยู่ตรงข้ามกันพอดี นี่คือเหตุผลที่ Percore ทำให้ความคลาดเคลื่อนของเฉดสีเป็นมาตรฐานเทียบกับ 180° เพราะนั่นคือช่วงจากสมบูรณ์แบบถึงผิดที่สุดเท่าที่เป็นไปได้
ความอิ่มตัวของสีและความสว่าง
ความอิ่มตัวของสีคือปริมาณเฉดสีในสี เมื่อความอิ่มตัวของสีเป็นศูนย์ ทุกเฉดสีรวบเป็นสีเทาเดียวกัน นี่คือเหตุผลที่เฉดสีของสีที่อ่อนมากหรือหม่นมากเรียกชื่อยากจริง ๆ เพราะแทบไม่มีเฉดสีให้เห็น เมื่อความอิ่มตัวของสีเต็ม สีสดเท่าที่เฉดสีนั้นเอื้อ ความสว่างคือความอ่อนของสีตรง ๆ เมื่อความสว่างเป็นศูนย์ทุกอย่างเป็นสีดำ ไม่ว่าเฉดสีและความอิ่มตัวของสีจะบอกอย่างไร
สองอย่างนี้ส่งผลต่อกันในแบบที่ทำให้คนสะดุด สีแดงเข้มอิ่มตัวกับสีแดงอ่อนจางอาจรู้สึกเหมือนเป็นคนละสีโดยสิ้นเชิง ทั้งที่มีเฉดสีเดียวกัน ในทางปฏิบัติ คนที่จำสีมักได้เฉดสีคร่าว ๆ ถูกและกล่าวความอิ่มตัวของสีเกินจริง สีที่จำได้สดกว่าสีจริง ส่วนความคลาดเคลื่อนของความสว่างไปได้ทั้งสองทางขึ้นกับแสงรอบตัว นี่คือรูปแบบที่ควรมองหาในคะแนนรายมิติ
HSB เทียบกับแบบจำลองอื่น
HSB เป็นหนึ่งในหลายวิธีบรรยายสีเดียวกัน และแต่ละวิธีมีเหตุผลของมัน การเลือกวิธีผิดสำหรับงานเป็นต้นเหตุที่พบบ่อยของความสับสน จึงมีตารางว่าแต่ละแบบใช้ทำอะไร
| แบบจำลอง | คืออะไร | เหมาะกับ |
|---|---|---|
| HSB / HSV | เฉดสีเป็นมุม ความอิ่มตัวของสีและความสว่างเป็นเปอร์เซ็นต์ ความสว่าง 100% คือรุ่นที่บริสุทธิ์และสว่างที่สุดของเฉดสี | เลือกและบรรยายสีด้วยสายตา ตัวเลือกสี วินิจฉัยข้อผิดพลาดของความจำเรื่องสี |
| HSL | เฉดสีเดียวกัน ใช้ความสว่างเชิงอ่อน (lightness) แทน brightness โดย lightness 100% เป็นสีขาวเสมอ และ 50% คือเฉดสีบริสุทธิ์ | CSS และการออกแบบเว็บ ที่การทำให้สีอ่อนลงไปทางสีขาวเป็นการดำเนินการที่พบบ่อย |
| RGB | แสงแดง เขียว และน้ำเงินมีเท่าไร แต่ละตัว 0–255 สิ่งที่หน้าจอทำจริงในทางกายภาพ | โค้ด รูปแบบไฟล์ ทุกอย่างที่อุปกรณ์ต้องแสดง คิดด้วยสายตายาก |
| CIELAB (Lab) | ความสว่างบวกแกนตรงข้ามสองแกน (เขียว–แดง น้ำเงิน–เหลือง) สร้างให้ระยะห่างที่เท่ากันดูต่างกันเท่ากัน | วัดความต่างระหว่างสองสี (Delta E) งานพิมพ์และการจัดการสี |
วิธีจำที่ใช้ได้ RGB สำหรับเครื่อง HSB และ HSL สำหรับคน และ Lab สำหรับการวัด เครื่องมือรับรู้สีที่ให้คะแนนด้วย Delta E กำลังวัดใน Lab ส่วนที่ให้แถบเลื่อนสามแถบกำลังให้คุณตอบใน HSB ทั้งสองถูกต้อง และบอกสิ่งที่ต่างกัน
ทำไมแถบเลื่อนสามแถบบอกคุณได้มากกว่าตัวอย่างสี
ถ้าคุณถูกแสดงสีหนึ่ง มันหายไป และคุณเลือกตัวอย่างสีที่ใกล้ที่สุดจากหกตัว ผลคือข้อมูลหนึ่งบิต คือถูกหรือผิด พร้อมระยะห่าง แต่ถ้าคุณสร้างสีขึ้นใหม่จากตัวควบคุมสามตัวแยกกัน ผลคือตัวเลขสามตัว คือคลาดไปเท่าไรในเฉดสี ในความอิ่มตัวของสี ในความสว่าง และตัวเลขสามตัวนั้นคือการวินิจฉัย คนที่ความคลาดเคลื่อนของเฉดสีเล็กและความคลาดเคลื่อนของความอิ่มตัวของสีใหญ่ทุกวัน ได้เรียนรู้บางอย่างเกี่ยวกับวิธีที่ตัวเองมองเห็น และแก้ไขล่วงหน้าได้
นี่คือเหตุผลเบื้องหลังเซสชันสีของ Percore ซึ่งแสดงสีเต็มหน้าจอ ซ่อนมัน แล้วขอให้คุณสร้างมันกลับมาบนแถบเลื่อนเฉดสี ความอิ่มตัวของสี และความสว่าง ความคลาดเคลื่อนแต่ละอย่างถูกทำให้เป็นมาตรฐาน คือเฉดสีเทียบกับ 180° อีกสองเทียบกับช่วงเต็มของมัน แล้วทั้งสามถูกเฉลี่ยเป็นความแม่นยำตั้งแต่ 0 ถึง 100 พร้อมแสดงรายละเอียดข้างกัน สูตรเต็มอยู่ในPercore ให้คะแนนอย่างไร และวิธีพัฒนาการรับรู้สีของคุณเปลี่ยนรายละเอียดนั้นให้เป็นการฝึก
สร้างสีขึ้นใหม่จากแถบเลื่อนสามแถบ
ดาวน์โหลดบน App Storeคำถามที่พบบ่อย
HSB กับ HSV เป็นสิ่งเดียวกันไหม
ใช่ V ย่อมาจากค่า (value) B ย่อมาจากความสว่าง (brightness) และทั้งสองหมายถึงแบบจำลองเดียวกัน ซอฟต์แวร์ต่างกันใช้ชื่อต่างกัน เครื่องมือของ Apple และ Adobe เรียก HSB อีกหลายตัวเรียก HSV
HSB กับ HSL ต่างกันอย่างไร
ทั้งสองใช้เฉดสีร่วมกัน ใน HSB ความสว่าง 100 เปอร์เซ็นต์คือรุ่นที่บริสุทธิ์และสว่างที่สุดของเฉดสี ใน HSL ความอ่อน (lightness) 100 เปอร์เซ็นต์คือสีขาว และเฉดสีบริสุทธิ์อยู่ที่ 50 เปอร์เซ็นต์ HSL พบบ่อยใน CSS HSB พบในเครื่องมือออกแบบ
ทำไมสีแดงอยู่ที่ 0° บนวงล้อเฉดสี
ตามธรรมเนียม วงล้อต้องเริ่มที่ไหนสักแห่ง และแดงถูกเลือกเมื่อกำหนดแบบจำลองนี้ ลำดับแดง เหลือง เขียว ฟ้าอมเขียว น้ำเงิน ม่วงแดง ตามสเปกตรัมโดยม่วงแดงปิดวง
ความคลาดเคลื่อนของเฉดสีที่มากที่สุดที่เป็นไปได้คือเท่าไร
180° คือเฉดสีที่อยู่ตรงข้ามบนวงล้อพอดี สีตรงข้ามของสีนั้น ความคลาดเคลื่อนที่ดูเหมือนใหญ่กว่านั้นจริง ๆ เล็กกว่าถ้านับอีกทาง นี่คือเหตุผลที่ควรนับความคลาดเคลื่อนของเฉดสีทางสั้นเสมอ
คนพลาดบ่อยที่สุดในสามอย่างนี้คืออะไร
ในทางปฏิบัติ คือความอิ่มตัวของสี คนมักจำสีว่าสดกว่าที่เป็น เฉดสีมักใกล้เคียง และความสว่างขึ้นกับแสงรอบตัวมาก คะแนนรายมิติแสดงรูปแบบของคุณเอง