พาเลตสี

พาเลตสีสำหรับเว็บไซต์

บนเว็บไซต์ แต่ละสีมีหน้าที่ของตัวเอง ทั้งพื้นหลัง ข้อความ ปุ่ม ลิงก์ และการแจ้งเตือน 12 พาเลตนี้ออกแบบมาเพื่อสิ่งนั้นโดยเฉพาะ มีพื้นหลังสว่างหรือมืด สีข้อความที่อ่านง่าย และสีเน้นสำหรับปุ่ม คัดลอกโค้ด HEX ไปใส่ใน CSS หรือเครื่องมือสร้างเว็บของคุณได้เลย

น้ำเงินสะอาดตาสำหรับ SaaS

พื้นหลังเกือบขาว ข้อความสีน้ำเงินเข้มมาก และปุ่มสีน้ำเงินสด

องค์กรแบบเรียบหรู

สำหรับสำนักงานกฎหมาย บริษัทที่ปรึกษา หรือบริษัทอุตสาหกรรม

ร้านค้าออนไลน์โทนอุ่น

สีส้มช่วยให้ปุ่มซื้อโดดเด่นบนพื้นหลังโทนอุ่น

โหมดมืดกับสีเขียว

พื้นหลังมืดหลายระดับ ข้อความสีสว่าง และสีเขียวเน้นสำหรับปุ่มแอคชัน

ธรรมชาติและออร์แกนิก

สำหรับร้านค้าสินค้าธรรมชาติ ร้านต้นไม้ หรือเวลเนส

พาสเทลเป็นมิตร

ดูเป็นกันเอง สีฟ้าอมเทาเข้มช่วยให้ข้อความอ่านง่าย

แนวบรรณาธิการกับสีแดง

สำหรับบล็อก นิตยสาร และสื่อ สีแดงใช้กับลิงก์และหัวข้อ

ม่วงแดงเพอร์เพิลเทคโนโลยี

พบบ่อยในผลิตภัณฑ์ดิจิทัล คอร์สออนไลน์ และเครื่องมือ AI

เทอร์ควอยซ์และคอรัล

สีเน้นคู่ตรงข้ามสองสี สีหนึ่งสำหรับปุ่ม อีกสีสำหรับการแจ้งเตือน

หรูหราโทนมืด

สำหรับโรงแรม ร้านอาหาร หรือแบรนด์พรีเมียมที่รูปภาพเป็นพระเอก

สุขภาพและเวลเนส

สะอาดตาและสงบ เหมาะกับคลินิกและการบำบัด

สีทรายและเขียวอมฟ้า

อบอุ่นแต่ก็ดูจริงจัง สำหรับการท่องเที่ยว อสังหาริมทรัพย์ หรือคาเฟ่

แตะสีเพื่อคัดลอกโค้ด HEX ไอคอนดินสอจะเปิดพาเลตในเครื่องมือแก้ไข เพื่อปรับแต่งได้

ลองใช้สิ่งนี้ด้วย

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

ใช้กฎ 60-30-10

ใช้สีหลัก (มักเป็นพื้นหลัง) ประมาณ 60 % ของหน้า สีรอง 30 % (ส่วนต่าง ๆ การ์ด ส่วนหัว) และสีเน้นในอีก 10 % ที่เหลือ เก็บสีเน้นไว้สำหรับปุ่มและลิงก์ เพื่อให้ผู้ใช้รู้ว่าควรคลิกตรงไหน

ตรวจสอบคอนทราสต์ของข้อความ

แนวทางการเข้าถึง WCAG กำหนดคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความทั่วไป สีเทาอ่อนบนพื้นขาวดูหรูแต่อ่านยาก โดยเฉพาะบนมือถือกลางแดด ก่อนเผยแพร่ ให้ใช้เครื่องมือตรวจสอบคอนทราสต์

กำหนดสีสำหรับสถานะและการแจ้งเตือน

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

สีจากพาเลตเหล่านี้

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

คำถามที่พบบ่อย

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

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

สีไหนดีที่สุดสำหรับปุ่มบนเว็บไซต์?

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

จะตั้งค่าพาเลตสีบนเว็บไซต์ของฉันได้อย่างไร?

คัดลอกโค้ด HEX ไปใส่ในตัวแปรสีใน CSS หรือในการตั้งค่าสีส่วนกลางของเครื่องมือสร้างเว็บ เช่น WordPress, Wix หรือ Shopify

พาเลตเพิ่มเติม: งานออกแบบ

สำรวจต่อ