Stax
Tools

Random Color Generator

Generate random colour palettes in pastel, vivid, dark, or monochrome.

#5EB07C
#82BD70
#64258D
#2620A2
#E585C3
#5EB07C
rgb(94, 176, 124)
#82BD70
rgb(130, 189, 112)
#64258D
rgb(100, 37, 141)
#2620A2
rgb(38, 32, 162)
#E585C3
rgb(229, 133, 195)

🔒 Lock individual colours before regenerating to keep them in the palette. Click any swatch or the palette strip to copy its hex code.

เมื่อใดควรใช้การสร้างสีแบบสุ่ม

การสร้างพาเล็ตที่ใช้งานได้จากสีสุ่ม

การเข้าถึงได้ของสี

Random color generator เป็นจุดเริ่มต้นสำหรับการสำรวจการออกแบบ ช่วยทลายความติดขัดด้านความคิดสร้างสรรค์ จุดประกายการผสมผสานที่ไม่คาดคิด และเผยให้เห็นความสัมพันธ์ของสีที่คุณไม่ได้เลือกโดยเจตนา ใช้สำหรับ: mood board การสำรวจสีแบรนด์ พาเล็ตการแสดงผลข้อมูล และการสร้างต้นแบบอย่างรวดเร็ว

พาเล็ตการออกแบบที่ใช้งานได้มักต้องการสีหลักหนึ่งสี สีเน้นหนึ่งหรือสองสี และพื้นหลังสีกลาง สร้างพาเล็ตสีสดใส ล็อกสีที่ชอบที่สุดเป็นสีหลัก จากนั้นเปลี่ยนเป็นโหมดพาสเทลและสร้างใหม่เพื่อหาพื้นหลังที่เข้ากัน ฟีเจอร์ล็อกทำให้ขั้นตอนนี้ลื่นไหล

สีสุ่มไม่รับประกันอัตราส่วนคอนทราสต์ที่เข้าถึงได้ หลังจากเลือกพาเล็ตแล้ว ให้ตรวจสอบคู่พื้นหน้า/พื้นหลังในเครื่องตรวจสอบคอนทราสต์สีเพื่อให้มั่นใจว่าสอดคล้องกับ WCAG AA (4.5:1 สำหรับข้อความปกติ 3:1 สำหรับข้อความขนาดใหญ่)

นักออกแบบ UI/UX ใช้เพื่อทลายนิสัยสีเริ่มต้นและค้นพบการผสมผสานที่ไม่คาดคิดสำหรับการสร้างแบรนด์หรือต้นแบบหน้า landing page วิศวกรการแสดงผลข้อมูลสร้างพาเล็ตสุ่มสำหรับชุดแผนภูมิเมื่อจำนวนหมวดหมู่ไม่ทราบล่วงหน้า นักพัฒนาเกมใช้เพื่อกำหนดสีทีม สีฝ่าย หรือสีตัวละครแบบขั้นตอน ศิลปินและนักวาดภาพประกอบใช้เป็นแรงบันดาลใจสำหรับภาพวาดดิจิทัลพาเล็ตจำกัด

สไตล์พาเล็ตที่คุณเลือกมีน้ำหนักทางจิตวิทยา สีสดใสส่งสัญญาณความมีพลัง ความเร่งด่วน และความมั่นใจ สีพาสเทลสื่อถึงความสงบ ความนุ่มนวล และความใกล้ชิด พาเล็ตสีเข้มแสดงถึงความซับซ้อน คุณภาพระดับพรีเมียม พาเล็ตโมโนโครมแสดงถึงความเป็นมืออาชีพและความชัดเจน

เมื่อได้พาเล็ตที่ชอบแล้ว ให้คัดลอกค่า HEX แต่ละค่าหรือใช้ 'Copy All' เพื่อรับรายการที่คั่นด้วยจุลภาค วางโดยตรงใน Figma เป็นสไตล์สี ในไฟล์ CSS custom properties เป็น --color-1: #hex variables หรือในออบเจกต์การกำหนดค่า Tailwind

คำถามที่พบบ่อย

How are the colour palettes generated?
Each colour is generated in HSL colour space with randomised hue (0–359°), and saturation/lightness ranges tuned for the selected style. Pastel colours have high lightness (75–90%) and low-medium saturation. Vivid colours have high saturation (80–100%) and medium lightness. Dark colours have low lightness (15–35%).
What does the lock feature do?
Clicking the lock icon on a colour swatch locks that colour in place. When you click Generate, locked colours stay unchanged while unlocked colours are randomised. This lets you build on a colour you like — keep your brand primary colour locked and explore complementary accent colours.
How do I use random colours in my design?
Copy the hex code by clicking the swatch or the Copy button. Paste directly into Figma, Sketch, Adobe XD, CSS, or any design tool. The 'Copy All' button copies all hex codes as a comma-separated list, useful for pasting into design token files.
What is the difference between pastel and vivid colours?
Pastel colours have high lightness and low saturation — they appear soft, light, and muted. Good for backgrounds, cards, and gentle UI. Vivid colours have high saturation and medium lightness — bold, energetic, and eye-catching. Good for CTAs, badges, and highlights.
Can I generate a monochromatic palette?
Yes — select the 'Monochrome' style. This generates colours with nearly zero saturation (grey tones). Combined with the count selector, you can create a full greyscale palette from very light to very dark for neutral UI components.

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