ทฤษฎีสี HSL ออกแบบเว็บไซต์ UI อย่างมือโปร

Natk

บทความนี้จะเล่าเรื่องการออกแบบด้วยระบบสี HSL เป็นทฤษฎีพื้นฐานสำหรับมือใหม่ที่ต้องการจะออกแบบ วางแผนสีให้ได้อย่างมือโปร ไปต่อยอดการออกแบบประเภทดิจิตัลได้ทุกประเภทเลยค่ะ ไม่ว่าจะเป็น User interface, Graphic design, Web design เป็นต้น

ก่อนอื่นเราจะมาเริ่มกันที่ทฤษฎีสีที่ทุกคนทราบชื่อกันอยู่ดีแล้ว นั่นก็คือระบบสีของ RGB

ทฤษฎีสีหลัก ๆ มีดังต่อไปนี้

RGB

หลาย ๆ คนคงจะคุ้นเคยกับ ทฤษฎีสี ระบบสี RGB มาก่อนถ้าเคยได้เรียนวิชา Computer graphic สีที่เรามองเห็นบนคอมพิวเตอร์นั้นจะประกอบไปด้วย R = RED, G = GREEN, B = BLUE

< จำง่าย ๆ R = RED, G = GREEN, B = BLUE >

เกิดจากการรวมกันของแสงสีแดง สีเขียว และสีน้ำเงิน เมื่อมีการใช้สัดส่วนของ 3 สีนี้ต่างกัน จะทำให้เกิดสีต่าง ๆ ได้อีกมากมายถึง 16.7 ล้านสี ซึ่งใกล้เคียงกับสีที่ตาเรามองเห็นปกติ โดยสีที่ได้จากการผสมสีขึ้นอยู่กับความเข้มของสี ถ้าหากสีมีความเข้มมากเมื่อนำมาผสมกันจะทำให้เกิดเป็นสีขาว จึงเรียกระบบสีนี้ว่า Additive หรือการผสมสีแบบบวกหลักการแสดงสีของจอคอมพิวเตอร์นั้นจะแสดงสี

ทฤษฎีสี RGBA บน Google Chrome
ระบบสี RGBA บน Google Chrome

ถ้าพูดทางเชิง CSS ตัวอย่างเช่น
ตัวอย่าง 1
div {
    background-color: rgb(255, 0, 0);
}
จะได้พื้นหลังสีแดง เพราะเลขค่าแรก คือ R = 255 คือสีแดงแบบเต็ม MAX สูงสุดที่เลข 255
ส่วน 0 คือไม่มีค่าสีเขียว หรือ ค่าสีน้ำเงินเลย

ตัวอย่าง 2
div {
    background-color: rgb(0, 0, 0);
}
RGB ตัวนี้ล่ะจะได้สีอะไร ? คำตอบคือ สีดำ เพราะว่าไม่มีทั้งค่าสีแดง, เขียว, น้ำเงิน

ทฤษฎีสี HEX ตัวเลขและตัวหนังสือ 6 หลัก บน Google Chrome
ระบบสี HEX ตัวเลขและตัวหนังสือ 6 หลัก บน Google Chrome

ตัวอย่าง 3 แบบ Hex code ที่เราเห็นกันแบบ #FFFFFF #000000

เลข CSS แบบ HEX Code ก็คือค่าที่รองรับใน Browsers โดยตัว Hexadecimal เนี่ยก็จะประกอบไปด้วย #RRGGBB
เช่น #0000FF จะแสดงผลเป็นสีน้ำเงิน
เพราะค่าสูงสุดของสีคือ FF, ต่ำสุดคือ 00 หลักการนี้มาจากการใช้ระบบเลขฐาน 16 ทางคอมพิวเตอร์นั่นเองค่ะ

< จำง่าย ๆ #FFFFFF คือสีขาว ส่วน #000000 คือสีดำ >


HSL ทฤษฎีสีใช้บนงานดิจิตัล

เป็นระบบสีแบบการมองเห็นของสายตามนุษย์ ซึ่งแบ่งออกเป็น 3 ลักษณะ คือ

HSL นั้นย่อมาจากคำว่า Hue, Saturation และ Lightness 

HUE

Hue คือสีต่าง ๆ ที่สะท้อนออกมาจากวัตถุแล้วเข้าสู่สายตา ทำให้เราสามารถมองเห็นวัตถุเป็นสีต่าง ๆ ได้ ซึ่งแต่ละสีจะแตกต่างกันตามความยาวของคลื่นแสงที่มากระทบวัตถุและสะท้อนกลับมาที่สายตา ค่า Hue ถูกวัดโดยตำแหน่งการแสดงสีบนมาตรฐานวงล้อของสี (Standard Color Wheel) ซึ่งถูกแทนค่าสีด้วยองศา 0 ถึง 360 องศา

ทฤษฎีสี hsl color wheel
สี hsl color wheel

ถ้าเราดูวงล้อสี ค่า Hue คือสีบน Color wheel ของเรานั่นเอง

  • สีแดง คือ 0°
  • สีเขียว คือ 120°
  • สีน้ำเงิน คือ 240°
  • สีแดง คือ 360°, ซึ่งมีค่าเท่ากับ 0°

< Hue คือ ค่าสีหลัก เช่น สีแดง สีม่วง สีเหลือง สีชมพู สีฟ้า >

color hsb
ระบบสี HSL บน Google Chrome

ตัวอย่างระบบปรับสีจาก Google Chrome หากเราเปลี่ยนค่า H เป็นเลขอื่น ตั้งแต่ 0 – 360 ก็จะได้สีที่แตกต่างกันออกไปทุกครั้งที่เราเปลี่ยนค่า เช่นเลข 12 คือค่าสีส้ม

*ใน Google chrome ใช้หน่วย HSL โดยตัว Lightness มีค่าเท่ากับความสว่างเหมือนกับ Brightness เลย (แต่ทางทฤษฎีจะแตกต่างกันนิดหน่อย)


Saturation

Saturation คือการกำหนดค่าความสดของสี โดยค่าความสดของสีจะเริ่มที่ 0 ถึง 100 หากกำหนด Saturation เป็น 0 สีจะมีความสดน้อย แต่ถ้ากำหนดที่ 100 สีจะมีความสดมาก ค่าสีจะถูกวัดโดยตำแหน่ง การแสดงสีบน Standard Color Wheel ค่าของ Saturation จะเพิ่มขึ้นจากจุดกึ่งกลางจนถึงเส้นขอบโดยค่าที่ เส้นขอบจะมีสีที่ชัดเจนและอิ่มตัวที่สุดที่ 100

< Saturation คือ ความสดของสี >

มีค่าที่ 0 – 100 ถ้า 0 คือสีซีด, 100 สีเข้มจี๊ด

ตัวอย่าง HSB Saturation
ตัวอย่าง HSL Saturation

Lightness

Lightness คือระดับความสว่างและความมืดของสี โดยค่าความสว่างของสีจะเริ่มที่ 0 ถึง 100 หาก กำหนดค่า 0 ความสว่างจะน้อยซึ่งจะเป็นสีดำ แต่ถ้ากำหนดค่า 100 สีจะมีความสว่างมากที่สุด

< Lightness คือ ความสว่างของสี >

HSB Brighness
HSL – Lightness

วิธีใช้งาน HSL ในการออกแบบ

ถ้าอ่านมาถึงตรงนี้ สำหรับคนที่ไม่เคยใช้ HSL มาก่อน อย่าเพิ่งตกใจไป เพราะวันนี้เรามาสอนวิธีการเอาทฤษฎีนี้ไปประยุกต์ใช้กับการออกแบบ UI ของเราให้สวยงามกัน

Hue คือสีค่าหลักของแบรนด์เรา หากแบรนด์ของเรามีสีน้ำเงินอย่าง IBM และเราต้องการจะออกแบบ UI เรามีวิธีมาแนะนำดังนี้

ibm hsb design
Carbon design system with HSB design
*เนื่องด้วยแอดทำภาพนี้ใน Ps มันเป็นหน่วย HSB
อยากให้ดูว่าเพียงแค่ปรับ S,B ความเข้มอ่อนจะเปลี่ยนไป แต่สีหลักยังคงเดิม

1. ลองทำปุ่ม Hover, Active, Focus ด้วยการปรับ Saturation

ด้วยการปรับค่า Saturation & Brightness และเก็บสี Hue ไว้เพื่อคงสีของ Brand ของเรา

ในตัวอย่างเป็นปุ่มของ IBM Design system ที่ปรับสีของ Hover ด้วยการลดค่าของสีลง


2. เพิ่มเฉด อมดำ อมขาวได้ด้วย Saturation + Lightness

ตัวอย่าง ถ้าเราอยากได้สีอมขาวมากขึ้น หรืออมดำมากขึ้น

Twitter logo with HSB color
Twitter logo with HSB color
*เนื่องด้วยแอดทำภาพนี้ใน Ps มันเป็นหน่วย HSB
อยากให้ดูว่าลดทั้ง s , b ก็จะเติมเฉดดำเหมือนกัน

3. ปรับสี UI ที่โดดออกมาจากคนอื่นด้วย Saturation + Lightness

หากเรามีดีไซน์ ภาพ ปุ่ม UI เส้น ตัวหนังสือ ดูแล้วยังไง UI ของเราก็ไม่ Smooth มีสีโดดออกมาจากชาวบ้าน วิธีปรับสีง่าย ๆ ก็คือลดค่าของ Saturation & Lightness ลงนั่นเอง


Tool ช่วยในการออกแบบสี

สำหรับคนที่สนใจทำ Palette สีของตนเองด้วยระบบ HSL แล้วล่ะก็ นัทขอแนะนำทูลที่ชื่อว่า Leonado ช่วยออกแบบ Generate ค่าสี โดยปรับสีตาม Saturation & Lightness ให้เราแบบสมูทมาก

leonado tool
Leonado tool

ความแตกต่างระหว่าง HSL และ HSB?

อย่างที่นัทแคปเจอร์ให้ดูด้านบน ภาพของ Google Chrome จะใช้ ระบบสีแบบ HSL

คำถามคือ HSL เหมือน HSB หรือไม่ ?

คำตอบทาง ทฤษฎีสี คือ ไม่!! แต่มันคล้ายคลึงกันมาก ต่างกันที่เรื่องของสูตรการคำนวนสีและการแสดงผล

HSL คือตัว Alternative หรือตัวที่แยกออกมาจาก RGB เพื่อให้มีค่า Lightness ที่สามารถปรับแต่งได้มากขึ้น โดย HSL จะเหมือนกับ HSV และ RGB

ส่วน HSB จะมีสีมากสูงสุดถึงสามล้านกว่าสี แต่มี Range สีที่ต่ำกว่า HSL
แปลว่าถ้าเราออกแบบด้วย HSB เราจะต้องมาแปลงหน่วยเป็น HSL, RGB, HEX อีกที เพื่อให้แสดงผลได้ตรงกับหน้าจอดิจิตัลค่า

รู้หมือไร่?

  • ในตระกูล Adobe: Photoshop & Illustrator & Adobe XD จะใช้ระบบสีของ HSB
  • โปรแกรม Sketch มีสี RGB & HSL & HSB
  • โปรแกรม Figma มีสี RGB & HSL & HSB

ถ้าใครยังไม่รู้จักโปรแกรมออกแบบ UI ไปอ่านกันต่อที่นี่นะคะ :D
เปรียบเทียบโปรแกรมออกแบบ UI UX: Sketch, Adobe XD, Figma


HSL, HSB กับ Design system

บทความนี้เป็น ทฤษฎีสี แบบพื้นฐานสุด ๆ แต่สำหรับคนที่ชื่นชอบความยาก การสร้างสรรค์สีแบบขั้นสูง นัทขอแนะนำวิธีการเลือก Palette สี Design system ของ IBM & Saleforce ที่ Medium ด้านล่างนี้ เรียกได้ว่าใช้ทฤษฎีในการคำนวนตัวเลขวัดกันมาแบบเป๊ะ ๆ

อ่านบทความ Designing systematic colors ภาษาอังกฤษ

Aaron Sagray (@asagray) discovered this problem while examining gray values.
Aaron Sagray (@asagray) discovered this problem while examining gray values.

References:


อ่านจบแล้ว? เราขอแนะนำบทความนี้

และเช่นเคยอ่านบทความเรื่องของสีจาก Designil ได้ที่ด้านล่างนี้ ครั้งหน้าจะเป็นบทความอะไร ติดตามกันได้ใน Designil สวัสดีค่ะ

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย | ประสบการณ์ทำงาน 11 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด