จานสีของเว็บ

จานสีของเว็บคืออะไร?

สีมีความสำคัญมากสำหรับนักออกแบบเว็บไซต์และนักออกแบบกราฟิก นักออกแบบอธิบายสีที่เราอธิบายว่าเป็นสีน้ำเงิน แดง และเขียวในชีวิตประจำวันด้วยรหัส เช่น #fff002, #426215 ไม่ว่าคุณจะดำเนินโครงการเขียนโค้ดประเภทใด คุณก็น่าจะเริ่มทำงานกับสีได้ในบางจุด ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณเรียนรู้การเขียนโค้ดโดยใช้ HTML อย่างที่หลายๆ คนทำในการออกแบบหน้าเว็บ

รหัส Hex หมายถึงอะไรในสี?

รหัสฐานสิบหกเป็นวิธีการแสดงสีในรูปแบบ RGB โดยการรวมค่าสามค่าเข้าด้วยกัน รหัสสีเหล่านี้เป็นส่วนสำคัญของ HTML สำหรับการออกแบบเว็บและยังคงเป็นวิธีที่สำคัญในการแสดงรูปแบบสีแบบดิจิทัล

รหัสสีฐานสิบหกเริ่มต้นด้วยเครื่องหมายปอนด์หรือแฮชแท็ก (#) ตามด้วยตัวอักษรหรือตัวเลขหกตัว ตัวอักษร/ตัวเลขสองตัวแรกตรงกับสีแดง สองตัวถัดไปเป็นสีเขียว และสองตัวสุดท้ายเป็นสีน้ำเงิน ค่าสีถูกกำหนดเป็นค่าระหว่าง 00 ถึง FF

ตัวเลขจะใช้เมื่อค่าเป็น 1-9 ตัวอักษรจะใช้เมื่อค่ามากกว่า 9 เช่น:

• A = 10
• ข = 11
• C = 12
• D = 13
• E = 14
• F = 15

รหัสสีฐานสิบหกและเทียบเท่า RGB

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

• สีแดง = #FF0000 = RGB (255, 0, 0)
• สีเขียว = #008000 = RGB (1, 128, 0)v
• สีน้ำเงิน = #0000FF = RGB (0, 0, 255)
• สีขาว = #FFFFFF = RGB (255,255,255)
• งาช้าง = #FFFFF0 = RGB (255, 255, 240)
• สีดำ = #000000 = RGB (0, 0, 0)
• สีเทา = #808080 = RGB (128, 128, 128)
• เงิน = #C0C0C0 = RGB (192, 192, 192)
• สีเหลือง = #FFFF00 = RGB (255, 255, 0)
• สีม่วง = #800080 = RGB (128, 0, 128)
• สีส้ม = #FFA500 = RGB (255, 165, 0)
• เบอร์กันดี = #80000 = RGB (128, 0, 0)
• สีแดงม่วง = #FF00FF = RGB (255, 0, 255)
• มะนาว = #00FF00 = RGB (0, 255, 0)
• อควา = #00FFFF = RGB (0, 255, 255)
• น้าน = #008080 = RGB (0, 128, 128)
• มะกอก = #808000 = RGB (128, 128, 0)
• น้ำเงิน = #000080 = RGB (0, 0, 128)

เหตุใดสีของเว็บไซต์จึงมีความสำคัญ

คุณอาจคิดว่าคุณไม่ได้รับผลกระทบจากสี แต่จากการศึกษาพบว่า 85% ของคนบอกว่าสีมีผลกระทบอย่างมากต่อผลิตภัณฑ์ที่พวกเขาซื้อ เขายังกล่าวอีกว่าเมื่อบางบริษัทเปลี่ยนสีปุ่ม พวกเขาสังเกตเห็นการเพิ่มขึ้นหรือลดลงอย่างรวดเร็วของ Conversion

ตัวอย่างเช่น Beamax ซึ่งเป็นบริษัทที่ผลิตหน้าจอการฉายภาพ สังเกตเห็นว่ามีการคลิกลิงก์สีแดงเพิ่มขึ้น 53.1% เมื่อเทียบกับลิงก์สีน้ำเงิน

สีมีผลอย่างมากไม่เพียงแค่การคลิกแต่ยังส่งผลต่อการจดจำแบรนด์ด้วย การศึกษาผลกระทบทางจิตของสีพบว่าสีเพิ่มการจดจำแบรนด์โดยเฉลี่ย 80% ตัวอย่างเช่น เมื่อคุณนึกถึงโคคา-โคลา คุณอาจจะนึกภาพกระป๋องสีแดงสดใส

วิธีการเลือกชุดสีสำหรับเว็บไซต์?

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

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

ตอนนี้ “จะเลือกชุดสีสำหรับเว็บไซต์และเว็บแอปพลิเคชันได้อย่างไร” ลองดูทีละขั้นตอน:

1. เลือกสีหลักของคุณ

วิธีที่ดีที่สุดในการตัดสินใจเลือกสีหลักคือการตรวจสอบสีที่เข้ากับอารมณ์ของผลิตภัณฑ์หรือบริการของคุณ

ด้านล่างนี้เราได้แสดงตัวอย่างบางส่วนสำหรับคุณ:

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

2. เลือกสีเพิ่มเติมของคุณ

เลือกสีเพิ่มเติมหนึ่งหรือสองสีที่เสริมสีหลักของคุณ สีเหล่านี้ควรเป็นสีที่ทำให้สีหลักของคุณ "สวยงาม"

3. เลือกสีพื้นหลัง

เลือกสีพื้นหลังที่จะ "รุนแรง" น้อยกว่าสีหลักของคุณ

4. เลือกสีแบบอักษร

เลือกสีสำหรับข้อความบนเว็บไซต์ของคุณ โปรดทราบว่าแบบอักษรสีดำทึบนั้นหายากและไม่แนะนำ

จานสีเว็บที่ดีที่สุดสำหรับนักออกแบบ

หากคุณไม่พบสีที่ต้องการในคอลเลกชั่นจานสีของเว็บ Softmedal คุณสามารถดูไซต์สีอื่นด้านล่าง:

การเลือกสีเป็นกระบวนการที่ยาวนาน และมักต้องอาศัยการปรับอย่างละเอียดถี่ถ้วนเพื่อหาสีที่เหมาะสม ณ จุดนี้ คุณสามารถประหยัดเวลาได้โดยใช้เว็บแอปพลิเคชันฟรี 100% ที่สร้างชุดสีที่เกี่ยวข้องตั้งแต่เริ่มต้น

1. Paletton

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

2. ปลอดภัยต่อสี

หาก WCAG เป็นปัญหาในกระบวนการออกแบบของคุณ Color Safe เป็นเครื่องมือที่ดีที่สุดที่จะใช้ ด้วยเว็บแอปพลิเคชันนี้ คุณสามารถสร้างชุดสีที่ผสมผสานอย่างลงตัวและให้คอนทราสต์ที่เข้มข้นตามแนวทางของ WCAG

ด้วยการใช้เว็บแอป Color Safe คุณมั่นใจได้ว่าไซต์ของคุณสอดคล้องกับหลักเกณฑ์ WCAG และทุกคนสามารถเข้าถึงได้อย่างเต็มที่

3. Adobe Color CC

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

4. บรรยากาศ

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

5. 0to255

0to255 ไม่ใช่โปรแกรมสร้างชุดสีอย่างแน่นอน แต่สามารถช่วยคุณปรับแต่งชุดสีที่มีอยู่ได้ เว็บแอปจะแสดงเฉดสีต่างๆ ทั้งหมดเพื่อให้คุณสามารถผสมและจับคู่สีได้ทันที

หากคุณพบว่ามันยากในการสร้างชุดสีที่ใช้งานได้ คุณสามารถตรวจสอบบางแอปพลิเคชันข้างต้นได้

จานสีเว็บที่ดีที่สุด

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

1. โอโดพอด

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

2. ดวงตาของโทริ

Tori's Eye เป็นตัวอย่างที่ดีของโทนสีโมโนโครม ที่นี่ คุณจะเห็นเอฟเฟกต์ของจานสีที่เรียบง่ายแต่ทรงพลังซึ่งมีศูนย์กลางอยู่ที่เฉดสีเขียว โครงร่างสีนี้มักจะดึงออกมาได้ง่าย เนื่องจากเฉดสีหนึ่งสีหนึ่งจะใช้ได้กับเฉดสีอื่นที่มีสีเดียวกันเกือบทุกครั้ง

3. ชุดเอาตัวรอดของชีส

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

4. Ahrefs

Ahrefs เป็นตัวอย่างของเว็บไซต์ที่ใช้จานสีได้อย่างอิสระ สีน้ำเงินเข้มทำหน้าที่เป็นสีหลัก แต่มีรูปแบบต่างๆ ทั่วทั้งไซต์ เช่นเดียวกับสีส้ม สีชมพู และสีเขียวขุ่น

คำถามที่พบบ่อยเกี่ยวกับสี

1. สีอะไรดีที่สุดสำหรับเว็บไซต์?

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

2. เว็บไซต์ควรมีกี่สี?

พิจารณาว่า 51% ของแบรนด์มีโลโก้ขาวดำ 39% ใช้สองสี และมีเพียง 19% ของบริษัทที่ต้องการโลโก้แบบสีเต็มรูปแบบ จากที่นี่ คุณจะเห็นว่าเว็บไซต์ที่มี 1, 2 และ 3 สีเหมาะสมกว่าการพยายามสร้างเว็บไซต์ที่มีสีรุ้ง อย่างไรก็ตาม แบรนด์ต่างๆ เช่น Microsoft และ Google เชื่อในข้อดีของการทำงานกับสีที่มากขึ้น เนื่องจากพวกเขาใช้สีทึบอย่างน้อย 4 สีในการออกแบบ

3. ฉันควรใช้สีที่ไหน?

ควรใช้สีที่สะดุดตาเท่าที่จำเป็น มิฉะนั้น สีจะสูญเสียเอฟเฟกต์ไป เอฟเฟกต์นี้ต้องอยู่ในจุดแปลง เช่น ปุ่ม "ซื้อเลย"