เครื่องมือสีสำหรับนักออกแบบ — Palette, Gradient, Contrast, Converter ฟรี

เครื่องมือสี (Color Tools) บน Metoolzy

Metoolzy มอบชุด 5 เครื่องมือออกแบบสี ที่ทำงานได้ทั้งหมดบนเบราว์เซอร์ — เหมาะสำหรับนักออกแบบ (designer), นักพัฒนา frontend และผู้สร้างคอนเทนต์

1. Color Palette Generator

Color Palette สร้างจานสีที่กลมกลืนกันได้ในคลิกเดียว สุ่ม (Randomize) เพื่อค้นหาแรงบันดาลใจ และคัดลอกรหัสสี HEX/RGB

เมื่อใดควรใช้: เลือกชุดสี (color scheme) สำหรับเว็บไซต์, แอปพลิเคชัน, โพสต์โซเชียลมีเดีย, หรืองานนำเสนอ

2. Gradient Generator

Gradient Generator สร้าง CSS gradient ด้วยภาพที่ชัดเจน ลาก color stops, เลือกทิศทาง, คัดลอก CSS code พร้อมใช้งานทันที

เมื่อใดควรใช้: พื้นหลังแบบไล่ระดับ (gradient) สำหรับส่วนฮีโร่ (hero section), ปุ่ม hover, โอเวอร์เลย์การ์ด (card overlay)

3. Contrast Checker (WCAG)

Contrast Checker ตรวจสอบอัตราส่วนความคมชัดระหว่างข้อความและพื้นหลังตามมาตรฐาน WCAG 2.1 แสดงผลลัพธ์การปฏิบัติตามมาตรฐาน AA/AAA

เมื่อใดควรใช้: ตรวจสอบให้แน่ใจว่าเว็บไซต์สามารถเข้าถึงได้ (accessible) สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา

4. Color Converter

Color Converter แปลงสีระหว่างรูปแบบ HEX, RGB, HSL, CMYK ป้อนรูปแบบใดก็ได้ → ดูรูปแบบอื่นๆ ทั้งหมด + แสดงตัวอย่างสีจริงแบบเรียลไทม์

เมื่อใดควรใช้: เมื่อเครื่องมือออกแบบใช้ HEX แต่โค้ดต้องการรูปแบบ RGB หรือเมื่อต้องการงานพิมพ์ที่ใช้ CMYK

5. CSS Unit Converter

CSS Unit Converter แปลง px ↔ rem ↔ em ↔ % ↔ pt ↔ vw ปรับขนาดแบบอักษรพื้นฐาน (base font size) และความกว้างของวิวพอร์ต (viewport width) ได้ตามต้องการ

เมื่อใดควรใช้: การออกแบบเว็บแบบ Responsive เปลี่ยนจาก px เป็น rem เพื่อใช้ใน typography

กระบวนการทำงาน (Workflow) ที่แนะนำ

1. ใช้ Color Palette เพื่อค้นหาชุดสี (color scheme)
2. ตรวจสอบ Contrast สำหรับการจับคู่สีข้อความและพื้นหลัง
3. สร้าง Gradient สำหรับพื้นหลัง
4. ใช้ Color Converter เพื่อแปลงรูปแบบสีตามที่ต้องการ
5. ใช้ CSS Unit Converter เพื่อแปลง px เป็น rem สำหรับการออกแบบที่ตอบสนอง (responsive)

👉 ดู Design & Color Tools ทั้งหมด →