เมื่อพูดถึงการสาดสีบนหน้าจอ มีสองสามวิธีในการเขียนโค้ด Hex, RGBA และ HSLA คือสามระบบรหัสสีที่ใช้กันมากที่สุด
คุณอาจเคยเจอรหัสฐานสิบหกและ RGB มาก่อน แต่ HSL แม้จะอ่านง่ายโดยมนุษย์มากกว่า แต่ก็อาจยังไม่อยู่ในเรดาร์ของคุณ ทุกวิธีในการเขียนสีนั้นสมเหตุสมผลในสถานการณ์ที่แตกต่างกัน และสิ่งที่คุณต้องมีก็คือความเข้าใจพื้นฐานของแต่ละประเภทเพื่อประกอบการตัดสินใจอย่างมีข้อมูล เราจะอธิบายความแตกต่างระหว่าง RGB, HEX และ HSL ที่นี่
RGB คืออะไร (แดง เขียว น้ำเงิน)
คุณควรเริ่มต้นด้วยค่า RGB เนื่องจาก สีแดง , สีเขียว และ สีน้ำเงิน เป็นสามสีที่หน้าจอสามารถใช้สร้างสีอื่นแทบทุกสี ทำได้โดยใช้ "การผสมสีเสริม" แต่คุณไม่จำเป็นต้องเจาะลึกวิทยาศาสตร์ของสิ่งนั้นเพื่อทำความเข้าใจ RGB
rgb(255, 0, 0) เป็นสีแดง เนื่องจาก R มีค่าสูงสุด หากคุณตั้งค่า G หรือ B เป็น 255 คุณจะได้สีเขียวหรือสีน้ำเงินเต็ม ตั้งค่าทั้งหมดเป็น 255 ในคราวเดียวและคุณจะได้สีขาว (ผลรวมของสีทั้งหมด) ในขณะที่ค่าศูนย์จะเป็นสีดำ หากคุณเพิ่มค่าที่สี่ (ช่องอัลฟา ระหว่าง 0 ถึง 1) คุณยังสามารถรับความโปร่งใส:rgba(0, 0, 0, .5) แปลเป็นสีดำกึ่งโปร่งแสง
เป็นเรื่องง่าย ใช่ แต่จริงๆ แล้วไม่ง่ายอย่างนั้น ความสมดุล RGB สามารถเปลี่ยนแปลงได้เล็กน้อยแม้ว่าคุณจะเพิ่งเปลี่ยนสีของสี ทำให้ยากสำหรับมนุษย์ในการปรับแต่งด้วยตนเองโดยไม่ต้องใช้เครื่องกำเนิด RGB (ซึ่งโชคดีที่มีมากมาย)
รหัสสีฐานสิบหกคืออะไร
เลขฐานสิบหกเป็นเพียงวิธีการเขียนค่า RGB ที่ต่างออกไป บางอย่างเช่น #6a79f7 (คอร์นฟลาวเวอร์สีน้ำเงิน) จับคู่โดยตรงกับ rgb(106, 121, 247) . 6a คือ สีแดง , 79 คือ สีเขียว และ f7 คือ สีน้ำเงิน .
อันดับแรก คุณควรรู้ว่าในระบบสีฐานสิบหก ตัวอักษร "a-f" แทนตัวเลขสิบถึงสิบห้า ประการที่สอง มันคือ เลขฐานสิบหก หมายความว่าทุกอย่างอยู่ในฐาน 16 21 คือ 2 * 10 + 1 ในฐาน 10 แต่ในเลขฐานสิบหก มันจะเป็น 2 * 16 + 1 . เพียงคูณตัวเลขแรกด้วย 16 แล้วบวกตัวเลขที่สอง ง่ายๆ แค่นี้เอง! 6a = 6 * 16 + 10 หรือ 106 79 = 7 * 16 + 9 หรือ 121
แม้ว่าคณิตศาสตร์จะเป็นเรื่องสนุก แต่เห็นได้ชัดว่ารหัสเลขฐานสิบหกนั้นสร้างความเจ็บปวดให้กับมนุษย์มากกว่า RGB แม้ว่าพวกเขาจะคัดลอกและวางได้ง่ายและมีการผสมผสานตัวอักษร/ตัวเลขที่น่าจดจำ
คุณยังสามารถเพิ่มความโปร่งใสให้กับรหัสฐานสิบหกได้โดยใส่ค่าที่เทียบเท่ากับเปอร์เซ็นต์ของ 255 ที่จุดเริ่มต้น เช่น #806a79f7 . 80 ในเลขฐานสิบหก =126 ซึ่งใกล้เคียงกับ 50% ของค่าสูงสุดของ 255
HSL คืออะไร (ฮิว ความอิ่มตัว ความสว่าง)
HSL ได้รับการออกแบบมาเพื่อให้มนุษย์อ่านง่าย และกำลังได้รับความนิยม โดยเฉพาะอย่างยิ่งในฐานะทางเลือก RGB มันทำงานดังนี้:
ฮิว หมายถึงสี และใช้องศาของวงล้อสีเพื่อบอกคุณว่าคุณกำลังใช้สีอะไร หากคุณรู้วงล้อสีและตำแหน่งของสีหลักเหล่านี้ คุณจะสามารถบอกได้ว่า 45 จะดูเป็นสีส้ม และ 270 จะดูเป็นสีม่วงเพียงแค่คิดดูสักครู่
- 0 =สีแดง
- 60 =สีเหลือง
- 120 =สีเขียว
- 180 =ฟ้า
- 240 =สีน้ำเงิน
- 300 =สีม่วงแดง
ความอิ่มตัว ก็คือสีสันของสีเป็นหลัก ความอิ่มตัว 0% หมายความว่าสีจะเป็นสีเทา ในขณะที่ 100% หมายความว่าจะแสดงเต็มที่ หากคุณต้องการปิดเสียงหรือทำให้สีดูโดดเด่นขึ้นอีกเล็กน้อย คุณสามารถเปลี่ยนค่านี้ได้
ความสว่าง บอกคุณว่าสีเข้มหรือสว่างแค่ไหน ความสว่าง 0% หมายความว่าสีของคุณจะเป็นสีดำ โดยไม่คำนึงถึงการตั้งค่า Hue หรือ Saturation และความสว่าง 100% จะทำให้คุณเป็นสีขาว อย่างที่คุณอาจเดาได้ 50% ให้สีที่แม่นยำที่สุดแก่คุณ
ด้วยข้อมูลดังกล่าว คุณจะสามารถบอกได้ทันทีว่า hsl(0, 100%, 50%) วิธี. มันก็แค่สีแดง! ต้องการสีแดงเข้มและสมบูรณ์ยิ่งขึ้นหรือไม่? ลอง 0, 70%, 40% . บางทีคุณอาจต้องการสิ่งนั้น แต่เป็นสีน้ำเงิน? แค่เปลี่ยน 0 เป็น 240 คุณก็ทำได้! มีความโปร่งใสเช่นกัน – ทำงานเหมือนกับ RGB:เพียงเพิ่มค่าที่สี่ (ระหว่าง 0 ถึง 1) เช่น:hsla(240, 70%, 40%, .5) .
HSV/HSB และ HSI
อะไร รุ่นสีเพิ่มเติม? เมื่อไหร่จะสิ้นสุด? สำหรับคนส่วนใหญ่ที่ใช้สีบนคอมพิวเตอร์ มันจบแล้ว Hex, RGB และ HSL เป็นวิธีที่พบได้บ่อยที่สุดในการระบุสี หากคุณอยู่ในพื้นที่ที่มีรูปภาพและสีจำนวนมาก เช่น การออกแบบกราฟิกหรือการเรียนรู้ของเครื่องเกี่ยวกับรูปภาพ คุณอาจพบผู้คนที่ใช้โมเดลสีลึกลับเหล่านี้ หรือแม้แต่โมเดลอื่นๆ ที่ไม่ได้ระบุไว้ที่นี่
HSB ย่อมาจาก "Hue Saturation Brightness" และ HSV ย่อมาจาก Hue Saturation Value จริงๆ แล้ว พวกมันเป็นเพียงชื่อที่แตกต่างกันสำหรับรุ่นเดียวกัน และความแตกต่างที่ใหญ่ที่สุดจาก HSL คือวิธีที่พวกมันกำหนดความอิ่มตัว HSI (Hue Saturation Intensity) มีความแตกต่างเล็กน้อยจาก HSB/HSV แต่ไม่มีการใช้กันอย่างแพร่หลาย ดังนั้นโอกาสที่คุณจะไม่เห็นมันมากนัก
ฉันควรใช้โมเดลสีใด
โดยทั่วไปแล้ว การเลือกแบบจำลองสีเป็นการตัดสินใจในการออกแบบที่ค่อนข้างเล็ก แต่สิ่งที่ดีเกิดขึ้นจากการตัดสินใจเล็กๆ น้อยๆ มากมาย โดยทั่วไปแล้ว รหัสฐานสิบหกทำให้การคัดลอกและวางเป็นเรื่องง่าย และเหมาะสำหรับสถานการณ์ที่มนุษย์ไม่ค่อยมีส่วนร่วมมากนัก RGB/RGBA นั้นเหมาะสมสำหรับการอ่าน และควรใช้เมื่อเหมาะสมที่สุดหากมนุษย์สามารถปรับเปลี่ยนความโปร่งใสได้ในบางครั้ง หากมนุษย์จำเป็นต้องเปลี่ยนสีด้วยตนเอง ให้ใช้ HSL/HSLA นอกจากนั้น มันค่อนข้างเป็นเรื่องของการตั้งค่า แม้ว่าคนในทีม HSL มักจะฉลาดกว่าและดูดีกว่านี้
