ข้ามไปที่เนื้อหา

ตัวแปลงสี

แปลงหนึ่งสีในเบราว์เซอร์ระหว่าง HEX 6 หลัก (#RRGGBB), RGB, HSL และ CMYK พร้อมตัวเลือกสี สีสุ่ม ตัวอย่างแบบสด การปรับช่องสี ค่า CSS แบบ HEX/RGB/HSL ที่คัดลอกได้ และรูปแบบ CMYK สำหรับอ้างอิง

HEX

#

RGB

HSL

CMYK

ตัวแปลงสี

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

1
ป้อน HEX 6 หลักหรือช่อง RGB/HSL/CMYK
2
ใช้ตัวเลือกสีหรือสุ่มสีแล้วตรวจค่าที่ซิงก์

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

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

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

คู่มือสไตล์

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

การอ้างอิงการพิมพ์

แปลงสีของหน้าจอเป็น CMYK เป็นการประมาณการครั้งแรก จากนั้นยืนยันด้วยการพิสูจน์อักษรและขั้นตอนการพิมพ์

การเข้าถึง

ใช้การแสดงตัวอย่างเพื่อตรวจสอบด้วยภาพอย่างรวดเร็วเท่านั้น ใช้เครื่องมือคอนทราสต์เฉพาะสำหรับอัตราส่วนที่แน่นอน

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

กฎการป้อนข้อมูล: HEX รองรับตัวเลข 6 หลักเท่านั้น (#RRGGBB, ไม่รองรับ #RGB, #RGBA, #RRGGBBAA หรือ alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100 อินพุตไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่
การพรีวิว: บนเดสก์ท็อปจะแสดงตัวอย่างสีแบบสดทางด้านขวา; บนมือถือใช้โหมดเบาที่ไม่แสดงพรีวิว
ตัวเลือกสี: ใช้ตัวเลือกสีในการ์ด HEX
การใช้ตัวพิมพ์ใหญ่ใน HEX: ผลลัพธ์จะถูกปรับเป็นตัวพิมพ์ใหญ่เสมอ; อินพุตไม่แยกตัวพิมพ์เล็กใหญ่ และไม่มีตัวเลือกสลับรูปแบบนี้
ปรับละเอียด: ลากตัวอักษรช่องสีไปซ้าย/ขวา (Shift×10, Alt÷0.1)
การคัดลอกผลลัพธ์: ปุ่มคัดลอกจะให้ค่า CSS แบบ HEX, RGB และ HSL ที่เป็นมาตรฐาน (HEX ตัวพิมพ์ใหญ่) หรือรูปแบบ CMYK สำหรับอ้างอิง cmyk(...)

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

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

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

ความต่างของอุปกรณ์: จอ/เบราว์เซอร์/ระบบปฏิบัติการต่างกันอาจจัดการสีต่างกัน ทำให้ภาพที่เห็นไม่เหมือนกัน
CMYK เป็นการประมาณ: ค่าขึ้นอยู่กับโปรไฟล์ ICC กระดาษ หมึก อุปกรณ์ และการพิสูจน์อักษร ใช้ข้อมูลนี้เป็นข้อมูลอ้างอิง ไม่ใช่ค่าพร้อมพิมพ์
ไม่มีอัลฟ่า: เครื่องมือนี้ไม่ประมวลผลค่าความโปร่งใส, rgba(), hsla(), #RGBA หรือ #RRGGBBAA
ชุดย่อยสี CSS: named colors, transparent, currentColor, HWB, HSV/HSB, Lab, LCH, OKLab, OKLCH, Display-P3, device-cmyk(), relative colors, color-mix() และ contrast-color() อยู่นอกเครื่องมือนี้
ไม่มีเครื่องมือรูปภาพหรือจานสี: หน้านี้ไม่ได้ทำการสุ่มตัวอย่างรูปภาพ, ยาหยดหน้าจอ, การสร้างจานสี, การสร้างการไล่ระดับสี, การตรวจสอบอัตราส่วนคอนทราสต์, การส่งออกตัวแปร CSS หรือการส่งออกโทเค็นการออกแบบ

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

การประมวลผลทำงานในเบราว์เซอร์ สีปัจจุบันอาจคงอยู่ในเซสชันเบราว์เซอร์ปัจจุบัน หากบันทึกพื้นที่ทำงานหรือเปิดใช้ WebDAV สีปัจจุบันอาจถูกบันทึกหรือซิงค์เป็นส่วนหนึ่งของพื้นที่ทำงานนั้น ผลลัพธ์ที่คำนวณได้ ประวัติการเลิกทำ และข้อผิดพลาดชั่วคราวจะไม่ถูกจัดเก็บหรือซิงค์เป็นข้อมูลแยกต่างหาก และเครื่องมือนี้ไม่เก็บรายการสีล่าสุด หน้านี้ไม่อ่านรูปภาพ ไม่สุ่มตัวอย่างหน้าจอ ไม่ดึง URL และไม่ส่งสีไปแปลงบนเซิร์ฟเวอร์ บนอุปกรณ์ที่ใช้ร่วมกัน ให้ล้างสีและข้อมูลเว็บไซต์เมื่อจำเป็น

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

5

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

เกี่ยวกับเรา

เกี่ยวกับเรา
ราคา

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