เครื่องมือสร้างสีแบบสุ่ม
สร้างชุดรหัสสี 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 ได้ง่าย โดยเฉพาะเมื่อใช้เป็นพื้นหลังให้ข้อความขนาดเล็กหรือฟอนต์บาง.
เครื่องมือที่เกี่ยวข้อง
ตัวลดรูปพีชคณิตบูลีน
ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที
ตัวแปลงไบนารีเป็น ASCII
วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต
ตัวแปลง BBCode เป็น HTML
แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง