พื้นฐานการเลือกใช้สีและรหัสสี

1. พื้นฐานการเลือกใช้สีและรหัสสี
อาจารย์นงคราญ คาวิชัย
สาขาวิชาเทคโนโลยีสารสนเทศ
คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้
Email: it.nongkran@gmail.com
วิชา ทส105 การออกแบบคอมพิวเตอร์กราฟิก
Computer Graphics Design

2. พื้นฐานการเลือกใช้สี
ความเข้าใจในหลัการของการเลือกใช้สี
อย่างลึกซึ้งนั้นเป็นสิ่งสาคัญในการออกแบบ และยังเป็น
หนึ่งในเครื่องมือการออกแบบด้านกราฟิกที่สาคัญอีกด้วย
การเลือกใช้สีมีปัจจัยต่าง ๆ ที่เกี่ยวข้องมากมาย และ
รวบรวมสีจากแหล่งต่าง ๆ ล้วนไม่มีที่สิ้นสุด ตั้งแต่สีจาก
หมึกพิมพ์ไปจนถึงสีจากหน้าจอที่เรามองเห็น ซึ่งสีแต่ละสี
นั้นมีลักษณะเฉพาะของตัวเอง
สีมีความเป็นเอกลักษณ์ เป็นภาษาที่ซับซ้อน
และมีความสามารถในการเปลี่ยนความหมายของตัวเอง
เมื่อไปจับคู่กับสีอื่น ๆ เมื่อคุณเลือกเพื่อจะนามาใช้งาน
ออกแบบ คุณต้องคานึงถึงความตัดกันและความกลมกลืน
กันของสี และผลกระทบที่อาจจะเกิดขึ้นต่อความชัดเจนใน
การพิมพ์
นอกจากนี้คุณยังสามารถสร้างอารมณ์ของ
งานออกแบบโดยการใช้จิตวิทยาด้านสี แต่คุณจะต้องมั่นใจ
ว่าคุณนั้นได้เลือกสีที่สื่อถึงข้อความได้อย่างถูกต้อง และ
เหมาะสมเพื่อให้ผู้เข้าชมสามารถเข้าถึงสิ่งที่คุณต้องการจะ
สื่อออกไปได้

3. พื้นฐานการเลือกใช้สี
การทาความเข้าใจวิธีการเลือกหรือกาหนดสีเพื่อ
ใช้ในวัตถุประสงค์ใด ๆ นักออกแบบจะต้องพัฒนาความรู้
เกี่ยวกับการทางานของสี วิธีการจัดประเภทสี และเงื่อนไขต่าง ๆ
ของสีเป็นอันดับแรก
สีสามารถแบ่งออกเป็น 3 ด้านหลัก คือ เนื้อสี ,
โทนสี และความสดของสี
โดย “เนื้อสี” หมายถึงชื่อทั่วไปของสี เช่น สีแดง
สีเหลือง หรือสีน้าเงิน ในเนื้อสีหนึ่ง ๆ จะมีหลายรูปแบบตั้งแต่
สว่าง (สีอ่อน) จนถึงมืด (สีเข้ม) ซึ่งจะเรียกว่าโทนสี หรือ
น้าหนักสีนอกจากนี้เนื้อสียังสามารถแบ่งได้ตามความสดหรือ
ความเข้มของสี (อาจเรียกได้ว่าความหนาแน่นของสี) ความ
สดของสีจะมีตั้งแต่ความหนาแน่นสูงไปจนถึงความหนาแน่น
ต่า หรือตั้งแต่สว่างจนถึงมืด
สียังสามารถอธิบายได้ด้วยอุณหภูมิและพลวัต
ของสี เนื้อสีที่มีสเปกตรัม (Spectrum) ย่านสีแดงจะให้
ความรู้สึกอบอุ่นและใกล้ชิดต่อผู้ชมมากกว่าเนื้อสีมีสเปกตรัม
ย่านสีน้าเงินที่ให้ความรู้สึกเย็นและห่างไกล

4. วงล้อสี (Color wheel)
วงล้อสี (Color wheel) วงล้อ
สีแสดงสีปฐมภูมิ สีทุติยภูมิ สีตติยภูมิ โดย
สีปฐมภูมิประกอบไปด้วยสีแดง สีเหลือง
และสีน้าเงิน สีทุติยภูมิสร้างขึ้นจากการ
ผสมสีปฐมภูมิทีละสองสีเข้าด้วยกัน ซึ่งจะ
เกิดเป็นสีส้ม สีเขียว และสีม่วง สีตติยภูมิ
เกิดจากการผสมสีปฐมภูมิสีเหลือง-ส้ม
สีเหลือง-เขียว สีน้าเงิน-เขียว สีน้า
เงิน-ม่วง และสีแดง-ม่วง

5. เนื้อสี (Hue)
เนื้อสี (Hue) เป็นความแตกต่างของสีหนึ่ง ๆ กับสีอื่นๆ โดยจะเป็น
ชื่อทั่วไปของสี เช่น สีแดงกล่าวได้ว่า เป็นสีตรงข้ามกับสีฟ้า

6. โทนสี (Tone)
โทน (Tone) หรือ
น้าหนักสี เป็นความสัมพันธ์
ระหว่างความสว่างและความ
เข้มของสี สีที่เพิ่มสีขาวเข้าไป
จะเรียกว่าสีอ่อน ส่วนสีที่เพิ่ม
สีดาเข้าไปจะเรียกว่าสีเข้ม

7. ความสดของสี (Saturation)
ความสดของสี (Saturation) หรือความเข้มของสี เปรียบเทียบได้กับความ
สว่างของสี ในแถวสีที่มีความเข้มสูงจะเป็นสีสว่าง ในขณะที่แถวสีที่มีความเข้มสี
ต่านั้นเป็ นสีที่หมองกว่า สีทั้งสองที่อยู่ในแถวเดียวกันนั้นถือว่าเป็นสีเดียวกัน แต่มี
ความเข้มที่แตกต่าง

8. สีแบบลบ (Subtractive Color)
สีแบบลบ (Subtractive Color)
ซองอะซิเตทที่พิมพ์ด้วยแม่สีโปร่งใสสามารถ
นามาพับให้เป็ นรูปทรงสามเหลี่ยมแบบ
ต่าง ๆ ซึ่งทุก ๆ การพับนั้นจะให้โทนสีที่
แตกต่างกันออกไปทุกครั้ง
วิธีนี้สามารถนาไปประยุกต์ใช้
กับการออกแบบดิจิตอลได้ โดยการสร้างเล
เยอร์โปร่งใสและนาแต่ละเลเยอร์มาซ้อนทับ
กัน การทดลองซ้อนทับสีในรูปแบบนี้จะช่วย
ให้คุณสามารถกาหนดลาดับความสาคัญใน
การ อ อ กแ บ บ , อ งค์ ป ร ะ กอ บ ใ น
หน้ากระดาษ และสร้างความน่าสนใจกับ
ตัวอักษรและกาหนดอารมณ์และจังหวะ
ให้กับผลงาน

9. สีปฐมภูมิแบบบวก และสีปฐมภูมิแบบลบ
เพื่อทาความเข้าใจในการทางานของสี จุดที่สาคัญที่สุดคือการรู้จักสีที่เกิดจากแสง (สีแบบ
บวกหรือระบบสี RGB) และสีที่เกิดจากเม็ดสี (สีแบบลบหรือระบายสี CMYK )
ซึ่งทั้งสองแบบทางานแตกต่างกัน เพื่อให้มองเห็นความแตกต่างอย่างชัดเจน หากคุณ
ทางานด้วยคอมพิวเตอร์ของคุณ สีที่แสดงบนหน้าจอ (ระบบสี RGB) จะไม่เหมือนกับสีที่คุณพิมพ์
ออกมา (ระบบสี CMYK) ปรากฏการณ์นี้สร้างปัญหาให้กับงานพิมพ์เป็นอย่างมาก เช่น สีแสดงอยู่
หน้าจอนั้นจะมีความสว่างมากกว่าสีที่ได้จากงานพิมพ์ เป็นต้น

10. สีปฐมภูมิแบบบวก และสีปฐมภูมิแบบลบ
เมื่อไรก็ตามที่คุณทางานด้วยระบบสีแบบลบในการพิมพ์
แต่ละสีจะถูกพิมพ์ลงบนกระดาษเพื่อลบพื้นสีขาว และหากใช้สีปฐม
ภูมิทั้งสามมาซ้อนทับกันจะเกิดเป็นสีดา ในวงล้อสีแสดงให้เห็นว่าสี
ปฐมภูมิจะประกอบด้วยสีแดง สีเหลือง และสีน้าเงิน
ส่วนสีทุติยภูมิจะเกิดขึ้นจากการผสมสีปฐมภูมิเข้า
ด้วยกัน จะได้ออกมาเป็นสีส้ม สีเขียว และสีม่วง
ส่วนสีตติยภูมิคือการผสมกันระหว่างสีทุติยภูมิสอง
สีเข้าด้วยกัน ดังนั้นคาว่า “พิมพ์ 4 สี” หมายถึงการใช้สี 4 สีในการ
ผสมกันเป็นทุก ๆ สีสีดังกล่าวได้แก่ ฟ้าอมเขียว (Cyan) , แดงอม
ม่วง (Magenta) , เหลือง (yellow) , ดา (Key)

11. สีที่แสดงผลบนหน้าจอ
สีที่แสดงผลบนหน้าจอ สีปฐมภูมิแบบบวกและสี RGB เป็นสีที่ใช้ในการสร้างสีสันต่าง ๆ บน
หน้าจอคอมพิวเตอร์ , โทรทัศน์ และจอแสดงผลต่างๆ การผสมสีระหว่างสีปฐมภูมิแบบบวกทั้ง
สามจะได้ผลลัพธ์ออกมาเป็นสีขาว
สีปฐมภูมิของงานพิมพ์ สีปฐมภูมิแบบลบและสี CMYK ฟ้าอมเขียว (Cyan) , แดงอมม่วง
(Magenta) , เหลือง (yellow) , ดา (Key) เป็นสีพื้นฐานที่ใช้ในงานพิมพ์ เมื่อนาสีเหล่านี้มาผสม
กันจะได้เป็นสีดา

12. สีแพนโทน (Pantone)
สีแพนโทน (Pantone)
สีแบบบวกที่ใช้งานออกแบบจะ
เรียกว่าสีพิเศษ เมื่อคุณต้องการเลือกสีจะ
นาไปใช้งาน คุณอาจจะใช้ระบบการจับคู่สี
สากล หรือที่คุณรู้จักกันในชื่อของระบบการจับคู่
สีแพนโทน (PMS) สีแพนโทนเกิดจากการ
ผสมสีระหว่าง 15 เม็ดสี (รวมทั้งสีดา และสี
ขาว) และยังเป็นสีพื้นฐานที่ใช้ในการผสมสี
สาหรับงานพิมพ์ ระบบนี้จะแตกต่างกันจาก
ระบบสี CMYK แต่บางทีของแพนโทนอาจจะให้
สีที่เหมือนกับระบบ CMYK

13. การไล่เฉดสีเทา
การไล่เฉดสีเทา คือ ตารางชุดสีของสีโทนสีดาและสีขาวที่นามาผสมเข้าด้วยกัน
สามารถกาหนดแสงและเงาของสีได้ ทั้งในด้านรูปธรรมและนามธรรม ตารางที่เกิดจาก
การผสมสีทั้งสองโทนนี้จะสร้างการไล่ระดับสีที่ผสามผสานกันได้รวดเร็ว

14. การเคลื่อนไหวและการตัดกันของสี
การเคลื่อนไหวและการตัดกันของสี
สีแสดง , สีเหลือง และสีส้ม เป็นสี
ขององค์ประกอบเบื้องหน้า แต่สีน้าเงินและสีเขียว
จะเป็นสีที่ถูกจัดอยู่เบื้องหลังของชิ้นงาน ตัวอย่าง
นี้ จะสร้างความเปลี่ยนแปลงไปตามทฤษฏีสีและ
เกียวกับเคลื่อนไหวอันเกิดขึ้นจากการเลือกใช้สีได้
อย่างสมบูรณ์

15. การเคลื่อนไหวและการตัดกันของสี
การสั่นสีขอบ เมื่อส่วนประกอบสีแดงแลเขียว
อยู่ข้าง ๆ กัน ดวงตาของเราจะมองเห็นเส้นสี
ขาวจางๆ ที่ขอบของสีทั้งสอง การสั่นที่ขอบถูกใน
การสร้างสรรค์ผลงานที่สวยงาม แต่เทคนิค
เดียวกันนี้จะทาให้เราอ่านอักษรได้ยากยิ่งขึ้น

16. คาศัพท์ที่เกี่ยวข้อง
• Additive Color : ระบบทั้งหมดที่แสดงผลบนหน้าจอหรือโทรทัศน์นั้นมักจะใช้ค่าสี RGB (แดง,เขียว,น้าเงิน)
เมื่อนาสีทั้งสามนี้มาผสมกันจะได้ออกมาในรูปของสีขาว
• Analogous color : สีที่อยู่ข้าง ๆ กัน ในวงล้อสี ยกตัวอย่าง เช่น สีน้าเงินกับสีเขียว
• CMYK : ฟ้าอมเขียว (Cyan) , แดงอมม่วง (Magenta) , เหลือง (yellow) , ดา (Key) ทั้งสี่สีนี้เป็นสีที่ใช้ใน
กระบวนการพิมพ์ 4 สี
• Complementary Color : สีที่อยู่ตรงข้ามกันในวงล้อสี ยกตัวอย่างเช่น สีแดงกับสีเขียว
• Gamut : ขอบเขตของสีที่อยู่ในระบบหนึ่ง ๆ เช่น ขอบเขตของสี CMYK หรือ RGB
• Primary Color : สีแดง สีเหลือง หรือสีน้าเงิน
• Secondary Color : การผสมสีปฐมภูมิใด ๆ สองสีเข้าด้วยกัน โดยเมื่อผสมแล้วจะได้สีส้ม สีเขียว และสีม่วง
• Spot Color : สีพิเศษ เช่น สี Pantone หรือ Toyo ซึ่งเกิดจากการพิมพ์จากสีพื้น ไม่ได้สร้างขึ้นจากสี CMYK
• Subtractive Color : ระบบที่ใช้ในการพิมพ์ ซึ่งขึ้นกับค่าสี CMYK
• Tertiary color : การผสมสีทุติยภูมิสองสีเข้าด้วยกัน ได้เป็นสีตติยภูมิ
• Color models : มาตรฐานค่าสีที่ถูกใช้ผสมเป็นสีต่าง ๆ เช่น CMYK , RGB , LAB

17. สีและการรับรู้ , ความตัดกัน และความกลมกลืมของสี

18. สีและการรับรู้ , ความตัดกัน และความกลมกลืมของสี
ประสบการณ์เกิดขึ้นจากการทางานจะเป็นสิ่งที่
ทาให้เห็นมุมมองในการเลือกใช้สีที่เหมาะสมกับ
งานออกแบบกราฟิก การเลือกใช้สี และความ
ชัดเจนของสีนั้น จะมีความแตกต่างกันอย่างมาก
โดยมันจะขึ้นกับว่าเรามองสีนั้น ๆ ผ่านหน้า
จอแสดงผลหรือมองผ่านการพิมพ์ สีมีผลกระทบ
อย่างมากต่อการรับรู้ ดังนั้น เราควต้องพิจารณา
ให้ถี่ถ้วน ส่นความตัดกันและความกลืมกลื่นของ
จะช่วยเพิ่มความน่าสนใจกับงานออกแบบ

19. สีและการรับรู้ (Color Legibility)
สีและการรับรู้ (Color Legibility)
การรับรู้จากสีนั้นหมายถึงการที่สามารถเข้าใจบางสิ่ง
บางอย่างได้อย่างชัดเจน มีปัจจัยมากมายที่มีอิทธิพลต่อการรับรู้และ
การสื่อความหมายของสี ยกตัวอย่างเช่น
- เงื่อนไขเกี่ยวกับแสงและการมองเห็นในการอ่านมี
ผลกระทบอย่างชัดเจนต่อการรับรู้ทั้งในด้านงานพิมพ์หรือแม้แต่งานที่
แสดงบนจอแสดงผล โดยสามารถเปรียบเทียบการรับรู้ได้จากการมอง
ภาพผ่านจอแสดงผลในห้องมืดกับห้องที่ได้รับแสงอาทิตย์โดยตรง
- การเลือกสี
- สีพื้นหลังหรือพื้นผิวของสีที่ใช้ในการพิมพ์
- ขนาดและรูปร่างของตัวอักษรหรือรูปภาพที่นามาใช้งาน

20. ความตัดกันละความกลมกลืน (Contrast and Harmony)
ความตัดกันละความกลมกลืน
(Contrast and Harmony)
การเลือกใช้ สีควร
สอดคล้องกับเนื้อหาของงาน
ออกแบบและควรสนับสนุนไอเดีย
ให้มีความเป็นรูปธรรมมากยิ่งขึ้น
ดังนั้น การทางานเกี่ยวกับความตัด
กันและความกลมกลืนของสีจึงเป็น
สิ่ ง ส า คั ญ ทั้ง ส อ ง ล้ ว น มี
ความสัมพันธ์กับความสามารถใน
การรับรู้และความสัมพันธ์ของสี
และส่งผลต่อฟังก์ชันและความ
เข้าใจในงานออกแบบ

21. คาศัพท์ที่เกี่ยวข้อง
• Analogous : ความคล้ายคลึง , เทียบเคียง , เหมือนกัน ยกตัวอย่างเช่น สีสองสีที่ใกล้เคียงกัน เช่น สี
เขียวของหญ้ากับสีเขียวของใบไม้นั้นสีที่มีความคล้ายคลึงกัน
• Contrast : ความแตกต่างระหว่างสองหรือหลายองค์ประกอบ ซึ่งในที่นี้หมายถึง สีของรูปภาพ
ยกตัวอย่าง สีที่มีความตัดกันสูง เช่นสีขาว และสีดา หรือสีน้าเงิน และสีส้ม ส่วนสีที่มีความตัดกัน
ต่า เช่น สีน้าเงินสองเฉดที่คล้ายกัน อย่างสีฟ้าอมเขียว (Cyan) และสีน้าเงินดอกข้าวโพด
(Cornflower Blue) เป็นต้น
• Harmony : รูปภาพที่ประกอบด้วยสีสองสีหรือมากกว่าอยู่ด้วยกันอย่างกลมกลืน เช่น สีน้าตาลอม
เทา (Taupe) และสีเทา

22. ความหมายของสี

23. ความสาคัญของสี
ทาไมการเลือกใช้สีถึงส่งผลต่อประสิทธิภาพของงาน ? นั่นเป็นเพราะสีแต่ละสีมีความ
ผูกพันกับมนุษย์มาเป็นเวลานาน ทุก ๆ สีเกิดขึ้นมาจากธรรมชาติผ่านกาลเวลามายาวนานจนฝังราก
ลึกอยู่ในจิตวิญญาณของมนุษย์ สีเข้ามามีบทบาทในสังคม , เป็นสัญลักษณ์ และสัมพันธ์กับอัต
ลักษณ์บุคคล ดังนั้น เพื่อให้การใช้สีเป็นไปอย่างมีประสิทธิภาพ คุณต้องเรียนรู้ความสัมพันธ์ระหว่าง
สีกับการสื่อความหมายต่าง ๆ หรือการใช้สีกับระบบป้าย และการใช้สีให้สอดคล้องกับอารมณ์

24. ความเฉลียวฉลาด, ความทรงจา , ประสบการณ์ และวัฒนธรรมล้วนมีส่วน
สัมพันธ์กับการใช้สีทั้งสิ้น ความแตกต่างของสีเพียงเล็กน้อยอาจส่งผลต่อการรับรู้ได้ โดย
ความหมายของสีจะเปลี่ยนไปตามพื้นฐานการเรียนรู้และพื้นฐานการทางวัฒนธรรม เป็น
หนึ่งในสัญลักษณ์ของทุก ๆ สังคม เป็นตัวแทนสื่อความมหาย และสังคมแตกต่างกันย่อม
นิยามความหมายของสีแตกต่างกัน
ความสาคัญของสี

25. • สีดา เป็นสีของความเศร้าโศกเสียใจ และความตายของประเทศฝั่งตะวันตก แต่ใน
ประเทศจีน อินเดีย สีขาวถูกใช้เป็นตัวแทนแห่งความเศร้า
• สีแดง มีความหมายถึงการ “หยุด” มักใช้กับป้ายเตือนยานพาหนะต่างๆ ส่วนสีแสดง
ในความหมายของชาวจีนหมายถึง ความโชคดี
• สีเขียว ในศตวรรษที่ 19 มีความหมายถึงยาพิษ หรือสารหนู แต่ในปัจจุบันสีเขียวมี
ความหมายถึงความอุดมสมบูรณ์และการตระหนักถึงธรรมชาติ
• สีน้าเงิน ให้ความรู้สึกถึงไปรษณีย์ในประเทศสหรัฐอเมริกา เนื่องจากตู้จดหมายใน
สหรัฐอเมริกานั้นมีสีน้าเงิน แต่ในสวีเดนหรืออังกฤษตู้จดหมายจะเป็นสีแดง รวมทั้ง
ประเทศไทยด้วย
• สีเหลือ เป็นสัญลักษณ์แห่งความกล้าหาญของชาวญี่ปุ่น
ความหมายของสีนั้นสามารถเปลี่ยนไปได้ตามเวลาและแตกต่างออกไปตามแต่
ละวัฒนธรรม หากงานออกแบบของคุณ ต้องจัดแสดงระดับนานาชาติอย่างลืมคานึงถึง
ความหมายของสีเหล่านี้ประกอบด้วย
ความสาคัญของสี

26. ความสาคัญของสี

27. สีแดง ให ้ความรู้สึกร้อน รุนแรง กระตุ้น ท ้าทาย เคลื่อนไหว ตื่นเต ้น เร้าใจ มีพลัง ความอุดมสมบูรณ์
ความมั่งคั่ง ความรัก ความสาคัญ อันตราย
สีส้ม ให ้ความรู้สึก ร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึกคะนอง การปลดปล่อย
ความเปรี้ยว การระวัง
สีเหลือง ให ้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดชื่น
ชีวิตใหม่ ความสดใหม่ ความสุกสว่าง การแผ่กระจาย อานาจบารมี
สีเขียว ให ้ความรู้สึก สงบ เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ
ความปลอดภัย ปกติ ความสุข ความสุขุม เยือกเย็น
สีน้ำเงิน ให ้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการเอางาน ละเอียด รอบคอบ สง่างาม
มีศักดิ์ศรี สูงศักดิ์ เป็นระเบียบถ่อมตน
สีม่วง ให ้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ ซ่อนเร้น มีอานาจ มีพลังแฝงอยู่ ความรัก ความเศร ้า
ความผิดหวัง ความสงบ ความสูงศักดิ์
สีฟ้ ำ ให ้ความรู้สึก ปลอดโปร่งโล่ง กว ้าง เบา โปร่งใส สะอาด ปลอดภัย ความสว่าง ลมหายใจ
ความเป็นอิสระเสรีภาพ การช่วยเหลือ แบ่งปัน
สีดำ ให ้ความรู้สึก มืด สกปรก ลึกลับ ความสิ้นหวัง จุดจบ ความตาย ความชั่ว ความลับ ทารุณ โหดร้าย
ความเศร ้า หนักแน่น เข ้มเข็ง อดทน มีพลัง
สีชมพู ให ้ความรู้สึก อบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรัก เอาใจใส่ วัยรุ่น หนุ่มสาว
ความน่ารัก ความสดใส
สีเทำ ให ้ความรู้สึก เศร้า อาลัย ท ้อแท ้ ความลึกลับ ความหดหู่ ความชรา ความสงบ
ความเงียบ สุภาพ สุขุม ถ่อมตน
สีทอง ให ้ความรู้สึก ความหรูหรา โอ่อ่า มีราคา สูงค่า สิ่งสาคัญ ความเจริญรุ่งเรือง ความสุข
ความมั่งคั่ง ความร่ารวย การแผ่กระจาย

28. สีกับอารมณ์และภาษา
ความหมายของสีนั้น
มีความเป็ นนามธรรมสูง
แตกต่างกันไปตามพื้นที่ต่างๆ
แต่อารมณ์ความรู้สึกที่เกิดจาก
การใช้สีนั้นมีความเป็นสากล
เช่น สีแดง , สีส้ม และสีเหลือง
จะช่วยกระตุ้นความรุ้สึกที่อบอุ่น
, ตื่นเต้นท้าทาย , สุขภาพ
แข็งแรงสมบูรณ์ หรือโกรธแค้น
ส่วนสีตรงข้ามอย่างสีฟ้าหรือ
เขียวกระตุ้นความรู้สึกที่เย็น ,
สงบนิ่ง , สันติ , ปลอดภัย และ
หรือผิดหวัง

29. ชุดสี (โทนร ้อน , โทนเย็น, โทนธรรมชาติ)

30. สีกับการให้ข้อมูล

31. สีกับการให ้ข ้อมูล
สีเป็นเครื่องมือที่ทรงพลัง โดยเฉพาะกับงานออกแบบที่เกี่ยวกับข้อมูล เพราะจะ
ช่วยให้นักออกแบบสามารถจัดเรียงข้อมูลได้ในหลากหลายรูปแบบ และเพิ่มความสามารถ
ในการ “เข้าใจได้” ให้กับงานออกแบบ นักจิตวิทยาได้พิสูจน์แล้วว่าผู้ชมจะเห็นสีก่อน
เห็นรูปทรงและรายละเอียด เนื่องจากสีเป็นข้อมูลพื้นฐานแรกสุดที่เข้าสู่สมองดังนั้น มัน
จึงเหมาะในการนามาใช้กับสิ่งต่าง ๆ สนับสนุนการจัดลาดับของข้อมูลนาสายตาผ่านระบบ
หรือข้อมูลที่ซับซ้อน และเป็นเครื่องนาทางไปสู่พื้นที่ว่างใหม่

32. สีกับการให ้ข ้อมูล
ระบบ คือ สิ่งที่รวมเอาข้อมูลที่ซับซ้อนมาไว้รวมกัน เช่น แผนที่ , ป้ายบอกทาง ,
ส่วนต่าง ๆ โครงสร้าง , เว็บไซต์ ซึ่งสีจะเข้ามาช่วยจัดข้อมูลเหล่านี้ให้เข้าที่เข้าทาง นัก
ออกแบบเรขศิลป์ ในสภาพแวดล้อมต่าง ๆ (Environmental Graphic Designer) ล้วนต้อง
ออกแบบระบบชี้นาทาง , เครื่องหมาย , ออกแบบนิทรรศการและการทาแผนที่ข้อมูล โดยใช้
สีเป็นหนึ่งในเครื่องมือสาคัญทั้งสิ้น

33. ตัวอย่างสีกับการให ้ข ้อมูลป้าย

34. จัดเรียงข ้อมูล
การเรียบเรียงข้อมูลอย่าง
สวยงาม ประกอบกับการออกแบบ
อย่างพิถีพิถันช่วยดึงดูดความสนใจ
จากผู้ชมได้ตัวอย่างข้างต้นเป็นผลงาน
อีกสไตล์หนึ่งที่ไม่เหมือนใคร โดยการ
ใช้แผนผังต้นไม้ในนการทาอินโฟ
กราฟิก (infographic) แสดงทิศทาง
การสูญพันธุ์ของสิ่งมีชีวิตต่างๆ
แผนผังดังกล่าวใช้ระบบ คือ คอลัมน์
และใช้โค้ดสีช่วยในการนาทางข้อมูล

35. เมนู
การออกแบบอย่างมี
ระบบที่ดีช่วยเพิ่ม
โอกาสให้นักออกแบบ
ได้แฝงการขี้นาและ
สร้ างความจดจา
ให้กับอัตลักษณ์ของ
แบรด์ เช่น การใช้สีใน
การแบ่งประภทของ
อาหารในร้านช่วยให้
ลูกค้าสามารถเลือก
เมนูที่ต้องการได้เร็ว
ขึ้น

36. ค ้นหาเส ้นทาง
การบอกเส้นทางนั้นต้องการแผนที่ประกอบ แผนที่รถไฟใต้ดินลอนดอน พัฒนาโดยวิศวกร
แฮร์รี่เบลอ ในปี คศ. 1931 เป็นแผนที่แรกที่มีการใช้ภาพกราฟิกประกอบ และเป็นต้นแบบให้กับแผนที่
บอกทางอื่น ๆ ทั่วโลก การใช้สีเป็นตัวแทนของแต่ละสายในสถานนีชิบูย่า (Shibuya) ประเทศญี่ปุ่นกับ
แผนที่รถไฟที่ดูเหมือนแผงวงจนอะไรสักอย่าง ได้ทาหน้าที่ให้ข้อมูลกับผู้เดินทางกว่า 2.4 ล้านคคนทุกวัน
และระบบการใช้สีได้ขยายมาสู่ระบบไฟฟ้าใต้ดินของโตเกียว (Tokyo) ต่อไป

37. ตัวอย่างค ้นหาเส ้นทางด ้วยสี

38. ตัวอย่างค ้นหาเส ้นทางด ้วยสี

39. ภาษาอันเป็นสากล
สี เ ป็ น ห นึ่ ง ใ น
ภาษาสากล ที่สามารถใช้ใน
การสื่อสาร เช่น ในสนามบิน
หรือโรงพยาบาล มีการใช้รูป
สัญลักษณ์ หรือ Pictogram
ร่วมกับการใช้โค้ดสี ช่วยทาได้
ข้อมูลต่าง ๆ เข้าใจได้ง่าย
ยิ่งขึ้น

40. คาศัพท์ที่เกี่ยวข้อง
• Data : ข้อเท็จจริงหรือส่วนหนึ่งของข้อมูลใด ๆ
• Diagram : ภาพวาดหรือแผนงานที่ใช้ในการอธิบายสิ่งใด ๆ หรืออธิบายการทางานของสิ่งต่าง ๆ
• Quantitative : ข้อมูลด้านจานวนของสิ่งของ รวมถึงการวัดต่าง ๆ (ข้อมูลเชิงตัวเลข)
• Schematic : ภาดวาดหรือแผนงานที่ทอนรายละเอียดให้เรียบง่ายขึ้นใช้เป็นตัวแทนของระบบหรือ
โครงสร้างจริง
• Statistical : สถิติ เกี่ยวข้องการจัดเก็บ , แบ่งกลุ่ม และจัดเรียงข้อมูล (โดยปกติเป็นข้อมูลเชิงตัวเลข)

41. การออกแบบเว็บสีและการคานวณรหัสสี (HTML)

42. โหมดสีในโปรแกรม Photoshop
โหมด Bitmap โหมด Grayscale
โหมด Duotone โหมด Indexed Color
โหมด RGB โหมดCMYK Color
โหมด Lab Color โหมด Multichannel

43. โหมดสีในโปรแกรม Photoshop

44. กาหนดสีให้เว็บไซต์โดยสอดคล้องกับเป้าหมายของเว็บไซต์
• ต้องการให้ข้อมูลแก่ใคร
• ให้ดูข้อมูล/ค้นหาสินค้า/ให้ข่าว/ให้บริการ เช่น ตรวจสอบข้อมูลต่างๆ
• ให้ข้อมูลอะไรบ้าง
• อาจสารวจจาก call center, Sales, หรือเบอร์กลางของบริษัท ถึงคาถามที่
ถามบ่อย
เนื้อหา Web Design Process ในบทถัดไป

45. กาหนดสีที่ใช ้
• โทนสีเดียว
• โทนสีผสม 2 สี
• โทนสีผสม 3 สี
• Color scheme, theme
• ดูสีของสิ่งพิมพ์, logo หัวจดหมาย หรือสื่อโฆษณา ประชาสัมพันธ์อื่นๆที่มีอยู่
ของบริษัท

46. โทนสีเดียว: สีฟ้า
เป็นสีของท้องฟ้า น้า ทาให้รู้สึก
สบายใจ นุ่มนวล อบอุ่น มีสีฟ้า
หลายโทน ให้ความรู้สึกต่างๆกัน

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

48. สีเขียว
ให้ความรู้สึกเป็นอิสระ สดชื่น เย็น
สบาย สีเขียวระดับต่างๆ ให้
ความรู้สึกแตกต่างกัน

49. สีแดง
ให้ความรู้สึกร้อนแรง มีพลัง
สีแดงระดับต่างๆ ให้ความรู้สึก
แตกต่างกัน

50. สีส ้ม-เหลือง
ให้อารมณ์สดใส ตื่นตัว ดึงดูด
เป็ นสีของอาหาร อาจกระตุ้นให้
รู้สึกหิว
สีเหลืองส้ มระดับต่ างๆ ให้
ความรู้สึกแตกต่างกัน

51. โทนสีเดียว: สีเทา-ขาว
สีเทาให้ความรู้สึก สุขุม สงบ
มั่นคง อาจทาให้รู้สึกหม่นหมอง
หรือเศร้า
สีขาว ให้ความรู้สึกสะอาด
บริสุทธิ์
สีขาว-เทาหลายโทน ให้
ความรู้สึกต่างๆกัน

52. โทนสีแบบต่ำงๆ
• โทนสีแบบสีชุดเดียวกัน
• โทนสีแบบสีตัดกัน
• http://colorschemedesigner.com/

53. COLOR CHART

54. COLOR CHART: HUE

55. COLOR WHEEL

56. การเลือกใช้สี
สีร้อน

57. การเลือกใช้สี
สีเย็น

58. การเลือกใช้สี
ชุดสีแบบเดียว

59. การเลือกใช้สี
สีคล้ายคลึงกัน

60. การเลือกใช้สี
สีตรงข้ามกัน

61. การเลือกใช้สี
สีตรงข้ามกัน 2 ชุด

62. การเลือกใช้สี
สีตรงข้ามกัน ข้างเคียง

63. สีตัวอักษร และสีพื้นหลัง
สีตัวอักษร สีตัวอักษร สีตัวอักษร สีตัวอักษร
สีตัวอักษร สีตัวอักษร สีตัวอักษร สีตัวอักษร
สีตัวอักษร
สีตัวอักษร สีตัวอักษร สีตัวอักษร สีตัวอักษร

64. HEXADECIMAL NUMBER SYSTEM

67. PIXELS
A monitors screen is divided into a grid of small unit called picture elements or pixels.
The more pixels per inch the better the resolution, the sharper the image.
All colors on the screen are a combination of red, green and blue (RGB), just at various
intensities.

69. DREAMWEAVER
Dreamweaver

70. With web applications like HTML (Hypertext Markup Language), colors are sometime
described using their RGB color specification in hexadecimal.
<tr>
<td rowspan="2" bgcolor="#cccc99">&nbsp;</td>
<td height="30" bgcolor="#999966"><div id="mainnav">
Hexadecimal Number

71. HEXADECIMAL RED GREEN BLUE
<td rowspan="2" bgcolor="#cccc99">&nbsp;</td>
Red Green Blue
cc cc 99
<td height="30" bgcolor="#999966"><div id="mainnav">
Red Green Blue
99 99 66
# means hexadecimal in web applications

72. RICK’S NUMBER SYSTEM RULES
All digits start with 0
A Base-n number system has n number of digits:
• Decimal: Base-10 has 10 digits
• Binary: Base-2 has 2 digits
• Hexadecimal : Base-16 has 16 digits
The first column is always the number of 1’s
Each of the following columns is n times the previous column (n = Base-n)
• Base 10: 10,000 1,000 100 10 1
• Base 2: 16 8 4 2 1
• Base 16: 65,536 4,096 256 16 1

73. HEXADECIMAL DIGITS
Hexadecimal: 16 digits
Dec Hex
0
1
2
3
4
5
6
7
Dec Hex
8
9
10
11
12
13
14
15

74. HEXADECIMAL DIGITS
Hexadecimal: 16 digits
Dec Hex
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
Dec Hex
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

75. HEXADECIMAL DIGITS
4 BITS CAN BE REPRESENTED BY 1 HEX VALUE
Hexadecimal: 16 digits
Dec Hex Binary
8421
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
Dec Hex Binary
8421
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

76. HEXADECIMAL DIGITS
4 BITS CAN BE REPRESENTED BY 1 HEX VALUE
Hexadecimal: 16 digits
Dec Hex Binary
8421
0 0 0000
1 1 0001
2 2 0010
3 3 0011
4 4 0100
5 5 0101
6 6 0110
7 7 0111
Dec Hex Binary
8421
8 8 1000
9 9 1001
10 A 1010
11 B 1011
12 C 1100
13 D 1101
14 E 1110
15 F 1111

77. HOW MUCH RED GREEN BLUE ?
<td rowspan="2" bgcolor="#cccc99">&nbsp;</td>
Red Green Blue
cc cc 99
<td height="30"bgcolor="#999966"><divid…>
Red Green Blue
99 99 66

78. HEXADECIMAL # RED GREEN BLUE
<td rowspan="2" bgcolor="#cccc99">&nbsp;</td>
Red Green Blue
cc cc 99
Convert to Binary
Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
24 bits represent a single color

79. Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
24 bits represent a single color

80. Red Green Blue
Hex 00->FF 00->FF 00->FF
Bin 0000 0000 0000 0000 0000 0000
thru thru thru
1111 1111 1111 1111 1111 1111
Dec 0 -> 255 0 -> 255 0 -> 255
0
255
0
255
0
255
? ? ?

81. 0
255
?
HOW MUCH? 0 TO 255
0
255
?
0
255
?

82. Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
c c
or
12 12
(12x16) (12x1)
204 = 192 + 12

83. Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
c c
or
12 12
(12x16) (12x1)
204 = 192 + 12

84. Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Hexadecimal
Decimal 16’s 1’s
9 9
or
9 9
(9x16) (9x1)
153 = 144 + 9

85. Red Green Blue
Hex cc cc 99
Bin 1100 1100 1100 1100 1001 1001
Dec 204 204 153

86. 0
255
204
0
255
255
204
153

87. <td rowspan="2" bgcolor="#cccc99">&nbsp;</td>

88. REFERENCE
David Dabner | Sandra Stewart | Eric Zempol
Graphic Design School
ผู้แปล จุติพงศ์ ภูสุมาศ, สุวิสา แซ่อึ่ง
ปิยะบุตร สุทธิดารา | บรรณาธิการ
http://www.w3schools.com/html/html_colors.asp
http://html-color-codes.info/

89. Q&A