เครื่องมือสร้างพาเลตสีแบบสุ่ม
พาเลตที่ใช้งานได้จริงต้องมีมากกว่าการวางสีสุ่มที่ไม่เกี่ยวข้องกัน เครื่องมือนี้สร้างตัวอย่างสี HEX พร้อมคัดลอก 2 ถึง 15 สีในสไตล์ที่คุณเลือก, สดใส พาสเทล นุ่มลง หรือเข้ม, เพื่อทดลองสีเน้นของ UI สีกราฟ งานภาพสำหรับโซเชียล และทิศทางแบรนด์แบบรวดเร็ว
วิธีสร้างพาเลตแบบสุ่ม
-
1
เลือกสไตล์
สดใสเพิ่มความอิ่มสีสำหรับอินเทอร์เฟซที่เด่น พาสเทลคงสีให้อ่อน นุ่มลงลดความจัด และเข้มใช้โทนที่ลึกกว่า
-
2
กำหนดจำนวนสี
สร้างคู่สีแบบกะทัดรัด หรือชุดใหญ่ได้สูงสุด 15 สีสำหรับกราฟ สถานะของ UI หรือมู้ดบอร์ด
-
3
สร้างใหม่หรือเปลี่ยน seed
ในโหมดฟันเนลสามารถเก็บ seed เพื่อสร้างพาเลตเดิมซ้ำได้ ส่วนโหมดปกติจะสุ่มชุดใหม่ทุกครั้ง
-
4
คัดลอกผลลัพธ์
คลิกตัวอย่างสีเพื่อคัดลอกรหัส HEX หรือส่งออกทั้งพาเลตเป็นรายการ HEX หรือ CSS custom properties
ตารางสรุปสไตล์
| สไตล์ | เหมาะกับ | สิ่งที่ควรตรวจ |
|---|---|---|
| สดใส | UI ของผลิตภัณฑ์ งานแคมเปญ กราฟที่ต้องแยกสีชัด | อย่าใช้ทุกสีด้วยความเข้มเต็มที่ในเลย์เอาต์เดียวกัน |
| พาสเทล | พื้นหลังที่สงบ ภาพประกอบนุ่ม ระบบสีเน้นที่เบา | ตรวจให้แน่ใจว่าคอนทราสต์ของข้อความยังเพียงพอ |
| นุ่มลง | เลย์เอาต์เชิงบรรณาธิการ แดชบอร์ด ระบบแบรนด์ที่สุขุม | เพิ่มสีเน้นที่ชัดขึ้นหนึ่งสีหากชุดสีดูแบนเกินไป |
| เข้ม | อินเทอร์เฟซสีเข้ม การแสดงข้อมูล และบล็อกที่ต้องการแรงกระแทกทางสายตา | ทดสอบข้อความสีอ่อนและสถานะโฟกัสก่อนเผยแพร่ |
เคล็ดลับใช้งานจริง
- กำหนดบทบาทให้แต่ละสี. พาเลต UI มักต้องมีสีพื้นหลัก สีสนับสนุนหนึ่งหรือสองสี และสีเน้นเพียงไม่กี่สี
- ตรวจคอนทราสต์เป็นคู่. พาเลตอาจดูดีเมื่อเป็นตัวอย่างสี แต่พอวางข้อความทับแล้วอ่านยากได้ ให้ทดสอบคู่สีตัวอักษรและพื้นหลังจริงที่จะใช้งาน
- ใช้ seed เมื่อต้องการทำซ้ำ. หากพาเลตใกล้เคียงแต่ยังไม่ใช่ ให้สร้าง seed ใหม่ ถ้าได้ชุดที่ใช้ได้ ให้เก็บ seed ไว้ในบันทึกโปรเจกต์เพื่อสร้างซ้ำภายหลัง
รูปแบบที่ใช้ในงาน
เครื่องมือนี้ส่งออก HEX เพราะย้ายไปใช้กับเครื่องมือออกแบบ CSS และเอกสารได้ง่าย HSL มีประโยชน์เมื่อคุณคิดเรื่อง hue, saturation และ lightness ส่วน OKLCH ควรเรียนรู้เมื่อทำระบบสีที่เข้าถึงได้ เพราะช่วยให้ประเมิน lightness และ chroma ได้สม่ำเสมอต่อการรับรู้มากขึ้น
คำถามที่พบบ่อย
การสุ่มเฉพาะ hue ยังไม่พอ พาเลตจะใช้งานได้ดีขึ้นเมื่อ saturation และ lightness เปลี่ยนตามบทบาท เช่น สีพื้นอ่อน สีสนับสนุนระดับกลาง และสีเน้นที่เด่นกว่า
สไตล์นุ่มลงหรือพาสเทลมักนำเสนอได้ง่ายกว่า เพราะเหลือพื้นที่ให้ตัวอักษร รูปภาพ และพื้นที่ว่าง พาเลตสดใสก็ใช้ได้ดี แต่ต้องควบคุมมากกว่า
ได้ คัดลอกสีเดียวเป็น HEX คัดลอกทั้งพาเลตเป็นรายการ HEX คั่นด้วยช่องว่าง หรือคัดลอกบล็อก CSS custom properties จากขั้นตอนส่งออก
ไม่รับประกัน ใช้สีที่สร้างเป็นจุดเริ่มต้น แล้วตรวจคู่สีข้อความกับพื้นหลังจริงตามแนวทางคอนทราสต์ของ WCAG ก่อนเผยแพร่
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
ตัวลดรูปพีชคณิตบูลีน
ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที
เครื่องมือเลือกสี HEX
เลือกหรือป้อนสี HEX แล้วดูค่า RGB, HSL, CMYK โดยประมาณ ค่าความสว่างสัมพัทธ์ และคอนทราสต์กับสีขาวและสีดำ