ข้ามไปที่เนื้อหา
โลโก้ CrateX.app

CrateX.app

ตัวแปลงสี

ตัวแปลงสี

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

HEX

#

RGB

HSL

CMYK
ตัวแปลงสี

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

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

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

ส่งต่อดีไซน์

แปลงค่า HEX จากไฟล์ออกแบบให้เป็น CSS RGB/HSL สำหรับนักพัฒนา

คู่มือสไตล์

ทำให้รูปแบบสีและวิธีเขียนค่าสีในไลบรารีคอมโพเนนต์สอดคล้องกัน

อ้างอิงงานพิมพ์

แปลงสีบนจอเป็น CMYK เพื่อใช้เป็นค่าประมาณเบื้องต้น (งานพิมพ์จริงควรมีการปรู๊ฟ)

การเข้าถึง

ใช้ตัวอย่างสีเพื่อประเมินคอนทราสต์คร่าว ๆ (ถ้าต้องการค่าที่แม่นยำควรใช้เครื่องมือเฉพาะด้าน)

สถานการณ์เสริม

ตัวเลือกสี, แปลงโค้ดสี และ ตัวแปลง HSL ก็จัดการในขั้นตอนเดียวกันได้ ช่วยตรวจผลลัพธ์ให้เร็วขึ้นก่อนคัดลอกหรือส่งออก

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

กติกาอินพุต: 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: เครื่องมือนี้ไม่รองรับความโปร่งใส

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

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

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

5

ขั้นตอนถัดไปสามารถทำต่อด้วยเครื่องมือที่เกี่ยวข้องเหล่านี้