หน่วยที่ 3 การออกแบบสีระบบสี

1
รายวิชา การออกแบบและพัฒนาเว็บไซต

2

สแี ละการออกแบบเว็บไซต

ความรูเรื่องสี
มีคําถามตา งๆเกิดขึ้นมากมายที่เก่ียวกบั คาํ วาสี (Colour) สคี ืออะไร ? คําถามนี้ คือคําถาม ในแงของ

วทิ ยาศาสตร และอีกคําถามก็คือ รปู แบบของสใี นงานศิลปะน้นั มีอะไรบา ง ? นี่คือคําถาม ในทางศิลปะ (Art)
ท้งั 2 คําถามนีเ้ อง ท่ีมีคาํ ตอบในตัวของมันเอง กลาวคือธรรมชาติไดส รางแสงสใี หกบั โลก แตมนุษยไดน ําสี ท่ี
ธรรมชาติ ใหมานั้น มาสรางสรรคงานศิลปะท่ีงดงามใหกับโลก โดยผา นมือของศิลปน (Artist) นี่เปน การ
ผสมผสานทีน่ า ทึง่ ของ วิทยาศาสตร (Science) กบั ศิลปะ (Art) ไดอยา งไมม ที ่ีติ

4.1 สี (color) ถา ขาด “ส”ี ภาพจะเปน อยา งไร?

Quantum Theory “แสงเกิดจากการที่อเิ ลคตรอนของอะตอมเดินทางผา นบรเิ วณนนั้ ๆ ดว ยการ
เปลีย่ นแปลงพลังงานจากระดบั สูงสรู ะดับต่าํ ทาํ ใหเกิดการเปลี่ยนแปลงของแสงจนกระทง้ั มองเหน็ เปน สี
ตางๆ” สเี ปนความถี่ของคลื่นแสงในชวงความถี่ท่ีมนุษยส ามารถมองเห็น โดยแบงเปนแถบแสง(spectrum)
ออกเปนสตี า ง ๆ เชน แถบสีรุง แสงทอ่ี ยรู ะดับต่ํา มนุษยมองไมเห็น คือ infrared แถบแสงที่อยูระดบั สงู คอื
แสงสีขาว
แสงอาทติ ยเดินทางผานแทงทรงปริรามิด (Glass Prism)

• ดวงตาคนไวตอสหี ลัก RGB (แดง เขียว น้าํ เงนิ )
• เพื่อใหสีทแี่ สดงบนหนา จอคอมพวิ เตอรเ ปน สีทตี่ อ งการตองมีการผสมแสงสหี ลักเขา ดว ยกนั เชน

รายวชิ า การออกแบบและพัฒนาเว็บไซต

3

การผสมแสงสี สบี นจอภาพ การผสมแสงสี สีบนจอภาพ
แดง แดง แดง+น้าํ เงนิ มวง
เขยี ว เขียว แดง+เขยี ว เหลอื ง
น้าํ เงนิ น้าํ เงนิ เขียว+นํา้ เงิน คราม
ไมมกี ารผสม ดาํ แดง+นํ้าเงนิ +เขียว ขาว

4.2 ระบบสี ( Color Model )สีเปนองคป ระกอบหลักที่สาํ คัญในการออกแบบ สีมีอทิ ธิพลในเรื่องของ
อารมณการสือ่ ความหมายทเ่ี ดน ชัด และกระตุนตอการรับรูของคนเราไดเ ปนอยางดี นอกจากนี้เร่ืองของสียัง
เปน เรื่องสําคัญในการออกแบบ เพ่อื ความสวยงาม ส่ือความหมาย งานบางช้ินท่ีออกแบบมาดี แตถาใชส ีไมเปน
อาจทําใหง านทั้งหมดทที่ าํ มาพงั ไดงาย ๆ ดังนั้นเราจงึ จาํ เปนตอ งรูจักสี และเลือกใชส ใี หเปน กอนอ่ืนเรามารูจ ัก
องคประกอบของสีกันกอน องคป ระกอบของสีในงานออกแบบน้ัน มีคุณสมบตั ิอยู 3 ประการ คอื

1. สี,เน้ีอสี (Hue)
2. น้ําหนักสี (Value / Brightness)
3. ความสดของสี (Intensity / Saturation)

4.3 สี, เน้ือสี Hue
เนื้อสี หรอื Hue คือความแตกตา งของสบี รสิ ุทธิ์แตละสี ซึ่งเราจะเรียกเปนช่ือสี เชน สีแดงสนี าํ้ ตาล สมี วง
เปนตน โดยแบงเนื้อสีออกเปน 2 ชนดิ

1. สขี องแสง (Coloured Light)
สขี องแสง คือความแตกตา งสน้ั ยาวของคล่ืนแสงทเี่ รามองเห็น เริ่มจากสมี ว งไปสีแดง (เหมือนรุง กิน

นาํ้ ทเี่ รามองเหน็ หลงั ฝนตก)

2. สีของสาร (Coloured Pigment)
สขี องสาร คือสที เ่ี รามองเห็นบนวัตถุตาง ๆ ซง่ึ เกิดจากการดูดซึมและสะทอนของความยาวคลน่ื

แสง จากการที่เรามองเห็นสีของสารตาง ๆ นี่เองจึงคน พบวามีสอี ยู 3 สี ที่เปนตนกําเนิดของสอี ่นื ๆ ที่ไม
สามารถสรางหรือผสมใหเกิดจากสีอืน่ ได หรือทเ่ี รยี กกันวา " แมสี " ไดแก แดง,เหลือง,นํา้ เงนิ

รายวิชา การออกแบบและพฒั นาเวบ็ ไซต

4

4.4 การผสมสี จริง ๆแลวสีตา ง ๆ ท่เี รามองเห็นเกิดจากการผสมสีใน 2 รูปแบบ คือ
การผสมสแี บบบวก (Additive Color Mixing)
ระบบสี Additive การใชส กี ับงานกราฟกในคอมพิวเตอรมีรายละเอียดหลายประการ ซึ่งเปน
ลกั ษณะเฉพาะ ดังน้ันจงึ ควรทราบระบบสีของคอมพิวเตอรกอ น ระบบสีของคอมพิวเตอรจ ะเก่ียวของกบั การ
แสดงผลแสงทแี่ สดงบนจอคอมพิวเตอร คอื ถา ไมมแี สดงผลสีใดเลยบนจอภาพจะแสดงเปน “สดี ํา” หากสที กุ สี
แสดงผลพรอมกัน จะเห็นสบี นจอภาพเปน “สีขาว” สว นสอี ื่นๆ เกดิ จากการแสดงสีหลายๆ สแี ตมีคาแตกตา ง
กัน สใี นระบบ Additive ประกอบดวยสีหลัก 3 สี คอื สแี ดง(Red) สเี ขียว(Green) และ สนี ํา้ เงิน(Blue) เรยี ก
รวมกันวา RGB เปน การผสมสีของ "แสง" ซึง่ อาจเขาใจยากสกั หนอย เพราะแตกตาง จากความคุน เคยทเี่ ราเคย
รูก ันมา แสงสีขาวที่เห็นทว่ั ไปน่ันประกอบดวยแสงท่ีมีความยาวคล่นื ตาง ๆ กนั ซอนทับรวมตัวกันเกดิ เปน
สีสนั ตาง ๆ จงึ เรยี กวา "สแี บบบวก" หลักการนี้นาํ ไปใชกบั การมองเหน็ สที เี่ กิดจากการผสมกนั ของแสง เชน
จอมอนเิ ตอร จอโทรทัศน ทีเ่ รยี กวา RGB Mode

การผสมสีแบบลบ (Subtractive Color Mixing)

ระบบสี Subtractive สีแตละสจี ะไดจ ากการลบสีตางๆ ออกไปจากระบบ ดงั นัน้ หากไมมีการ
แสดงสใี ดๆ จะแสดงผลเปนสีขาว ขณะที่การแสดงสีทุกสจี ะปรากฏเปนสดี าํ และสหี ลักของระบบ คือ สีฟา
(Cyan) สีมว งแดง(Magenta) และ สเี หลือง(Yellow) เรียกรวมกันวา CMY เปนระบบสีทใ่ี ชในงานพิมพ ซ่งึ จะ
รวมเอา สีดาํ มาเปน สหี ลกั ดวย จงึ เรียกรวมๆ วา CMYK (Cyan, Magenta, Yellow, Black)

เปนสที เี่ กดิ จากการดูดกลืนแสงสะทอ นจากวัตถุ คอื เมอ่ื มีลําแสงสีขาวตกกระทบวัตถุสีตา งๆ คลื่นแสง
บางสว นจะถูกดูดกลนื ไว และสะทอนเพียงบางสีออกมา จึงเปน ท่มี าของชื่อ "สแี บบลบ" มีแมส ีคือ สฟี า แกม
เขียว (Cyan) สมี ว งแดง (Magenta) และสีเหลือง (Yellow) เมอ่ื สามสีผสมกนั จะเปนสดี ําเพราะแสงถกู ดูดกลืน
ไวหมด ไมส แี สงสะทอนมาเขาตา จงึ ไมเ กิดสี ตาจงึ เหน็ เปน สีดาํ หลักการนี้ ไดนาํ ไปใชกับการผสมสี เพอื่ ใช
ในการพมิ พ โดยใชแมส ี แตเพ่มิ สีดําขึน้ มาอีกสหี นึ่งผสมกนั เปน โทน ตา ง ๆ ดวยใชเ ม็ดสกรีน ทําใหไดภาพสี

รายวิชา การออกแบบและพฒั นาเว็บไซต

5

สันสมจริง ดงั น้นั หากตองทํางานเกีย่ วกับส่ิงพิมพ ตอ งเตรียมภาพดวยระบบสีน้ี ในโปรแกรมเรียกวา CMYK
Mode

4.5 ระบบสีในคอมพิวเตอรกราฟก
1. HSB Model หลักการมองเห็นสีดวยสายตามนษุ ย
เปน พน้ื ฐานการมองเห็นสีตามสายตาของมนษุ ย HSB Model จะประกอยขน้ึ ดวยลกั ษณะของสี 3
ลกั ษณะคือ

1.1 Hue เปนสที ่สี ะทอนมาจากสีของวตั ถุ ซงึ่ แตกตางกันตามความยาวของคล่ืนแสงที่มากระทบวัตถุ
และสะทอนกลับมาท่ีตาของเรา Hue ถูกวัดโดยตาํ แหนง บน Standard Color Wheel ซ่ึงถกู แทนดวยองศา คอื 0-
300 องศา แตโดยการใชทว่ั ๆ ไปแลวมกั จะเปนการเรยี กสีนน้ั เลย เชน สแี ดง หรือมว งและเหลืองเปน ตน

1.2 Saturation เปนเรื่องของความเขมขน และความจางของสี Saturation คอื สัดสว นของสี (Hue)ที่มีอยู
ในสีเทา วัดคา เปน เปอรเซ็นตดังน้ี คือจาก0% (สเี ทา )จนถงึ 100%(Fully Saturation สที ีความอิ่มตวั เต็มท่ี)

1.3 Brightness เปนเร่ืองของความสวางและความมดื ของสี ซ่ึงถกู กําหนดคาเปน%จาก0%(สดี าํ )ถงึ
100%(สีขาว)

• H=เฉดสที ่แี ตกตางจากสหี ลัก (RGB)
• S=ความเขมแสงสี
• B=ความสวา งของแสงสี

รายวชิ า การออกแบบและพัฒนาเว็บไซต

6

2. RGB สีทเ่ี กิดจากการรวมกันของแสงสี แดง เขียน และนํ้าเงินแตละแสงสีมีคาตงั้ แต 0 ถงึ 255 (ฐาน
สบิ หกคอื 0-f)

3.CMYK Model หลักการมองเหน็ สีของเคร่ืองพิมพ

โมเดลน้ีมีแหลง กาํ เนดิ สีอยูท่ีการซึมซับ (Absorb) ของหมึกบนกระดาษ โดยมสี พี ้นื ฐานคือสี Cyan
Magenta และเหลอื ง สีทัง้ สามสีขางตน รวมกนั เปน สีดํา บางครง้ั เราจึงเรียกสีทมี่ องเห็นใน CMYK Model วา
เปน Subtractive Color แตก ็ไมส ามารถผสมรวมกนั ใหไดสีบางสี เชน สนี า้ํ ตาล จงึ ตองมกี ารเพมิ่ สดี าํ ลงไป
ฉะน้ันเมอ่ื รวมกัน4สคี ือCMYKสีทไี่ ดจ ากการพิมพจงึ ครอบคลุมทุกสี

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

7

CMYK & RGB

รายวิชา การออกแบบและพัฒนาเวบ็ ไซต

8

4. Lab Model

เปนโมเดลทถี่ ูกพัฒนาขนึ้ โดย Commission International d’Eclairage (CIE) ใหเ ปน มาตรฐานการวัดสีทกุ
รูปแบบ ครอบคลุมทุกสีใน RGB และ CMYK และใชไดกับสที เ่ี กดิ จากอูปกรณทุกอยางไมว า จะเปนจอ
คอมฯเครื่องพิมพเคร่ืองสแกนและอนื่ ๆ สวนประกอบของสใี นโหมดนี้ Lคือคา ความสวา ง A หมายถงึ
สวนประกอบที่แสดงการไลสจี ากสเี ขียวไปยังสีแดงและ B หมายถึงสว นประกอบท่ีแสดงการไลส จี ากสนี าํ้
เงนิ ถงึ สเี หลอื ง

L=Luminance Model ระดับความเขมของแสงสวาง
a คาแสดงการไลส ีจากแสงสเี ขียวไปสแี ดง
b คา แสดงการไลสีจากแสงสีนํา้ เงนิ ไปสเี หลอื ง

5. โมเดลสแี บบ HSB
โมเดลสแี บบนี้ เปนรูปแบบการสรา งสโี ดยจาํ ลองวิธีการมองเหน็ ภาพของตามนุษย ดังน้ันจึงสามารถ
สรา งสที ่ใี กลเคียงกับการมองเหน็ ของมนุษยมากทส่ี ดุ แตโมเดลสแี บบนี้จะมปี ญหาในตอนท่นี ําไปใชใน
งานพิมพจริงๆ เน่ืองจากการสังเคราะหส ีของเครื่องพิมพไมส ามารถสรางสบี างสีขึน้ มาได โมเดลสแี บบ
HSB มาจากองคประกอบสามตัว คอื Hue คือ สีทเี่ กิดจากการสะทอ นแสงจากผวิ ของวัตถุ มีหนว ยเปน
องศา ตง้ั แต 0 - 360 องศา แตนยิ มเรียกเปนสมี ากกวา เปน องศา เชน สี แดง สีเขียว เปน ตน

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

9

Saturation คอื คา ความอ่ิมตัวของเนอ้ื สี ซ่งึ เปน การกําหนดวา สีนน้ั ๆ จะมีสเี ทามาเจือปนมากนอยแคไหน
Saturation มีอัตราสว นระหวางสีจรงิ กบั สีเทา หากคา S เทา กับ 100% หมายถึงมีสีจริง อยูท ง้ั หมดไมมีสีเทา
ปน สอี ่ิมตวั เต็มท่ี แตห ากมีคา S เทากบั 0% แสดงวา ไมมีสจี ริงอยูเลยนอกจาก สเี ทา

Brightness คอื คา ความสวางของสี โดยมีหนว ยวดั เปน เปอรเ ซน็ ตอกี เชน กัน เมือ่ คา B เทากับ 0% สีทีไ่ ดก็
จะมดื ทีส่ ุดเปน สีดาํ

ชองกวางของสี (Color gamut) เปนชองกวา งของสีในโมเดลตางๆ ดงั ภาพ

รายวชิ า การออกแบบและพัฒนาเว็บไซต

10

4.6 โหมดสีในโปรแกรม Photoshop
1. โหมด Bitmap Bitmap เปนโหมดสที ี่มกี ารเกบ็ ขอมูลของสีเพียง 1 บิต ตอ พิกเซล สามารถ

แสดงไดเ พียงสีขาวและสดี าํ ขอดีคือ ไดไฟลรูปภาพท่ีมีขนาดเล็กเหมาะสําหรับภาพท่ีมีขนาดเล็ก หรือภาพ
ลายเสน

2. โหมด Grayscale เปน โหมดสีที่มีการเกบ็ ขอ มูลของสเี พียง 8 บติ ตอ พิกเซล เปน โหมดสําหรับภาพ
ขาว-ดาํ สามารถไลเฉดสีไดถึง 256 ลําดบั ขอจํากดั ในการพมิ พสามารถพิมพออกมาทางเคร่ืองพิมพได 50 ระดับ

3. โหมด Duotone ผลติ เพื่อเพิม่ ระดบั ของสีในงานพิมพ โดยกาํ หนดสีดํา หรือสเี ขมเพ่ือใหเกดิ
ระดับสีในสวนท่เี ปน เงามดื ของภาพ และการเพิ่มสีออนลงไปเพ่อื ใหเกิดระดับสีในสว นท่ีเปน สสี วางของภาพ
ดงั น้นั งานพิมพท่ีไดจากโหมดน้จี งึ ดูมีความสวยงามกวา ภาพในโหมด Grayscale

รายวชิ า การออกแบบและพฒั นาเว็บไซต

11

4. โหมด Indexed Color เปนโหมดทจี่ าํ กัดจาํ นวนสีใหเหลือเพียง 256 สีเทานัน้ สาํ หรบั สีในสว นใดที่
อยูนอกเหนือจากสที ั้ง 256 สนี ัน้ โปรแกรมจะเลอื กใชส ที ่ใี กลเ คียง

ขอดี คือ ขนาดของไฟลไมใหญมากนัก ในขณะที่ยงั คงคุณภาพของภาพเอาไวได เหมาะสําหรับสรา ง
งานบน Web Page หรือภาพ Animation

5. โหมด RGB ใชสี RGB โดยแตล ะสีจะมีการไลลาํ ดบั สีไดถึง 256 ระดบั เม่ือรวมกันทง้ั 3 สจี ะ
สามารถแสดงสีไดสูงถงึ 16.7 ลา นสี สาํ หรบั การผสมสีแบบ RGB น้ใี ชห ลักการเดยี วกันกับการแสดงสีของ
จอมอนิเตอรท ่ีใชกันอยูในปจจุบนั ดังนั้นไมว าจะทํางานอยูในโหมดสีใดก็แลวแต โปรแกรมจะแสดงภาพบน
หนา จอดวยโหมด RGB เสมอ

6. โหมดCMYK Colorโหมดน้ใี ชส ี 4 สี คือ CMYK โดยแตละสีจะเก็บขอมลู 8 บิต นั่นหมายความวา
1 พิกเซล จะตองใช (8x4) 32 บติ ตอ พิกเซล โหมดน้ีควรจะนาํ มาใชเ ม่ือตองการเตรียมภาพสําหรบั งานพิมพ ใน
ระหวา งแกไขอาจทําในโหมด RGB แตเ มื่อจะนาํ ไปพิมพภาพสําหรบั งานพิมพควรจะเปล่ยี นกลับไปเปนโหมด
CMYK

รายวิชา การออกแบบและพัฒนาเว็บไซต

12

7. โหมด Lab Color เปน โหมดสที ่เี หมอื นจริงท่ีสุด เหมาะสาํ หรบั ทํางานกับภาพทเี่ ปนPhoto CD
หรอื ภาพทตี่ องการสงผานไปใชงานระหวา งระบบคอมพวิ เตอรท แ่ี ตกตางกนั เชนระบบ Windows ไปยงั ระบบ
Mac OS

8. โหมด Multichannel โหมดน้ีใชสาํ หรบั พิมพสใี นกรณีพเิ ศษ เชน การสัง่ สีพิเศษเพมิ่ เตมิ สาํ หรบั งาน
สิ่งพิมพ

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

13

4.7 วงจรสี Colour Wheel
วงจรสีก็คอื การวางเนื้อสี เรยี งกันตามการผสมสีของสารทเ่ี รา

มองเห็นโดยตวั อยางของแบบจําลองวงจรสีจะหยิบยกมาศึกษากันนี้ เปน
แบบ 12 สี มาตรฐานท่ีใชกันอยูในปจจบุ ัน ลองมาดูภาพประกอบความ
เขาใจกันสกั เล็กนอย
1. แรกเริ่มเดมิ ทเี่ รามี 3 สเี ปนตนกําเนดิ คือแมสี หรือ สปี ฐมภมู ิ Primary Colours
2. สีทีไ่ ดจากการผสมแมสที ั้ง 3 เขา ดวยกัน เรียกวา สีข้ันท่ี 2 หรอื สที ุติยภูมิ Secondary Colours

รายวิชา การออกแบบและพฒั นาเว็บไซต

14

3. สที ่ีไดจากการผสมแมสี และสขี ัน้ ที่ 2 ออกมากลายเปน สีขั้นท่ี 3 หรือ สีตตยิ ภูติ Tertiary Colours

ประโยชนในการใชวงจรสี นําไปใชในการออกแบบ จัดวางสี ใหอยดู ว ยกนั หรอื ทีเ่ รียกกันวา การวาง
โครงสี Colour Schematic

4.8 นา้ํ หนักสี : Value หรือ การเปลงแสง (Luminance) จะวา ไปแลว น้าํ หนักสีก็คอื เร่ืองของความ
สวางของสี หรือการเพ่มิ ขาว เติมดาํ ลงในเนื้อสที ี่เรามีอยแู ละการปรบั เปลี่ยนน้ําหนักสีน่เี องทที่ าํ ใหภาพดูมีมติ ิ
ดูมีความลึก หรือที่เราเรียกวันวา โทน Tone ซึง่ บางครง้ั สรางความนาสนใจ ดึงดูดและความสมจรงิ ใหกับงานท่ี
เราออกแบบได

รายวชิ า การออกแบบและพฒั นาเว็บไซต

คา ความสวา งสตี า่ํ คาความสวา งสีปานกลาง 15

คา ความสวางสีสูง

เรามาดูตัวอยางงานกันดีกวา ตวั อยางงานออกแบบกราฟก ที่มีการปรับเปล่ียน
สที เ่ี ปน กลาง Neutral Colors น้าํ หนักสี ในการออกแบบ ซ่งึ ถา เราใชสเี ดยี ว
ในการออกแบบ จะเรยี กวาเปนงาน Monochrome

สีออน สีเขม และโทนสี Tint Shade and Tone

รายวชิ า การออกแบบและพัฒนาเว็บไซต

16

4.9 ความสดของสี หรือ ความอ่มิ ตัวของสี Intensity / Saturation
ความสดของสีหรือบางคนอาจเรียกวา ความอ่ิมตวั ของสี เปน เรอื่ งสาํ คัญอีกเร่ืองหนง่ึ ในการ

ออกแบบ การใชสบี างครงั้ เราอาจจะตองลดหรือเพ่ิม ความสดของสีใดสีหน่ึง หรือ ท้ัง 2 สเี ลยก็ได
ในกรณลี ดความสดของสีก็เพ่ือไมใหภาพงานท่ีออกมานั้นดฉู ดู ฉาดจนเกินไป ลดความสดของสีจะเรยี ก

อีกอยางวา เปน การเบรกสีก็ได ในการเบรกสีของงานศิลปะ ศลิ ปนมักจะใชส นี าํ้ ตาลซีเปยมาเติมลงในสีท่ีเขา
ตองการเพ่อื ใหสที ่ีไดออกมามีเนอ้ื สเี ดิมแตดหู มนลง

ระดับความสดและความหมองทเ่ี กดิ จากการผสมกันระหวา งที่สีทอี่ ยูตรงขา มในวงลอสี โดย
**ระดับสีที่สดที่สุด คือสที ่ีไมถกู นาํ มาผสมเลย
**ระดบั ทห่ี มองที่สุด คือ สีท่ีถกู ผสมกนั ในอัตราสว นคร่ึงตอ ครึง่ ระหวา งสีที่อยูตรงขามกนั ในวงลอสี

เรามาดูตัวอยา งภาพท่คี วามสดของสีตา งกันดีกวา

ทง้ั สองภาพเปน ภาพเดียวกันแตมีใหแ สดงความสดของสีของดอกไมออกมาตางกัน ทําใหเหน็ ไดว า ภาพแรก
เปนภาพทนี่ า สนใจกวา

รายวิชา การออกแบบและพัฒนาเวบ็ ไซต

17

4.10 การเลือกสีมาใชง าน : Colour for Design
กอ นหนา นเ้ี ราไดรูจักกบั คุณสมบตั ิของแลวแลว วา ประกอบไปดวย เนื้อสี Hue,น้ําหนักสี Value และ
ความสดของสี Intensity ขั้นตอไปเราจะมารจู ักกับการนาํ้ คุณสมบัติเหลา น้ีมาใชงาน ซง่ึ การเลอื กใชส สี ามารถ
แบงออกตามคุณสมบัติของสี ไดแ ก
1. การเลือกเน้ือสี Choose Hue ในการเลือกเน้ือสีมาใชง านเราจะเลือกจาก
1. ความหมายของเนอ้ื สีแตละสีทม่ี ี
2. เลือกเนื้อหาท่ีอยูดวยกนั แลว ดูดีเหมาะสม หรือเลือกสใี นโครงสรา งสี

4.11 รหัสสีและการผสมสี รหัสสีที่มกี ารใชอ ยางแพรห ลายไดแ ก
- รหัสสีแพนโทน (Pantone color codes) : อุตสาหกรรมกราฟก
- รหัสโตโย (Toyo color codes) : งานพมิ พ
- รหสั หมายเลขแวทเทน (Wratten numbers) : ผลิตแวนกรองแสง

รายวิชา การออกแบบและพัฒนาเว็บไซต

18

- รหสั สีแพนโทน (Pantone color codes) : อตุ สาหกรรมกราฟก

- รหสั โตโย (Toyo color codes) : งานพมิ พ

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

19

- รหัสหมายเลขแวทเทน (Wratten numbers) : ผลิตแวนกรองแสง

4.12 การปรบั แตงสี
สีเทียม หรือสซี ูโด (Pseudo color)
เทคนิคที่ใชก าํ หนดสีใหกับภาพดจิ ิตอล เพ่ือใหเ กิดความแตกตา งจากลกั ษณะท่เี ปนจรงิ

โปสเตอรไ รเซชัน (Posterization)
การทําภาพสใี หมีความตดั กนั มากขึ้น จนภาพมีลกั ษณะเรียนแบบคลายภาพโปสเตอรทาํ โดยการลด

จํานวนของสี หรือระดบั ความออนแกของระดบั สีเทาในภาพจนทําใหเ รามองเหน็ ความแตกตา ง

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

20

ดเิ ธอร (Dithering)
เปน เทคนิคการสรา งการลวงตาเพอื่ ใหเ กดิ ความนุมนวลของเนอื้ สใี นภาพ ดว ยการกระจายจุดสเี ลก็ ๆ ลง
ไปบนพืน้ ทส่ี ีท่ีตองการใหเ กิดความกลมกลืน

รายวิชา การออกแบบและพฒั นาเวบ็ ไซต

21

5. สีและความหมาย Colour Meaning

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

สีแดง อา งองิ มาจากดวงอาทิตย และไฟ ซ่ึงใหค วามสวาง ความรอ น ทําใหเมื่อเหน็ สแี ดง เราจะรับรู
ไดวาสีแดงคอื ความรอน พลัง พลังงาน มีพลงั ความสวา งโชติชวง ความแรงที่มอี ยู อกี ทั้งในความเช่อื ของชาว
จนี สีแดงยังเปน สีมงคล นักออกแบบไมนอยเลยก็หยบิ จุดนี้มาออกแบบเอาใจลูกคา เปน สีทีแ่ สดงถงึ ความ
รอ นแรง อนั ตราย เรง ดวน ฉุกเฉนิ ตนื่ เตน ความรัก ความเจ็บปวด ความเผ็ดรอน ความทรงจาํ ความกลา หาญ
ความเปนเจา ของ ทะเยอทะยาน พลงั แหง Sex… สแี หงความกระตือรือรน เรา รอ น รุนแรง สะเทอื นอารมณ
เปนสัญลกั ษณแหง ความรัก ดึงดูด ความสนใจ กรีก - การตอ สูรบราฆา ฟน แอฟรกิ าใต - ความเศรา โศก

รายวิชา การออกแบบและพฒั นาเว็บไซต

22

สนี ้าํ เงิน ใหความหมายของความสงบเงียบ ความสขุ ุม ความมรี าคา ใหอารมณห รหู รามีระดับ
บางครั้งก็ส่ือถงึ ความสุภาพ ความหนักแนน ผูชาย เปน สีที่แสดงถึง ความมัน่ คง ความสมาํ่ เสมอ เสถยี รภาพ
ความแนนอน ความแข็งแรง ความเปน ผูน ํา นาํ้ ความเย็น ความสะอาดสะอาน ความสบาย ความไววางใจ
คลาสสคิ ความรูส กึ ออนไหว หวงอารมณเ ปน ตน จนี – เด็กผหู ญิงตวั เล็ก ๆ อิหราน - การไวทุกข

สเี หลือง ใหอารมณของความสดใส ปลอดโปรง สีเหลืองดึงดูดสายตาไดดีและมองเห็นไดแตไกล
ดังน้ันเราจะเปน ไดวาปายรา นอาหาร จึงมกั มสี ีเหลืองไมวา จะเปนตัวหนังสือหรือแผนพนื้ เพ่อื ดงึ ดูดสายตา
ลกู คาท่เี ดินผา นไปผา นมา เปน สีทีแ่ สดงถึงความมง่ั ค่ัง มั่งมี อบอนุ เปนมิตร สรางสรรค หรอื นักคดิ คน
ประดษิ ฐส ิ่งใหม ๆ อสิ ระ ความเมตตา การมองโลกในแงด ี เปน ตน แตบ างคร้งั อาจใชในความหมายทางดา น
ลบ เชน ความหึงหวง ขี้อิจฉา มีพิรุธ ขส้ี งสัย หลอกหลวง วงการวารสาร – ความไมร ับผิดชอบ
สแี หง ความสุขสดชนื่ รา เริงมีชีวติ ชีวา เปนสีทเี่ ขาไดกับทกุ สี

รายวชิ า การออกแบบและพัฒนาเวบ็ ไซต

23

สีสม ใหความรสู กึ ดึงดดู ทันสมัย สดใส กระฉบั กระเฉง มีพลงั เปน สีทแี่ สดงถึง แรงบันดาลใจเต็ม
เปย ม พลงั ความสาํ คัญ ความอบอนุ ความกรุณาหยิ่งยโส จองหอง มที ิฐิ...

สเี ขยี ว สีเขยี วมาจากสีของตนไม ซงึ่ มาหลากหลายโทนสี แตด วยความท่เี รารับรูวา ตนไมใหความ
สดชืน่ เราเลยอนุมานความหมายสีเขียววา เปน สีท่ีหมายถึงธรรมชาติความเย็นสบาย ความชุมชืน้ ความสบายตา
เปนสที ี่แสดงถงึ ตนไม การเจริญเติบโต สีของตนไม ใบหญา เปนสญั ลักษณของความสงบ เรียบงายความเขม
ของสเี ขยี วใหความหมายถึงความอดุ มสมบูรณ เงิน ความหนุมสาว สง่ิ แวดลอม การผอนคลาย ความเปน
ธรรมชาติ และสีเขียวยงั เปน สีประจําชาติของประเทศไอรแลนด อีกดว ย

รายวชิ า การออกแบบและพฒั นาเว็บไซต

24

สมี วง เปนสที ่ีใหอ ารมณหนักแนน มเี สนห ความลับ ส่ิงที่ปกปด ความเปน เจา นายกษัตริย การฑูต
แฟชัน่ เกย สหรัฐ – ทหารที่ถกู ฆา ลีโอนาโด นาวินซี จิตรกรชอ่ื ดงั – ทาํ ใหเ ขามีพลงั ทางความคิดมากข้ึน
หากนําสีมว งเปนสหี อ งเด็ก จะทําใหเด็กเกิดจินตนาการสแี หง ความลึกลบั ซอนเรน เปน สที ม่ี อี ทิ ธพิ ลตอ
จนิ ตนาการ และความอยากรูอยากเหน็ ของเด็ก เชน เรื่องเทพนิยายตา ง ๆ

สีชมพู ใหความรสู ึกถึงความออ นหวาน นุมนวล ความรัก วัยรุน ผูหญงิ สีท่แี สดงถึง ความเปน
ผหู ญงิ ออนไหว ความรัก ความนุมนวล นารัก วัยหวาน สุภาพออนโยน ทะนุถนอม ขี้อาย

รายวชิ า การออกแบบและพัฒนาเว็บไซต

25

สนี ้ําตาล ใหความหมายถงึ ความสงบ ความเรยี บ ความเปนผูใหญ ความเกาแกโบราณ บางครัง้ เราก็
สื่อถึง ไม แผนไม สที แ่ี สดงถึง ความสมบุกสมบัน ดนิ สนิม ความแหง แลง ความเปน มิตร ความซ่ือสตั ย
การไวใจ นา รําคาญ ทรมาน เหน็ แกตวั แข็งแกรง ...สีสัญลักษณแหง ความรวงโรยเปรยี บเสมือนตนไมมใี บ
รวงหลนเม่ือถงึ อายุขัยเปน สีทีใ่ หความหมายดเู หมอื นธรรมชาติ เชน สนี ้าํ ตาลออนและสีแกนของลายไม
เปน ตน

สีฟา ใหความรสู ึกโปรงโลงสบายตา สแี หงทองฟาและนํ้าทะเล ในบางครงั้ ก็หมายถึงความ
นมุ นวล ความสุขสบาย นา้ํ ทาํ ใหรูส ึกสบายใจ อบอุน มีสฟี าหลายโทน ใหความรสู ึกตางๆกนั เปน สัญลักษณ
ของความสงบ เยือกเย็น มนั่ คง แตเต็มไปดวยพลัง หากเปน สีฟาออ นจะใหความรูสึก สดชื่น สวยงาม
กระฉบั กระเฉงเปนหนุมสาว

สเี งิน สเี งินนนั้ มาจากวสั ดุประเภทมันวาว เชน อะลูมิเนียม ซง่ึ เปน วัสดุใหมท น่ี ิยมนํามาใชในชวงหลัง
ๆ มรี าคาแพง ดงั นน้ั มันจงึ แทนความรสู ึก ทันสมยั และมีคุณคา

รายวิชา การออกแบบและพัฒนาเวบ็ ไซต

26

สที อง อา งองิ มาจากแรทองคํา จึงเปน ตวั แทนของความหมายวาความมคี ณุ คา ความมรี าคาแพง
ความหรูหรา

สีขาว ส่ือถึงความบรสิ ุทธ์ิ ความสะอาด ความเรียบงาย ความโลง ความไมมี เปน สีทีแ่ สดงถึง
ผองใส ความหวัง ความถูกตอ ง ความจรงิ การไวท ุกข ความชวยเหลอื ความเรียบรอย ไรเ ดียงสา เหมอื นกับ
สาํ นวนที่ชอบพดู วา “เด็กท่ีเกิดมาเหมือนผาขาวท่ียังไมร อยแปดเปอ น”

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

27

สเี ทา ใหอารมณเศรา หมน หมอง ไรชีวิตชีวา บางคร้งั สอื่ ถึงคามเปน กลางเปนสที ่ีแสดงถึง ความ
มนั่ คง ปลอดภัย สมา่ํ เสมอ ผูท่ีมีอาํ นาจ บุคลกิ ท่ีแข็งแกรง ความคลาสสิก ความตกตํา่ ความรูสึกหดหู มวั
หมอง

สีดํา มาจากความมืด ความไมเหน็ ซึง่ ซอนความไมรู ความนา กลวั เอาไว และสว นใหญมักจะให
เปน สีแหง ความตาย ลึกลบั ความผิด พลงั แหง ปศาจ สิง่ เรนลับ อํานาจ...ความเขม เปนตน ในความหมายของ
คนยุโรป อเมริกา แทนความเปนผูดี ขรึม ม่ันคง

โปสเตอรห นงั – ออกแบบใหด ูลึกลับ ชวนใหเขา ไปคน หาความจริง

รายวชิ า การออกแบบและพัฒนาเวบ็ ไซต

28

5.1 การเลือกนํ้าหนักสี Choose Value การเลือกนา้ํ หนักสจี ะเปนขน้ั ตอนถัดมาหลังจากเราเลือกสี
ไดแลว นํา้ หนักของสมี ีอิทธิพลตอความมดื สวางในภาพ ซ่งึ ใหอ ารมณของภาพท่แี ตกตา ง กันไป
เรามาดูตัวอยางกนั ดีกวา

งานออกแบบนี้เลือกใช สฟี า ทบ่ี งบอกถึงความโลง ความสบาย ความสขุ
ประกอบกับรูปแผนเสยี ง และปุมควบคุมเสียงท่เี ปนสีฟา ตางน้าํ หนักทําให
รูสึกไดว า เราคงเปน เพลงทน่ี าฟง ฟง แลวมีความสุข

5.2 การเลือกความสดของสี Choose Saturation
การเลือกความสดของสีเปนเรอื งสดุ ทายในการเลือกสเี พอ่ื การออกแบบงานสีที่มีความสดสงู จะให
ความรสู กึ รนุ แรง ตืน่ ตัว สะดุดตา ในขณะทส่ี ที ่ีมีความสดนอ ยหรอื สีหมน จะใหความรูสึกสงบไมโดดเดน
หมนหมอง เศรา ถา สที ี่มีความสดอยูในระดับกลางจะใหความรสู ึกพักผอน สบายตา

รายวชิ า การออกแบบและพฒั นาเว็บไซต

29

6. การวางโครงสี : Colour Schematic

คราวนี้มาถึงเรื่องสาํ คัญที่สุดของการใชสีคือ การนําเอาสไี ปใชในงานออกแบบ หลายคนไมรูจ ะใชสี
อยา งไรดี เลอื กเอาสที ่ีตวั เองชอบปะเขาไปในงาน ผลก็คอื ทําใหงานดี ๆ ของเขาออกมาเสยี หมดดังนั้นจงึ มี
ทฤษฎีของการใชส ี หรือการเลอื กสีมาใชรวมกนั ในภาพ เพอ่ื ใหภาพออกมาดูดี ดูนา พึงพอใจเรยี กวา Colour
Schematic หรือการวางโครงสี (ซ่งึ บางคนก็คุนกบั คําวา การจบั คสู ี การเลือกคสู ี)

6.1 Monochrome หรือ ชุดสแี บบสีเดียว
Monochrome หรือโครงสเี อกรงค คือมเี นือ้ สี Hue เดยี ว แตใหความแตกตางดว ยนาํ้ หนักสVี alue สีเอก
รงคน้ี ใหอารมณ ความรสู ึก สุขุม เรียบรอยเปนสากล ไมฉดู ฉาดสะดุดตา และในดา นการออกแบบเปนการใชคู
สีท่ีงา ยท่สี ุด แลวออกมาดดู ี (เลือกแคสเี ดียวแลวนํามาผสมขาว ผสมดํา หรือปรับคาความสวา ง Brightness เพอ่ื
เปลีย่ นนา้ํ หนักสี Analogus

ตัวอยา งงาน

สเี อกรงคเ ปนสใี หความรูสึก สขุ ุม ไมฉ ดู ฉาด สบายตา

รายวิชา การออกแบบและพัฒนาเวบ็ ไซต

30

6.2 Analogous Color Scheme หรือ ชุดสที ี่คลา ยคลงึ กนั
Analogous หรือโครงสีขางเคียง คือสีทอี่ ยูตดิ กัน อยูขางเคียงกนั ในวงจรสี จะเปนท่ีละ 2 หรือ 3 หรือ 4
สีกไ็ ด แตไมควรมากกวา นเี้ พราสอี าจจะหลุดจากความขา งเคียง หรือหลุดออกจากโครงสนี ี้ได

ลองมาดูตัวอยางภาพแบบโครงสขี า งเคียงกนั ดีกวา

รูปน้ีใชคูสี Analogus โดยเลือกสีแถว ๆ กลุมสีเขียว
6.3 Dyads หรือ ชุดสตี รงขา ม
Dyads หรอื โครงสคี ูตรงขาม Complementary Color Schemeคือสที ีอ่ ยูตรงกนั ขา มกนั ในวงจรสี การ
เลือกใชสีคูตรงขา มจะทาํ ใหง านทีไ่ ดมีความสะดุดตาในการมองแตกต็ องระวงั การใชสีคูตรงขา ม เพราะการ
เลอื กใชสีคตู รงขามดวยกันน้ันถาเราหยบิ สี 2 สที ีต่ รงขา มกันมาใชในพ้นื ทีพ่ อ ๆ กัน งานนนั้ จะดูไมมเี อกภาพ
ซึง่ เปนหลกั สาํ คัญในการทาํ งานศิลปะทางทด่ี ีเราควรแบงพ้นื ทข่ี องสใี นภาพของการใชส ีใดสีหนึ่งมากกวา อีกสี
หนึ่งโดยประมาณมักจะใชส ีหนึ่ง70 % อกี สีหนึง่ 30 % ภาพที่ไดก็จะคงความมีเอกภาพอยู และยงั มีความเดน
สะดดุ ตาไปไดใ นตัว

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

31

ตัวอยางงาน Dyads

ภาพนี้เปน การเลอื กใชส ีคูตรงขาม สม-เขยี ว 70:30
6.4 Triads หรือ ชุดสีตรงขามขา งเคียง Split Complementary Color Scheme

Triads หรือโครงสี 3 สี คือ
1. เปนการใชสี 3 สี ในชว งหางระหวา งสที งั้ 3 เทากัน ถา เราลากเสน ระหวา งสที ง้ั 3 สเี ราจะไดส ามเหลี่ยม
ดา นเทา
2. เปนการใชส ี 3 สี ในชวงหางระหวา งสีท้ัง 3 ไมเทากนั คือมีชวงหาง 2 ชว งเทา กัน แตกบั อีกอนั หนึ่งชว ง
หา งจะยาวกวา ถา ลากเสนระหวา งสแี ลวจะไดสามเหลีย่ มหนาจ่วั
ตัวอยาง

รายวิชา การออกแบบและพฒั นาเวบ็ ไซต

32

ทําใหส รา งความหลากหลายใหก ับสเี หลืองทอ่ี ยูตรงขามสีมวง

6.5 Tetrads หรือ ชุดสีตรงขามขางเคียงทงั้ 2 ดาน Double Split Complementary Color Scheme

Tetrads หรอื โครงสี 4 สี คือ
1. การใชส ีในวงจรสี 4 สี โดยเลือกสีทม่ี ีชวงหางระหวา งสีเทา กนั หมดกลา วคือ ถาเราลากเสนเชอ่ื มสีทั้ง 4
สีแลว เราจะไดส เี่ หลี่ยมจัตุรัส
2. การใชส ีในวงจรสี 4 สี โดยเลือกสที ่มี ีชวงหางระหวา งสีไมเทากันโดยชว งหา งของ 2 สเี ปน ชวงส้นั และ
อกี 2 สเี ปน ชว งยาว กลาวคือถา เราลากเสนเชอ่ื มสีท้ัง 4 สแี ลว เราจะไดสี่เหลี่ยมผืนผา
ตัวอยาง

จากภาพการใชสีตรงขา มขางเคียงทั้งสองดา นทาํ ให
ภาพชว ยมีสีสนั ที่สะดุดตา

6.6 ชุดสีรอน (Warm Color Scheme) หรอื สีอุน (Warm Colors)

รายวชิ า การออกแบบและพฒั นาเวบ็ ไซต

33

ชุดสีรอน (Warm Color Scheme) หรอื สีอนุ (Warm Colors)การนาํ เอาสที อี่ ยูในโทนรอ นมาใชก บั
ภาพ เปน การใชสีครง่ึ หน่งึ ของวงลอ ตงั้ แตส ีชมพูถึงสีเขียวท้ังหมด มี 6 สีที่จดั อยใู นโทนรอ น ทาํ ใหภาพมี
ความรูสกึ ดงึ ดดู เราความสนใจ มีชีวิตชีวา กาวรา ว มีอทิ ธพิ ลตอการดงึ ดูดและกระตนุ อารมณไดมากมายกวา
โทนสอี ่ืน ๆ สเี หลา นจี้ ะใชมากกบั งานประเภทหวั หนังสอื นิตยสาร แคตตาลอค ปายโฆษณาตาง ๆ
ซึง่ กระตุนความสนใจตอผูพบเห็นไดเร็ว สีโทนรอน คือ สีท่ใี หความหมายรื่นเริง สดชื่น ฉดู ฉาด บาดอารมณ
ตัวอยาง

การใชโทนสรี อนรวมกับสีดําใหค วามรูสึกทาทายและนา สนใจ
6.7 ชุดสเี ยน็ Cool Color Scheme

รายวิชา การออกแบบและพฒั นาเวบ็ ไซต

34

การใชสีโทนเย็น หรือ Cool Color Scheme เปน การนําสโี ทนเยน็ มาใชกบั ภาพโดยใชครึ่งที่เหลือ
ตงั้ แตสีมวงถงึ สเี ขียว ทั้งหมด 6 สี ทําใหเ กิดความรูสึกสบายตา สดช่ืน ผอนคลาย รสู กึ เยน็ สบาย
การใชโทนสเี ยน็ ทีป่ ระกอบดวยสนี ํา้ เงิน, น้ําเงนิ ออ น, ฟาและเขียว ใหบรรยากาศคลายทะเล รสู ึกเยน็ สบาย

รายวิชา การออกแบบและพฒั นาเว็บไซต