TIP Color wheel วงล้อสี - โค้ดสี โทนสี เลือกสีอย่างไรให้ชวนมอง และกลมกลืน

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
worachat
PHP Hero Member
PHP Hero Member
Posts: 179
Joined: 23/05/2016 9:55 am

TIP Color wheel วงล้อสี - โค้ดสี โทนสี เลือกสีอย่างไรให้ชวนมอง และกลมกลืน

Postby worachat » 31/05/2016 10:56 am

TIP Color wheel วงล้อสี - โค้ดสี โทนสี -เลือกสีอย่างไรให้ชวนมอง

การที่เราจะสร้างเว็บไซต์ในแต่ละครั้งเราต้องคำนึงถึง เนื้อหา รูปภาพ พื้นที่ และที่จะกล่าวถึงนั้นก็คือ สี หรือสีพื้นนั้นเอง ครับ บล็อกนี้ผมจะมาพูดถึง วงล้อสี (Color wheel)
9.png
9.png (78.34 KiB) Viewed 7865 times

วงจรสี คือ สีที่เกิดจากการผสมกันเป็นคู่ เริ่มตั้งแต่ แม่สี 3 สี แล้วเกิดเป็นสีใหม่ขึ้นมา จนครบวงจร จะได้สีทั้งหมด 12 สี ซึ่งแบ่งสีเป็น 3 ขั้นคือ
1.1 สีขั้นที่ 1 (Primary Colours) คือ แม่สี 3 สี ได้แก่ สีแดง เหลือง และน้ำเงิน
1.2 สีขั้นที่ 2 (Secondary Colours) คือ สีที่เกิดจากการผสมกันเป็นคู่ๆ ระหว่างแม่สี 3 สี จะ
ได้สีเพิ่มขึ้นอีก 3สี ได้แก่ สีม่วง สีเขียว และสีส้ม
1.3 สีขั้นที่ 3 (Tertiary Colours) คือ สีที่เกิดจากการผสมกันเป็นคู่ๆ ระหว่างแม่สี 3 สี กับสีขั้นที่ 2 จะได้สีเพิ่มขึ้นอีก 6 สี ได้แก่ สีม่วงแดงเข้ม สีแดงสด สีเหลืองอำพัน สีโศก สีเขียวหัวเป็ด สีม่วงน้ำเงิน
10.png
10.png (52.22 KiB) Viewed 7865 times

1.4 สีกลาง (Neutral Colour) คือ สีที่เกิดการผสมสีทุกสี ในวงจรสี หรือ แม่สี 3สี ผสมกัน จะได้สีเทาแก่
สีทั้ง 3ขั้น เมื่อนำมาจัดอยู่เป็นวงจรจะได้ลักษณะเป็นวงล้อสี
11.png
11.png (34.36 KiB) Viewed 7865 times

เทคนิคพื้นฐานสำหรับการสร้างรูปแบบสี
1. Monochromatic คือ สีพื้นฐานสุดๆ ในงานออกแบบ ใช้งานง่ายเพราะมีสีหลักแค่สีเดียว
2. Analogous คือ Analogous หรือสามสีเรียงกันเป็นโทนสีที่ใช้สีถัดไปในวงล้อสี สีชุดนี้สามารถสร้างงานออกแบบที่น่าสนใจได้แบบง่ายดาย
3. Complementary คือ เป็นวิธีเลือกใช้สีคู่ตรงข้ามสร้างความโดนเด่นกระตุ้นอารมณ์ของผู้ชม
4. Triadic คือ เป็นการเลือกใช้สีแบบสมดุลใช้รูปสามเหลี่ยมในวงล้อสี
5. Split-complementary คือ สีแบบ Split-complementary เป็นสีที่ดูพื้นฐานคือใช้คู่ตรงข้ามแต่ก็เพิ่มความโดดเด่นขึ้นมาเพราะเพิ่มสีตัวถัดไปเข้ามาด้วยจึงเพิ่มความหลากหลายให้กับงานมากขึ้น ช่วยเพิ่มความคิดสร้างสรรค์ให้กับงานมีความยืดหยุ่นสูง
6. Rectangular Tetradic คือ เป็นอีกหนึ่งโทนสีที่เพิ่มความซับซ้อนให้มากขึ้น แต่ก็เพื่อการใช้งานที่หลากหลายขึ้น ซึ่งงานออกแบบจะออกมาดูดีเลยละ

เว็บไชต์ในการสร้างสี
Color Calculator
color.adobe.com

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

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

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

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

สีม่วง ให้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ ซ่อนเร้น มีอำนาจ มีพลังแฝงอยู่ ความรัก ความเศร้า ความผิดหวัง ความสงบ ความสูงศักดิ์
เป็นสีที่ปลอบโยน และช่วยลดความเครียด แต่เดิมสีม่วงได้มาจากสัตว์มีกระดอง,เปลือก ในทะเลเมดิเตอร์เรเนียน มีชื่อว่า Purpura จึงได้ชื่อภาษาอังกฤษว่า Purple

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

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

สีเทา ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ ความเงียบ สุภาพ สุขุม ถ่อมตน

สีนี้มีข้อดีคือทำให้เย็น แต่สร้างความสร้างความรู้สึกหม่นหมองได้ ควรใช้ร่วมกับสีที่มีชีวิต โทนสว่างอย่างน้อยหนึ่งสี

สีขาว ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดีงาม

vbvbnet
PHP Jr. Member
PHP Jr. Member
Posts: 11
Joined: 01/03/2016 10:30 am

Re: TIP Color wheel วงล้อสี

Postby vbvbnet » 31/05/2016 2:12 pm

Thankkkkk

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 21835
Joined: 22/09/2008 6:18 pm
Contact:

Re: TIP Color wheel วงล้อสี

Postby mindphp » 10/07/2019 4:23 pm

ดูเพิ่มเติม

อิทธิพลของสีต่ออารมณ์ การตัดสินใจของมนุษย์ และการผลิตสื่อธุรกิจออนไลน์ได้อย่างไร
viewtopic.php?f=75&t=36302
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: viewforum.php?f=29
รับอบรม และพัฒนาระบบ: viewtopic.php?f=6&t=2042


Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 15 guests