สร้างชุดสี ฟรี

วิธีการทำงาน

เครื่องมือนี้สร้างโดยไม่มีไลบรารีภายนอก — คณิตศาสตร์สีทั้งหมดทำงานใน JavaScript ที่เขียนขึ้นเองในเบราว์เซอร์โดยตรง แปลงสีที่คุณเลือกระหว่าง hex และ HSL แล้วใช้กฎความกลมกลืนของทฤษฎีสีแบบคลาสสิก (สีตรงข้าม สามเหลี่ยม สีใกล้เคียง ฯลฯ) ผ่านเลขคณิตบนวงล้อสีเพื่อสร้างแต่ละชุดสี

1. 1
   การแปลง hex เป็น HSL

   เมื่อคุณเลือกสี เครื่องมือจะแยกสตริง hex เป็นส่วนประกอบ RGB และแปลงเป็น HSL (เฉดสี ความอิ่มตัว ความสว่าง) เฉดสีคือตำแหน่ง 0–360 องศาบนวงล้อสี คณิตศาสตร์ชุดสีทั้งหมดเกิดขึ้นในพื้นที่นี้
2. 2
   เลขคณิตเฉดสีสำหรับความกลมกลืน

   ชุดสีแต่ละประเภทเป็นสูตรการหมุนคงที่ที่ใช้กับเฉดสีฐาน สีตรงข้ามบวก 180° สามเหลี่ยมบวก 120° และ 240° สี่เหลี่ยมก้าวทีละ 90° ตรงข้ามแยกใช้ 150° และ 210° สีเดียวและเฉดเข้มคงเฉดสีและความอิ่มตัวไว้ขณะก้าวความสว่างขึ้นลง
3. 3
   ผลลัพธ์ HSL เป็น hex

   ชุด HSL ที่คำนวณแต่ละชุดถูกแปลงกลับเป็นสี hex ด้วยสูตร chroma มาตรฐาน ผลลัพธ์แสดงเป็นแถบสีพร้อมป้ายที่ปรับคอนทราสต์อัตโนมัติ (ข้อความเข้มบนสีอ่อน ข้อความอ่อนบนสีเข้ม) ตามเกณฑ์ความสว่างอย่างง่าย
4. 4
   ส่งออกในรูปแบบที่คุณต้องการ

   ชุดสีคัดลอกได้เป็นสตริง hex หรือส่งออกเป็นไฟล์ตัวแปร CSS (:root { --color-1: … }) ตัวแปร SCSS ส่วนตั้งค่า Tailwind ออบเจกต์ JSON หรือแถบสี PNG การส่งออก PNG ใช้ Canvas API ของเบราว์เซอร์ (toDataURL) วาดตัวอย่างสีแต่ละสีพร้อมป้าย hex — ทุกอย่างสร้างในเครื่องเมื่อคลิก

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