เครื่องมือสร้างสีแบบสุ่ม
สร้างชุดรหัสสี 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
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
ตัวตรวจสอบอีเมล
ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ
เครื่องมือสร้าง EditorConfig
สร้างไฟล์ .editorconfig จากกฎการเยื้อง การจบบรรทัด และชุดอักขระของคุณ แล้วเพิ่มเซกชันที่ถูกต้องให้ทุกภาษาในรีโพซิทอรี ทั้ง Python, Go, YAML, Makefile และอื่น ๆ
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องมือนี้มีให้บริการในภาษาอื่น
- Generador de colores aleatorios [ES]
- ランダムカラー生成ツール [JA]
- Gerador de cores aleatórias [PT]
- 랜덤 색상 생성기 [KO]
- Générateur de couleurs aléatoires [FR]
- Slumpmässig färggenerator [SV]
- Trình tạo màu ngẫu nhiên [VI]
- مولّد ألوان عشوائية [AR]
- Willekeurige kleurengenerator [NL]
- Generator Warna Acak [ID]
- Zufälliger Farbgenerator [DE]
- Generator losowych kolorów [PL]
- Random Color Generator [EN]
- Generatore di colori casuali [IT]
- Генератор случайных цветов [RU]
- Rastgele Renk Oluşturucu [TR]
- 随机颜色生成器 [ZH]