CrateX.app

ตัวแปลงสี

แปลงหนึ่งสีในเครื่องระหว่าง HEX, RGB, HSL และ CMYK ด้วยตัวเลือกสี สีสุ่ม การแสดงตัวอย่างสด การควบคุมช่องสัญญาณ และสตริง CSS ที่พร้อมทำสำเนา

HEX

RGB

HSL

CMYK

ตัวแปลงสี

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

ป้อน HEX 6 หลักหรือช่อง RGB/HSL/CMYK

ใช้ตัวเลือกสีหรือสุ่มสีแล้วตรวจค่าที่ซิงก์

คัดลอกสตริง CSS แบบ HEX, RGB, HSL หรือ CMYK

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

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

แปลงค่า 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: ผลลัพธ์จะถูกปรับเป็นตัวพิมพ์ใหญ่เสมอ; อินพุตไม่แยกตัวพิมพ์เล็กใหญ่ และไม่มีตัวเลือกสลับรูปแบบนี้

ปรับละเอียด: ลากตัวอักษรช่องค่าสีไปซ้าย/ขวา

การคัดลอกผลลัพธ์: ปุ่มคัดลอกจะให้สตริงที่เป็นมาตรฐาน

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

ความแม่นยำ: การจัดการสีของอุปกรณ์/หน้าจอแตกต่างกัน ค่าที่ได้จาก 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 หรือการส่งออกโทเค็นการออกแบบ

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

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

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

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

ตัวแปลงสี

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

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

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

คู่มือสไตล์

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

การเข้าถึง

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

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

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

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

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

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

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

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

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

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

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