ตัวแปลงสี

รองรับการแปลงรูปแบบสีระหว่าง HEX, RGB, HSL และ CMYK พร้อมแสดงตัวอย่างแบบเรียลไทม์และตัวเลือกสี การแปลงแบบซิงโครไนซ์อัตโนมัติ เหมาะสำหรับการส่งมอบงานออกแบบ การเขียนสไตล์ CSS และการรวมคู่มือสไตล์ให้เป็นหนึ่งเดียว

วิธีใช้งาน

🚀 เริ่มต้นอย่างรวดเร็ว

เลือกหรือกรอกสี: พิมพ์รูปแบบใดก็ได้ที่รองรับ, hsl(210,100%,56%)) หรือใช้ตัวเลือกสี
แปลงอัตโนมัติ: เมื่อกรอกรูปแบบใดรูปแบบหนึ่ง ช่องรูปแบบอื่นจะอัปเดตตามทันที
คัดลอก: ใช้ปุ่มคัดลอกข้างแต่ละรูปแบบเพื่อรับสตริงมาตรฐาน

📌 สถานการณ์การใช้งานทั่วไป

ส่งต่อดีไซน์: แปลงค่า HEX จากไฟล์ออกแบบให้เป็น CSS RGB/HSL สำหรับนักพัฒนา
คู่มือสไตล์: ทำให้รูปแบบสีและวิธีเขียนค่าสีในไลบรารีคอมโพเนนต์สอดคล้องกัน
อ้างอิงงานพิมพ์: แปลงสีบนจอเป็น CMYK เพื่อใช้เป็นค่าประมาณเบื้องต้น (งานพิมพ์จริงควรมีการปรู๊ฟ)
การเข้าถึง: ใช้ตัวอย่างสีเพื่อประเมินคอนทราสต์คร่าว ๆ (ถ้าต้องการค่าที่แม่นยำควรใช้เครื่องมือเฉพาะด้าน)

🎛️ พารามิเตอร์การแปลงและการแสดงผล

กติกาอินพุต: HEX รองรับเพียง 6 หลัก; RGB อยู่ในช่วง 0–255; H อยู่ในช่วง 0–360; S/L อยู่ในช่วง 0–100; CMYK อยู่ในช่วง 0–100 อินพุตไม่แยกตัวพิมพ์เล็กใหญ่
การพรีวิว: บนเดสก์ท็อปจะแสดงตัวอย่างสีแบบสดทางด้านขวา; บนมือถือใช้โหมดเบาที่ไม่แสดงพรีวิว
ตัวเลือกสี: คลิกปุ่มจานสีที่มุมขวาบนของแต่ละการ์ดเพื่อเปิดตัวเลือกสี
การใช้ตัวพิมพ์ใหญ่ใน HEX: ผลลัพธ์จะถูกปรับเป็นตัวพิมพ์ใหญ่เสมอ; อินพุตไม่แยกตัวพิมพ์เล็กใหญ่ และไม่มีตัวเลือกสลับรูปแบบนี้
ปรับละเอียด: ลากตัวอักษรช่องค่าสีไปซ้าย/ขวา
การคัดลอกผลลัพธ์: ปุ่มคัดลอกจะให้สตริงที่เป็นมาตรฐาน

🧭 คำแนะนำการใช้งาน

ความแม่นยำ: การจัดการสีของอุปกรณ์/หน้าจอแตกต่างกัน ค่าที่ได้จาก eyedropper ในแต่ละแอปอาจไม่เหมือนกันเล็กน้อย
ช่องโปร่งใส: รูปแบบที่ใช้ในเครื่องมือนี้ยังไม่รวมค่า alpha หากต้องการให้ใช้ rgba()/hsla() หรือเก็บค่า alpha แยกต่างหาก
สีสเปซ: บนเว็บโดยทั่วไปใช้ sRGB; หากทำงานใน P3/Display‑P3 ควรตรวจสอบอย่างระมัดระวัง
ความสม่ำเสมอของทีม: ตกลงกันให้ชัดว่าจะใช้รูปแบบสีใดเป็นมาตรฐานใน CSS

⚠️ ข้อจำกัดและความเข้ากันได้

ความต่างของอุปกรณ์: จอ/เบราว์เซอร์/ระบบปฏิบัติการต่างกันอาจจัดการสีต่างกัน ทำให้ภาพที่เห็นไม่เหมือนกัน
ค่า CMYK เป็นค่าประมาณ: ตัวเลขที่ได้เป็นเพียงค่าประเมิน งานพิมพ์จริงควรใช้โปรไฟล์ ICC และเวิร์กโฟลว์ที่เหมาะสม
ไม่มีการประมวลผล alpha: เครื่องมือนี้ไม่รองรับความโปร่งใส

🔒 ความเป็นส่วนตัวและความปลอดภัย

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลจะไม่ออกจากอุปกรณ์

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

รองรับรูปแบบ HEX แบบย่อ #RGB หรือไม่?

ยังไม่รองรับ กรุณาใช้ HEX 6 หลัก

ช่วงค่าของ RGB และ HSL คือเท่าไร?

RGB คือ 0–255 (จำนวนเต็ม); H คือ 0–360 ส่วน S/L คือ 0–100%

ทำไมค่า CMYK ที่ได้จึงไม่ตรงกับผลพิมพ์จริง?

ค่า CMYK ขึ้นกับกระดาษ หมึก อุปกรณ์ และการตั้งค่า ICC ค่าที่นี่เป็นเพียงค่าประมาณ งานพิมพ์จริงควรมีการปรู๊ฟ

รองรับค่า alpha/hsla()) หรือไม่?

ตอนนี้ยังไม่รองรับ alpha; หากต้องการให้ใช้ rgba()/hsla() หรือจัดการค่า alpha แยกต่างหาก

ทำไมตัวอย่างสีหรือค่าที่แปลงจึงไม่ตรงกับในแอปออกแบบ/เบราว์เซอร์?

เพราะการจัดการสี การเรนเดอร์ และการปรับเทียบหน้าจอแตกต่างกัน เครื่องมือนี้คำนวณบนพื้นฐาน sRGB ผลลัพธ์จึงควรใช้เป็นค่าประกอบการอ้างอิง

รองรับสีขอบเขตกว้าง หรือไม่?

ปัจจุบันทำงานบน sRGB เป็นหลัก หากใช้เวิร์กโฟลว์ P3 ควรตรวจสอบกับอุปกรณ์และโปรไฟล์ ICC เป้าหมายโดยตรง

สามารถแปลงจาก CMYK กลับเป็น HEX/RGB ได้ไหม?

รองรับการแปลงกลับ แต่การแปลง CMYK → สีบนหน้าจอเป็นเพียงค่าประมาณ งานพิมพ์ระดับจริงจังควรใช้โปรไฟล์ ICC และทำการปรู๊ฟ