การใช้ Paletton เพื่อช่วยเลือกจานสีของเว็บไซต์ WordPress ของคุณ

เผยแพร่แล้ว: 2020-07-31

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

ระหว่างตัวเลือกทั้งหมดที่มีทางออนไลน์ Paletton เป็นหนึ่งในรายการโปรดเนื่องจากคุณลักษณะตัวอย่างสด แอปยังไม่ได้รับการอัปเดตในช่วงสองสามปี แต่โชคดีที่ยังคงใช้งานได้ดีกับสิ่งที่คุณต้องการ คุณจะพบแอปที่ Paletton.com ละเว้นโฆษณา Google ทั้งหมดและคุณก็พร้อมแล้ว

ทำไมการเลือกสีที่เหมาะสมกับเว็บไซต์ของคุณจึงสำคัญ

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

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

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

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

จานสีทั้งหมดเริ่มต้นด้วยสีพื้นฐาน

สำหรับทุกจานสีที่คุณสร้างบน Paletton คุณจะต้องใช้สีพื้นฐานเพื่อใช้งาน แต่คุณจะรู้ได้อย่างไรว่าควรใช้สีพื้นฐานอะไร?

ดูเนื้อหาที่ลูกค้ามอบให้คุณ การสร้างแบรนด์ของพวกเขา และรูปภาพใดๆ ที่คุณให้มา

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

เมื่อคุณสร้างจานสีบน Paletton คุณสามารถเลือกสีพื้นฐานที่มองเห็นได้หรือรหัสฐานสิบหกในแท็บฐานสิบหกสีพื้นฐาน

ทำความรู้จัก UI ของแอป Paletton

ตอนนี้ได้เวลาเริ่มสร้างจานสีแล้ว เรามาดูกันว่าการตั้งค่าทั้งหมดเป็นอย่างไร แอพนี้มีสองส่วนหลัก ด้านซ้ายเป็นการเลือกสีและด้านขวาเป็นการดูตัวอย่าง

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

ด้านซ้าย – ตัวเลือกสี

สิ่งแรกที่คุณสังเกตเห็นเมื่อเข้าสู่ Paletton App คือวงล้อสี มุมมองเริ่มต้นมีสีพื้นฐานเป็นสีแดงกลางในจานสีเดียว (1 สี)

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

การผสมสี

เหนือวงกลมสีมีปุ่มผสมห้าปุ่ม ตัวเลือกจากซ้ายไปขวา:

  • สีเดียว – 1 สี + อุปกรณ์เสริมเพิ่มเติม
  • ติดกัน – 3 สี + อุปกรณ์เสริมเพิ่มเติม
  • Triadic – 3 สี + อุปกรณ์เสริมเพิ่มเติม
  • Tetrad – 4 สี
  • ฟรีสไตล์ – 4 สี

สีฐาน

ในการเปลี่ยนสีฐาน คุณสามารถทำอย่างใดอย่างหนึ่งต่อไปนี้:

  1. ลากจุดสีหลักที่ใดก็ได้ในวงกลมด้านนอก
  2. ลากจุดตรงกลางภายในวงกลมเพื่อเลือกเฉดสีหลักที่เลือกไว้ในวงกลมด้านนอก
  3. ป้อนรหัสฐานสิบหกที่แท็บด้านล่างซ้าย
  4. หากต้องการเปลี่ยนสีรองเป็นสีพื้นฐาน คุณจะต้องทำที่ด้านแสดงตัวอย่างของหน้าจอ เพิ่มเติมในภายหลัง

เมื่อคุณลากจุดสีพื้นฐานภายในวงกลม จุดอื่นๆ ทั้งหมดจะเคลื่อนที่ไปพร้อมกับการแสดงเฉดสีต่างๆ

คุณยังสามารถเลือกสีแต่ละสีได้โดยคลิก shift ก่อนลาก

ปรับจูน

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

  • เว้
  • ความอิ่มตัว
  • ความสว่าง
  • ตัดกัน

เพียงคลิกที่ปุ่มเพื่อเพิ่มหรือลดเอฟเฟกต์แต่ละอย่าง 1, 5 หรือ 10 องศา

ที่ตั้งไว้ล่วงหน้าตามสีฐาน

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

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

ด้านขวา – The Palette Previews

ทางด้านขวาของ Paletton เป็นที่ที่คุณดูตัวอย่างสดทั้งหมด พื้นที่หลักถูกแยกออกเป็นสี่ส่วนเพื่อให้สามารถมองเห็นจานสีเดียวหรือสีอื่นๆ ที่มีสีสอง สาม หรือสี่สี ส่วนสีแต่ละส่วนจะแสดงสีพื้นฐานในพื้นที่ขนาดใหญ่และสี่รูปแบบรอบๆ

ในภาพด้านล่าง คุณจะเห็นว่าเครื่องมือเลือกสีและการแสดงตัวอย่างทำงานร่วมกันอย่างไร

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

การเปลี่ยนสีฐาน

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

การใช้คุณสมบัติการจำลองการมองเห็นของ Paletton

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

  • การจำลองตาบอดสี
  • Desaturate
  • การจำลองแกมมา
  • สีของเว็บ (จานสี 216 แบบเดิม)

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

ดูตัวอย่างสดของจานสีของคุณ

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

  • หน้าขาว
  • หน้ามืด
  • การออกแบบในเชิงบวก
  • การออกแบบเชิงลบ

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

นอกจากนี้ ในขั้นตอนนี้ คุณสามารถสุ่มจานสีของคุณได้หลายวิธี:

  • สีคล้ายกันไม่เหมือนสไตล์
  • ไม่เหมือน
  • คล้ายกัน
  • ต่างจากสี สไตล์คล้ายกัน

ตรวจสอบให้แน่ใจว่าได้รับสำเนาของจานสีของคุณก่อนที่จะสุ่ม! ไม่มีทางกลับไป

การส่งออกและการคัดลอกจานสี

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

มีหลายวิธีในการคัดลอกหรือส่งออกจานสีของคุณ ที่มุมขวาบนของหน้าต่างจะมีปุ่มที่เขียนว่า 'share palette' แต่ดูเหมือนว่าจะพังไปสักพักแล้ว เพียงเพิกเฉยปุ่มนั้นเพราะมันไม่ทำอะไรเลย

คัดลอกจานสีของคุณด้วยวิธีอื่นๆ เหล่านี้:

  • คัดลอกรหัสฐานสิบหกสำหรับแต่ละสีโดยวางเมาส์ไว้เพื่อดูและคลิกเพื่อเปิดหน้าต่างข้อมูล
  • คลิกที่ 'TABLES/EXPORT' เพื่อดูจานสีในรูปแบบต่างๆ
  • ภายในแท็บ TABLES/EXPORT' ให้ส่งออกในรูปแบบใดๆ เหล่านี้:
    • รายการสี
      • HTML
      • น้อย
      • CSS
      • SASS
      • XML
      • ข้อความ
    • ตัวอย่างสี
      • PNG รูปภาพ
      • ACO (โฟโต้ช็อป)
      • GPL (กิมพ์)
  • คุณยังสามารถดูการผสมสีในจานสีที่เลือกได้

การเพิ่มสีสันให้กับเว็บไซต์ WordPress ของคุณ

ตอนนี้ได้เวลาเพิ่มสีสันให้กับไซต์ของคุณแล้ว!

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

หากต้องการเพิ่มสีให้กับธีม Divi ให้ไปที่ตัวเลือกธีม แล้วป้อนแต่ละสีด้วยรหัสฐานสิบหกที่เกี่ยวข้อง

นั่นคือการห่อสี!

เราได้ทบทวนขั้นตอนในการสร้างจานสีด้วย Paletton เรียบร้อยแล้ว ฟีเจอร์พื้นฐานของแอปนี้คล้ายกับแอปจานสีอื่นๆ แต่สิ่งที่ทำให้โดดเด่นจากที่เหลือคือความสามารถในการดูสีจากตัวอย่างสดสำหรับทั้งการออกแบบเว็บและการออกแบบทางศิลปะอื่นๆ น่าเสียดายที่แอปไม่ได้รับการอัพเดตมานานกว่า 6 ปี โชคดีที่ดูเหมือนว่าจะมีชีวิตรอดผ่านโฆษณา Google เหล่านั้น!

แอพตัวสร้างจานสีที่คุณชื่นชอบคืออะไร? คุณลอง Paletton แล้วหรือยัง? แจ้งให้เราทราบในความคิดเห็น!

ภาพเด่นผ่าน DaGaAl / shutterstock.com