Support
Web Programming
(083) 0466100
Your shopping cart
ดูตะกร้าสินค้าของคุณ
ไม่มีสินค้าในตะกร้าของคุณ

เทคนิคการเลือกสีสำหรับเว็บไซต์

thanakrit | 02-08-2553 | เปิดดู 28978 | ความคิดเห็น 42

 

จิตวิทยาเกี่ยวกับสี

สีนั้นมีความสำคัญอย่างยิ่งในการออกแบบเว็บไซต์ การเลือกสีให้เข้ากับเนื้อหาของเว็บไซต์ จะทำให้เว็บไซต์มีความน่าเชื่อถือยิ่งขึ้น และยังส่งผลอย่างมากกับความสวยงามของเว็บไซต์ 

ความรู้สึกที่คนส่วนใหญ่มีต่อสีต่างๆ

 สีฟ้า

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

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

 สีเขียว

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

 สีเหลือง

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

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

 สีแดง

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

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

 สีม่วง

    ให้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ ซ่อนเร้น มีอำนาจ มีพลังแฝงอยู่ ความรัก ความเศร้า ความผิดหวัง ความสงบ ความสูงศักดิ์ 

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

 สีส้ม

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

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

 สีน้ำตาล

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

 สีเทา

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

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

 สีขาว

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

    ให้ความรู้สึกรื่นเริง โดยเฉพาะเมื่อใช้กับสีแดง เหลือง และส้ม

 

 

ทฤษฎีสี

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

    ต้องการออกแบบให้เว็บไซต์รู้สึกตัดกันโดยสิ้นเชิง เราอาจใช้ชุดสี 4 สีที่ทำมุมกัน 90 องศา เช่นดังตัวอย่างถ้าเราเลือกชุดสี 1 , 6 , 11 , 16 สีที่ได้จะตัดกันชัดเจน 

    ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็อาจเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์ 8 , 9 , 10 , 11 ก็จะได้สีในโทนสีเขียวสว่าง 



ด้านล่างเป็นเบอร์สีที่ใช้แบ่งตามมาตราฐานการอ้างอิงของสี 

Hexadecimal - Browser Colour Codes 

1 - #FF0000 6 - #FFFF00 11 - #009900 16 - #0000FF 

2 - #FF3300 7 - #CCFF00 12 - #006633 17 - #3300CC 

3 - #FF6600 8 - #99CC00 13 - #006666 18 - #660099 

4 - #FF9900 9 - #66CC00 14 - #003399 19 - #990066 

5 - #FFCC00 10 - #339900 15 - #0033CC 20 - #CC0033 

Red, Green and Blue Values 

1 - R:255 G:000 B:000 

2 - R:255 G:051 B:000 

3 - R:255 G:102 B:000 

4 - R:255 G:153 B:000 

5 - R:255 G:204 B:000 

6 - R:255 G:255 B:000 

7 - R:204 G:255 B:000 

8 - R:153 G:204 B:000 

9 - R:102 G:204 B:000 

10 - R:051 G:204 B:000 

12 - R:000 G:102 B:051 

13 - R:000 G:102 B:102 

14 - R:000 G:051 B:153 

15 - R:000 G:051 B:204 

16 - R:000 G:000 B:255 

17 - R:051 G:000 B:204 

11 - R:000 G:153 B:000 

18 - R:102 G:000 B:153 

19 - R:153 G:000 B:102 

20 - R:204 G:00 B:051 

อ้างอิงจากเว็บไซต์ http://www.webstyleguide.com/

อ้างอิงจากเว็บไซต์ http://www.hellomyweb.com/

ความคิดเห็น

วันที่: 13-01-2025

แสดงความคิดเห็น
All Comments: 42 Pages: 1/3
guest
mongrating
- Guest -

17/09/2010 10:30 Post : 17/09/2010 10:30

การเลือกที่จะสีต้องมีหลักเกณฑ์ ซึ่งจะทำให้งานที่ออกมาดูเด่นและได้อารมณ์ในการดู

Quote

guest
วีระศิลป์
- Guest -

01/12/2010 15:13 Post : 01/12/2010 15:13

ขอบคณมากครับ

Quote

guest
Nanzy
- Guest -

10/01/2011 13:14 Post : 10/01/2011 13:14

ขอบคุณค่ะ

Quote

guest
rong
- Guest -

15/01/2011 22:33 Post : 15/01/2011 22:33

 ดูแล้วอยากทดลองทำกราพฟิกใหม่ๆ

 

Quote

guest
ชัย
- Guest -

09/04/2011 11:24 Post : 09/04/2011 11:24

 ขอบคุณครับ

 

Quote

guest
ว่าที่พันตรีนิวัฒน์ มาตย์นอก
- Guest -

15/06/2011 04:48 Post : 15/06/2011 04:48

ขอขอบคุณมากที่ได้มีโอกาสทบทวนความรู้อีกครั้ง

Quote

guest
อ๋อ ณัฐกานต์
- Guest -

25/07/2011 22:20 Post : 25/07/2011 22:20

ขอบคุนคับ

Quote

guest
nuttichar
- Guest -

14/10/2011 14:31 Post : 14/10/2011 14:31

  พี่เมย์ ขอบคุณ  อ. และทางทีมงาน น้องพิมพ์มาก ที่ส่ง VDO มาให้ดูอีกรอบ เพราะพี่ดูไม่จบ เมื่อวันก่อน  ง่วงนอนก่อน และก็ฝน

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

ตลาด การขายมาตลอด  พี่่ไม่ถนัด และหัวไม่คลิก เลยไอ้การสร้าง web เนี๊ยะ  เพราะอายุก็ปาไปเลข 40 กว่าแล้วหัวไม่ทันเหมือนเด็ก มัน

ปวดหัวเลย  ตอนเรียน พี่อยากทำได้น่ะเพราะมันมีประโยชน์มาก ถ้าทำได้ ตามที่สอน นี้ขนาดสอนขั้นพื้นฐาน พี่หัว ยังไม่กระดิกเลยอ่ะ  แล้

ขั้นสูงจะเรียนได้เหรอ ไม่ได้เสียดายเงินค่าเรียน แต่มันเครียด เวลาที่่พี่เรียนแล้วไม่รู้เรื่อง ไม่ใช้ อาจารย์สอนไม่ดี แต่พี่ไม่มีพื้นฐานเลย

บอกได้เลย ว่าโง่ เลยแหละพี่เนี๊ยะ แต่ถ้าให้พี่พูดเรื่องสินค้า ประชาสัมพันธ์ นี้น่ะ งานถนัดพี่เลย น้องพิมพ์มีวิธีช่วยพี่วิธีใหนบ้าง  ขอบคุณค่ะ

Quote

guest
suwit
- Guest -

18/01/2012 12:50 Post : 18/01/2012 12:50

 

นวัตกรรมใหม่ของแป้งสูตรพิเศษ ด้วยสูตรของ wonder powder ที่ผสานคุณค่าของ nano zinc oxide (coat) พร้อมสารสกัดจากธรรมชาติบริสุทธิ์ ที่มีคุณสมบัติในการฝาดสมานผิวได้อย่างมีประสิทธิภาพ เหมาะสำหรับผู้ที่มีปัญหาบาดแผลได้ง่าย แผลน้ำกัดเท้า แผลเรื้อรัง ผิวหนังแพ้ง่าย ผิวหนังอักเสบ ที่มักพบในผู้สูงอายุ พร้อมทั้งช่วยลดและป้องกันความอับชื้นของผิว

จำหน่ายในราคากระปุกละ 185 บาท   จัดสั่งฟรีทั่วประเทศ (สั่งซื้อตั้งแต่ 1 โหลขึ้นไป)

สนใจสั่งซื้อหรือสอบถามข้อมูลเพิ่มเติมได้ที่

Tel : 086-0064287 , 081-9848754, 085-7227226

Email                                     cs.herborigin@gmail.com

Quote

guest
3m vhb
- Guest -

14/07/2023 02:28 Post : 14/07/2023 02:28

 UK supplier of ALL Single & Double Sided Self Adhesive Tapes 3m vhb 

 
 

Quote

guest
song codes
- Guest -

13/08/2023 01:23 Post : 13/08/2023 01:23

 Our Roblox lists includes pop, rock, rap, kpop, remixes, TikTok viral sounds, cartoon songs, game songs, and much more. We have more that 10.000 Working Roblox song IDs listed. Please use the ‘Search Function’ to find your favorite songs and artists. song codes

 
 

Quote

guest
chocolate factory equipment
- Guest -

14/08/2023 01:11 Post : 14/08/2023 01:11

 Nicely priced table top confectionery depositor with heated pistons dramatically increase chocolate molding and Truffle making production. Designed for filling polycarbonate moulds or chocolate shells with fluid ganache, nougat, couverture or liquor. chocolate factory equipment

 
 

Quote

guest
Marina View Residences
- Guest -

28/08/2023 15:43 Post : 28/08/2023 15:43

 A home is much more than just four walls and a roof. It kindles a range of emotions and thoughts in us. To some, it is a sense of security; to some, it is about comfort and to others, it is a symbol of status and accomplishment.

 

Quote

guest
Parade Float Skirting Diy Suppliers
- Guest -

04/09/2023 20:50 Post : 04/09/2023 20:50

 To make your project easier and easier is our service concept. We are all with passion for what we do, and desire to try new things, expect to work with you. Parade Float Skirting Diy Suppliers

 
 

Quote

guest
hair transplant cost London
- Guest -

06/09/2023 13:23 Post : 06/09/2023 13:23

 Capital Hair Restoration provide FUE Hair Transplant procedures in the UK and In Europe and we highly recommend a free consultation to discuss exactly what can be achieved for you with this treatment option. hair transplant cost London

 
 

Quote

1 | 2 | 3