เครื่องมือสร้างสีแบบสุ่ม
สร้างชุดรหัสสี HEX แบบสุ่มจากช่วง sRGB 24 บิต เลือกจำนวนตัวอย่างสีที่ต้องการ ดูสีแต่ละสีได้ทันที แล้วคัดลอกรหัสไปใช้ใน CSS บันทึกงานออกแบบ fixture สำหรับ QA หรือการทดลองพาเลตสี.
วิธีสร้างสี HEX แบบสุ่ม
-
1
เลือกจำนวน
ใส่ตัวเลขตั้งแต่ 1 ถึง 50 ตามจำนวนตัวอย่างสีที่ต้องการตรวจดู.
-
2
สร้างตัวอย่างสี
ผลลัพธ์แต่ละรายการเป็นรหัส HEX 6 หลักในรูปแบบ #RRGGBB พร้อมค่าช่องสีแดง เขียว และน้ำเงินแยกกัน.
-
3
คัดลอกและทดสอบ
เก็บสีที่ชอบไว้ ตรวจสอบคอนทราสต์ก่อนใช้กับข้อความ และแปลงเป็น RGB หรือ HSL เฉพาะเมื่อเวิร์กโฟลว์ของคุณต้องใช้.
เครื่องมือนี้สร้างอะไร
แต่ละรหัสแทนสี sRGB แบบ 24 บิต: 8 บิตสำหรับสีแดง 8 บิตสำหรับสีเขียว และ 8 บิตสำหรับสีน้ำเงิน จึงมีค่า HEX ที่เป็นไปได้ 16,777,216 ค่า ตั้งแต่ #000000 ถึง #FFFFFF เครื่องมือนี้แสดงตัวอย่างสีและรหัสเท่านั้น ไม่ได้ตั้งชื่อ จัดอันดับ หรือรับประกันว่าสีนั้นอ่านง่าย.
วิธีอ่านสี HEX
| ส่วน | ความหมาย | ช่วงค่า |
|---|---|---|
# |
เครื่องหมายสีใน CSS | คำนำหน้าคงที่ |
RR |
ช่องสีแดง | 00 ถึง FF |
GG |
ช่องสีเขียว | 00 ถึง FF |
BB |
ช่องสีน้ำเงิน | 00 ถึง FF |
การใช้งานที่เหมาะสม
- ทดลองสถานะ UI สีเน้นในกราฟิก หรือภาพชั่วคราว เมื่อยังไม่ได้เลือกสีสุดท้าย.
- สร้างพาเลตตั้งต้น แล้วคัดสีที่คล้ายกันเกินไป มืดเกินไป หรือฉูดฉาดเกินไปออก.
- สร้างข้อมูลทดสอบสำหรับ CSS, SVG, canvas และตัวอย่างใน design system.
ก่อนใช้สีแบบสุ่มในงานจริง
สีแบบสุ่มเป็นเพียงจุดเริ่มต้นเท่านั้น สำหรับข้อความ ปุ่ม และส่วนควบคุม ควรทดสอบกับสีพื้นหน้าหรือพื้นหลัง WCAG AA กำหนดอัตราคอนทราสต์ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ สำหรับงานแบรนด์หรืองานพิมพ์ ควรตรวจบนหน้าจอที่ปรับเทียบแล้ว และแปลงสีสำหรับงานพิมพ์แยกต่างหาก.
คำถามที่พบบ่อย
HEX แบบสุ่มครอบคลุมค่าทุกช่องสี ผลลัพธ์จำนวนมากจึงอาจยังไม่ดูเหมือนสีในพาเลตที่ผ่านการปรับแต่งแล้ว ให้สร้างตัวเลือกมากขึ้นและเก็บเฉพาะตัวอย่างที่มีคอนทราสต์และความอิ่มสีเหมาะกับงานของคุณ.
เครื่องมือนี้สร้างสีสุ่มที่เป็นอิสระต่อกัน หากต้องการพาเลตที่กลมกลืนกว่า ให้ใช้เครื่องมือสร้างพาเลต หรือเลือกอยู่ในกลุ่ม hue เดียวกันด้วยตนเองพร้อมปรับสีอ่อนและสีเข้ม.
เครื่องมือนี้ไม่มีการตั้งค่า seed ให้คัดลอกรหัส HEX ที่ต้องการเก็บไว้ เพื่อใช้อีกครั้งในภายหลัง.
ได้ ค่า HEX 6 หลัก #RRGGBB เป็นไวยากรณ์สีมาตรฐานของ CSS และใช้ได้กับคุณสมบัติอย่าง color, background-color, เส้นขอบ, gradient และ fill ของ SVG.
ไม่ควรใช้โดยไม่ตรวจคอนทราสต์ ตัวอย่างสีแบบสุ่มอาจไม่ผ่านข้อกำหนด WCAG ได้ง่าย โดยเฉพาะเมื่อใช้เป็นพื้นหลังให้ข้อความขนาดเล็กหรือฟอนต์บาง.
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
ตัวลดรูปพีชคณิตบูลีน
ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
ตัวแปลง BBCode เป็น HTML
แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที