Softonic

เครื่องมือสร้างสีแบบสุ่ม

ขั้นตอน 1 / 4 สีแบบสุ่ม
ถัดไป: จานสี

สร้างชุดรหัสสี HEX แบบสุ่มจากช่วง sRGB 24 บิต เลือกจำนวนตัวอย่างสีที่ต้องการ ดูสีแต่ละสีได้ทันที แล้วคัดลอกรหัสไปใช้ใน CSS บันทึกงานออกแบบ fixture สำหรับ QA หรือการทดลองพาเลตสี.

วิธีสร้างสี HEX แบบสุ่ม

  1. 1

    เลือกจำนวน

    ใส่ตัวเลขตั้งแต่ 1 ถึง 50 ตามจำนวนตัวอย่างสีที่ต้องการตรวจดู.

  2. 2

    สร้างตัวอย่างสี

    ผลลัพธ์แต่ละรายการเป็นรหัส HEX 6 หลักในรูปแบบ #RRGGBB พร้อมค่าช่องสีแดง เขียว และน้ำเงินแยกกัน.

  3. 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 ได้ง่าย โดยเฉพาะเมื่อใช้เป็นพื้นหลังให้ข้อความขนาดเล็กหรือฟอนต์บาง.

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องมือนี้มีให้บริการในภาษาอื่น