ต้องการสีสำหรับแบบร่าง แผนภูมิ หรือพื้นที่ว่างเปล่า แต่ไม่อยากเลือกสีเดิมซ้ำ ๆ อีกต่อไป? เครื่องมือสุ่มสีฟรีนี้ดึงสีจากช่วง 24-bit ทั้งหมดที่หน้าจอแสดงได้ แล้วแสดงแต่ละสีบนตัวอย่างสีข้างรหัสของมัน เลือกจำนวนที่ต้องการในช่อง “จำนวนรายการที่เลือก” ตั้งแต่ 1 ถึง 50 ทำเครื่องหมายรูปแบบที่ต้องการ แล้วกด “สร้างผลลัพธ์” หน้าเพจเปิดด้วยสีเดียวในรูปแบบ HEX ผลลัพธ์แรกจึงใช้เพียงคลิกเดียว ช่องทำเครื่องหมาย “รหัส HEX” ถูกเลือกตั้งแต่ต้น “รหัส RGB” และ “รหัส HSL” อยู่ถัดไป และสามารถเปิดใช้ทั้งสามรูปแบบในชุดค่าผสมใดก็ได้พร้อมกัน ปุ่มเฟืองข้าง “สร้างผลลัพธ์” จะเปิดแผง “ตัวเลือกขั้นสูง” ซึ่งสามารถจำกัดสีตามประเภทหรือช่วง ตัดสีซ้ำออก และเปลี่ยนรูปแบบการเขียน HEX ได้
สีทุกสีสร้างขึ้นในเบราว์เซอร์ผ่าน Web Crypto API (crypto.getRandomValues) ซึ่งให้ค่าไบต์แบบสุ่มที่แข็งแกร่งด้านการเข้ารหัสจากแหล่งสุ่มของระบบ ไม่ใช่ฟังก์ชันกึ่งสุ่มอย่าง Math.random() สีบนหน้าจอประกอบด้วยสามช่องสัญญาณ ได้แก่ แดง เขียว และน้ำเงิน แต่ละช่องเป็นจำนวนเต็มตั้งแต่ 0 ถึง 255 และไบต์สุ่มหนึ่งตัวรับค่าได้พอดี 256 ค่า แต่ละช่องสัญญาณจึงเป็นเพียงหนึ่งไบต์ ไม่มีการหารเอาเศษ และไม่มีเฉดสีใดได้เปรียบจากขั้นตอนการแปลงค่า ทำให้สีทั้ง 16,777,216 สีที่หน้าเพจสร้างได้มีโอกาสเท่ากันทุกครั้งที่กด “สร้างผลลัพธ์” การตั้งช่วงที่แคบลงใน “ตัวเลือกขั้นสูง” ยังคงรักษากฎนี้ในช่วงนั้น สียังคงดึงมาจากทั้งพื้นที่ สีที่ตกนอกช่วงจะถูกคัดออก ทุกสีในช่วงจึงมีโอกาสเท่ากัน ไม่มีข้อมูลส่งไปยังเซิร์ฟเวอร์ ไม่มีการบันทึก และเมื่อหน้าเพจโหลดแล้ว จะทำงานได้แม้ไม่มีการเชื่อมต่อ
รูปแบบทั้งสามอธิบายสีเดียวกันต่างวิธี รูปแบบ “รหัส HEX” คือรูปแบบหกหลักที่ใช้ใน CSS และเครื่องมือออกแบบส่วนใหญ่ เช่น #0778ff เขียนด้วยตัวพิมพ์เล็กนำหน้าด้วย # ส่วนตัวเลือก “ตัวพิมพ์ใหญ่” และ “ไม่มี #” ใน “ตัวเลือกขั้นสูง” จะเปลี่ยนรูปแบบนั้นสำหรับเครื่องมือที่ต้องการรูปแบบอื่น รูปแบบ “รหัส RGB” แสดงสามช่องสัญญาณดังนี้ rgb(7, 120, 255) เหมาะสำหรับโค้ดที่ทำงานกับแต่ละช่องแยกกัน รูปแบบ “รหัส HSL” อธิบายสีด้วยโทนสี ความอิ่มตัว และความสว่าง เช่น hsl(213, 100%, 51%) ปรับแต่งด้วยมือได้ง่ายที่สุด ทั้งสามรูปแบบนำไปวางใน stylesheet ได้โดยตรง อย่างไรก็ตาม ความแม่นยำไม่เท่ากัน “รหัส HEX” และ “รหัส RGB” แม่นยำ ส่วน HSL มีการปัดเศษ หน้าเพจเขียนโทนสี ความอิ่มตัว และความสว่างเป็นจำนวนเต็ม ประมาณ 89% ของสีเมื่อแปลงกลับจะไม่ได้สีเดิมทุกประการ: #646503 แสดงเป็น hsl(61, 94%, 20%) เมื่อแปลงกลับได้ #616303 ความต่างไม่เกิน 5 สเต็ปต่อช่องสัญญาณ และส่วนใหญ่เป็น 1 หรือ 2 มองด้วยตาไม่เห็นบนหน้าจอ แต่มีผลหากบันทึกค่า HSL แล้วคาดหวัง HEX เดิม ให้เก็บ HEX หรือ RGB ไว้เป็นค่าหลัก
สีเดียวจะแสดงเป็นชิปตรงกลางผลลัพธ์ หลายสีจะแสดงเป็นรายการตัวเลข หนึ่งสีต่อแถว พร้อมรูปแบบที่เลือกเรียงข้างกันและแถบแสดงคอนทราสต์เล็ก ๆ ท้ายแถว รายการที่มีมากกว่าสามสีจะเลื่อนในกล่อง ลูกศรที่มุมจะขยายให้เต็มความสูง หน้าเพจจดจำสถานะที่ตั้งไว้ คลิกรหัสใดก็ได้เพื่อคัดลอกเฉพาะรหัสนั้น ปุ่มคัดลอกท้ายแถวจะคัดลอกรหัสทั้งหมดของสีนั้นในบรรทัดเดียวคั่นด้วยช่องว่าง คลิกตัวอย่างสีจะเปิดตัวเลือกสีของเบราว์เซอร์ เมื่อเลือกสีใหม่ รหัสทุกรหัสในแถวนั้นจะอัปเดตทุกรูปแบบที่เปิดใช้พร้อมแถบคอนทราสต์ ปุ่ม “คัดลอกทั้งหมด” คัดลอกทุกสีหนึ่งสีต่อบรรทัด ส่วน “บันทึกลงไฟล์” บันทึกข้อความเดียวกันเป็นไฟล์ .txt ทั้งสองติดตามสีที่เปลี่ยนในเครื่องมือเลือกสี ส่วน “ประวัติ” เก็บ 10 ชุดล่าสุดในเบราว์เซอร์นี้ตามที่สร้างไว้ ปุ่ม “ล้าง” ล้างผลลัพธ์ การตั้งค่าทั้งหมดรวมถึงใน “ตัวเลือกขั้นสูง” จะถูกจดจำสำหรับการเข้าชมครั้งถัดไป
สีที่มีโอกาสเท่ากันไม่ได้กระจายอย่างสม่ำเสมอในลักษณะที่ดูได้ด้วยตา การรู้ว่าจะเกิดอะไรขึ้นช่วยหลีกเลี่ยงการกด “สร้างผลลัพธ์” ด้วยเหตุผลที่ผิด จากการวัดทั่วทั้งช่วง ประมาณ 35% เป็นสีสดและอิ่มตัว มีความอิ่มตัว HSL ขั้นต่ำ 70% และความสว่างระหว่าง 35%–65% สีใกล้เทา ความอิ่มตัวต่ำกว่า 20% มีเพียงประมาณ 4% สีเข้มมาก (ความสว่างต่ำกว่า 20%) และสีอ่อนมาก (มากกว่า 80%) แต่ละประเภทประมาณ 3% ชุด 10 สีจาก “สีทั้งหมด” มักมีสีจัดหลายสีและแทบไม่มีพาสเทลหรือสีเทาเข้ม เมื่อต้องการสีเฉพาะประเภทให้เลือกใน “ประเภทสี”: “สีสด” เก็บเฉพาะกลุ่มที่อิ่มตัวนั้น “สีพาสเทล”, “สีเข้ม”, “สีหม่น” และ “ระดับเทา” ก็ทำเช่นเดียวกันสำหรับกลุ่มของตน “กำหนดเอง” ให้ตั้งช่วง “โทนสี”, “ความอิ่มตัว” และ “ความสว่าง” เองได้ และช่วงโทนสีสามารถข้าม 0 ได้ ดังนั้น 330 ถึง 30 จะให้โทนแดง ช่วงถูกตรวจสอบกับค่า HSL ที่หน้าเพจแสดง ไม่มีรหัสใดหลุดออกนอกช่วง หากสีในช่วงน้อยเกินไปสำหรับค่าใน “จำนวนรายการที่เลือก” หน้าเพจจะขอให้ขยายช่วงแทนการซ้ำสี สีซ้ำเป็นไปได้แต่หายาก ทำเครื่องหมาย “ไม่เลือกซ้ำ” เพื่อป้องกัน โดยไม่มีตัวเลือกนี้ โอกาสที่ 2 ใน 50 สีจากช่วงทั้งหมดซ้ำกันคือประมาณ 1 ใน 13,700
สีแบบสุ่มมักต้องการเป็นสีพื้นหลัง ซึ่งตั้งคำถามที่ตัวอย่างสีตอบด้วยตาไม่ได้: ข้อความจะอ่านออกบนพื้นหลังนั้นไหม? หลักเกณฑ์การเข้าถึงเว็บ WCAG กำหนดอัตราคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความปกติ จากการวัดทุกสีที่หน้าเพจสร้างได้ ข้อความสีดำถึงเกณฑ์นั้นในประมาณ 65% ของสี และข้อความสีขาวในประมาณ 36% ไม่มีสีใดที่ทั้งสองล้มเหลว ตัวเลือกที่ดีกว่าเสมอถึงอย่างน้อย 4.58:1 ดังนั้นสำหรับพื้นหลังสุ่มใด ๆ ข้อความสีดำหรือขาวจะผ่านเกณฑ์ และหน้าเพจแสดงว่าเป็นสีไหน ทุกสีมีแถบเล็ก ๆ แสดง Aa ด้วยสีที่ดีกว่า ตามด้วยอัตราคอนทราสต์ อัตราถูกปัดลงเพื่อไม่ให้ดูดีเกินจริง และอัปเดตเมื่อเปลี่ยนสีในเครื่องมือเลือกสี แถบนี้เปรียบเทียบเฉพาะข้อความสีดำและขาว สำหรับสีแบรนด์หรือสีข้อความอื่นให้ตรวจสอบคู่นั้นด้วยเครื่องมือตรวจสอบคอนทราสต์
สุ่มไม่ใช่สิ่งเดียวกับสอดคล้องกลมกลืน สีแต่ละสีในชุดถูกสร้างอย่างอิสระโดยไม่รู้จักสีอื่น เครื่องมือนี้จึงไม่สร้างพาเลตต์ในความหมายของนักออกแบบ ไม่มีคู่สีตรงข้าม ไม่มีสีต่อเนื่องแบบอนาล็อก ไม่มีความสว่างร่วมกัน การตั้งช่วงแคบเปลี่ยนลักษณะของชุดสี ไม่ใช่กฎนั้น: พาสเทลหรือชุดสีฟ้ายังคงมาทีละสี โดยไม่มีสิ่งใดเชื่อมโยงกัน นั่นคือจุดประสงค์ของมัน มันให้สีที่คุณไม่ได้เลือกเอง ซึ่งช่วยทำลายความเคยชินหรือการติดขัดในการสร้างสรรค์ ในการใช้ผลลัพธ์สุ่มที่ได้ให้เกิดประโยชน์ ให้เก็บสีที่ชอบและดึงสีอื่นออกมาจากสีนั้น แทนที่จะกด “สร้างผลลัพธ์” จนกว่าทุกสีจะบังเอิญเข้ากัน คงโทนสีไว้และปรับความสว่างเพื่อให้ได้เฉดอ่อนและเข้ม หรือหมุนโทนสี 180 องศาเพื่อให้ได้สีตรงข้าม รูปแบบ “รหัส HSL” ทำให้การเคลื่อนไหวเหล่านั้นเป็นเรื่องของคณิตศาสตร์ ไม่ใช่การเดาเอา
ทำไมถึงเลือกเครื่องมือสุ่มสีนี้?
- สีทุกสีสร้างในเบราว์เซอร์ด้วย Web Crypto API ไม่มีการอัปโหลด
- สีทั้ง 16,777,216 สีมีโอกาสเท่ากันทุกประการ หนึ่งไบต์สุ่มต่อช่องสัญญาณ
- รหัส HEX, RGB และ HSL สำหรับสีเดียวกัน ในชุดค่าผสมใดก็ได้
- สูงสุด 50 สีในครั้งเดียว แต่ละสีบนตัวอย่างพร้อมแถบคอนทราสต์
- “สีสด” สีพาสเทล สีเข้ม สีหม่น และ ระดับเทา หรือตั้งช่วงโทนสี ความอิ่มตัว และความสว่างเอง
- ไม่เลือกซ้ำ เมื่อต้องการ และ HEX ตัวพิมพ์ใหญ่หรือไม่มี #
- คลิกรหัสเพื่อคัดลอก หรือเปลี่ยนสีใดก็ได้ในตัวเลือกสีของเบราว์เซอร์
- คัดลอกทั้งหมด บันทึกลงไฟล์ และ ประวัติ 10 ชุดล่าสุดในเบราว์เซอร์
- ฟรีและไม่จำกัด ไม่ต้องสมัคร ไม่มีโควตา ไม่มีการบันทึกบนเซิร์ฟเวอร์
สีแบบสุ่มมีประโยชน์ทุกที่ที่ต้องการสีก่อนที่ใครจะตัดสินใจ นักออกแบบใช้เพื่อทลายการติดขัดในการสร้างสรรค์และหาจุดเริ่มต้นที่พาเลตต์ปกติไม่อาจให้ได้ นักพัฒนาเติมแบบร่าง ตัวยึดตำแหน่ง และรูปโปรไฟล์ ให้แต่ละชุดในแผนภูมิมีสีของตัวเองก่อนที่ธีมจริงจะถูกกำหนด และทดสอบว่าอินเทอร์เฟซรับมือกับพื้นหลังที่ไม่ได้ออกแบบไว้อย่างไร ชุด 50 สีจาก “สีทั้งหมด” มักมีสีเข้มหรืออ่อนมากอย่างน้อยหนึ่งสีเสมอ “สีเข้ม” หรือ “สีพาสเทล” ชี้การทดสอบไปยังปลายด้านใดด้านหนึ่ง ศิลปินเจเนอเรทีฟและผู้สร้างต้นแบบเกมป้อนค่าโดยตรงลงโค้ด โดยรูปแบบ RGB เข้ากันได้กับไลบรารีกราฟิกส่วนใหญ่ ครูนำสามรูปแบบมาเรียงเพื่อแสดงว่าสีหนึ่งสีเขียนเป็นรหัส สามช่องสัญญาณ หรือตำแหน่งบนวงล้อสีได้อย่างไร และทำไม HSL จึงมีการปัดเศษ ผู้ที่ต้องการติดป้ายกำกับหรือใส่รหัสสีรายการก็ได้สีต่างกันโดยไม่ต้องเสียเวลาเลือก
มีข้อจำกัดที่ควรรู้บางประการ เครื่องมือนี้เป็นเครื่องมือสุ่มสี ไม่ใช่เครื่องมือพาเลตต์ ไม่สร้างฮาร์โมนีสี ไม่ล็อกสีหนึ่งขณะที่สีอื่นเปลี่ยน และช่วงแคบให้สีประเภทเดียว ไม่ใช่สีที่เลือกมาให้เข้ากัน แถบคอนทราสต์เปรียบเทียบเฉพาะข้อความสีดำและขาว หน้าเพจทำงานกับสี sRGB ที่หน้าจอแสดง ได้แก่ HEX, RGB และ HSL โดยไม่มีความโปร่งใส และไม่มี CMYK, Pantone, OKLCH หรือสี CSS ที่มีชื่อ สำหรับงานพิมพ์ให้จับคู่สีในขั้นตอนเตรียมงานพิมพ์ ไม่ควรไว้วางใจรหัสจากหน้าจอ รหัสเดียวกันอาจดูต่างกันเล็กน้อยต่างหน้าจอเนื่องจากหน้าจอไม่ได้ปรับเทียบเหมือนกัน ค่า HSL ถูกปัดเศษตามที่อธิบายไว้ และหากไม่ได้ทำเครื่องหมาย “ไม่เลือกซ้ำ” ชุดสีจะไม่ถูกตรวจสอบการซ้ำ สิ่งที่หน้าเพจรับประกันมีความแม่นยำและเฉพาะเจาะจง: สีทั้ง 16,777,216 สี หรือทุกสีในช่วงที่ตั้งไว้ มีโอกาสเท่ากันทุกครั้งที่กด โดยดึงจากแหล่งการเข้ารหัสของเบราว์เซอร์และไม่เคยส่งออกไปที่ใด