iUXUI Journey II— Color theory RGB & HSL

มารู้จัก คำประหลาดๆ สองคำนี้หน่อย ว่ามันคืออะไร

color mixing in nature

RGB

ย่อมาจาก Red Green Blue (แดง เขียว น้ำเงิน) เป็นระบบสีที่ใช้กับหน้าจอคอมพิวเตอร์ ซึ่งสีที่เราเห็น จะเป็นการประกอบกันของสามสีนี้ (น่าจะมี alpha อีกตัวมั้ง)

โดยคนเขียนโปรแกรมอย่างเราๆ จะใช้ตัวเลข 0–255 หรือเลขฐานสิบหก 0-F ในการระบุค่าความเข้มสี ตัวอย่าง

สีแดง → rgb(255, 0, 0) / #FF0000

สีเขียว → rgb(0, 255, 0) / #00FF00

สีน้ำเงิน → rgb(0, 0, 255) / #0000FF

สีขาว → rgb(255, 255, 255) / #FFFFFF

สีดำ → rgb(0, 0, 0) / #000000

0 คือไม่มีสี และเมื่อตัวเลขเข้าใกล้ 255 หรือ FF มากเท่าไร ค่าความเข้มสีก็จะมากขึ้นเรื่อย ๆ ซึ่งทั้งสามสีสามารถผสมกันได้ เช่น

https://www.letscontrolit.com/forum/viewtopic.php?t=3021

พวกนี้เราจะใช้กับ js, css และ programming language อื่นๆ

HSL

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

Hue

คือสีต่างๆ ที่วัตถุสะท้อนเข้าตาเรา แตกต่างกันตามความยามคลื่นแสงที่ไปกระทบวัตถุ แทนด้วยเลข 0–360 เพราะมันถูกแทนด้วยวงกลม

HSL Color Wheel

Saturation

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

Lightness

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

วิธีการใช้งาน HSL ที่นักออกแบบใช้ เขาจะกำหนด H มาก่อน จากนั้นจะไล่ปรับ S กับ L เพื่อให้งานออกแบบคงโทนเดียวกัน แล้วเราก็นำ template สีที่ได้ไปใช้ตามหลัก UX ต่อ

มันจะมี HSB อีกตัว ลองไปอ่านเพิ่มเติมได้ที่อ้างอิงด้านล่าง

Ref:

• designil.com rgb hsl theory
• designil.com เครื่องมือสำหรับเลือกสีในการทำเว็ป