เครื่องมือสร้างชุดสี

โมโนโครมาติก: เฉดต่างๆ ของสีเดียวกัน — สีใกล้เคียง (Analogous): สีที่อยู่ติดกันบนวงล้อสี (ดูกลมกลืน) — สีตรงข้าม (Complementary): สีตรงข้ามบนวงล้อ (คอนทราสต์สูง) — สามเหลี่ยม (Triadic): สามสีที่เว้นระยะเท่ากัน (สมดุลสดใส) — สี่เหลี่ยม/Tetradic: สี่สีที่เว้นระยะเท่ากัน (สมบูรณ์และซับซ้อน) — Split Complementary: สีหนึ่งและสองสีเพื่อนบ้านของสีตรงข้าม (สมดุลง่ายกว่าแบบตรงข้ามล้วน)

อัปโหลดรูปถ่าย ภาพหน้าจอ หรือรูปภาพใดก็ได้ (JPG, PNG, GIF, WebP สูงสุด 10MB) เครื่องมือจะวิเคราะห์สีของพิกเซลในเบราว์เซอร์ของคุณโดยใช้วิธีที่คุณเลือก ได้แก่ สีหลัก (Dominant Colors) สีเฉลี่ย (Average Colors) หรือสีสดใส (Vibrant Colors) ทุกอย่างทำงาน client-side โดยไม่มีการอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ใดๆ

Linear gradient: สีเปลี่ยนผ่านเป็นเส้นตรงตามมุมที่กำหนด — Radial gradient: สีแผ่ออกจากจุดศูนย์กลาง — Conic gradient: สีหมุนรอบจุดศูนย์กลางเหมือนวงล้อสี ทั้งสามแบบสร้างค่า CSS property ของ background

CSS Custom Properties (เช่น --color-primary: #FF6B6B), JSON (อาร์เรย์ของออบเจกต์สีพร้อมค่าทุกรูปแบบ) และการคัดลอกไปคลิปบอร์ดสำหรับสีแต่ละสี CSS variables วางตรงลงใน :root block ของ stylesheet ได้เลย ส่วน JSON เหมาะสำหรับ design tokens

HSL ย่อมาจาก Hue (0-360°) Saturation (0-100%) และ Lightness (0-100%) ต่างจาก RGB ตรงที่ HSL เข้าใจง่าย: อยากให้สีสว่างขึ้นก็เพิ่ม Lightness อยากให้สีซีดลงก็ลด Saturation HSL ตรงกับวิธีที่นักออกแบบคิดเรื่องความสัมพันธ์ของสีโดยตรง

CMYK (Cyan, Magenta, Yellow, Key/Black) เป็นโมเดลสีที่ใช้ในการพิมพ์ RGB สำหรับหน้าจอ CMYK สำหรับเครื่องพิมพ์ หากออกแบบสื่อสิ่งพิมพ์จริง ผู้พิมพ์จะต้องการค่า CMYK หมายเหตุ: การแปลงเป็นค่าประมาณเนื่องจากช่วงสีของ RGB และ CMYK ไม่ครอบคลุมช่วงเดียวกันทั้งหมด

ไม่ การแปลงสีทั้งหมด การสร้างชุดสี การสร้าง gradient และการวิเคราะห์รูปภาพทำงานในเบราว์เซอร์ของคุณผ่าน JavaScript รูปภาพและข้อมูลสีของคุณจะไม่ออกจากอุปกรณ์เลย