ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

แปลงสี

แปลงระหว่าง HEX, RGB, HSL, HSV และ CMYK ดูตัวอย่างสดๆ ตรวจสอบความคมชัด WCAG เพื่อการเข้าถึง ไม่มีข้อมูลออกจากเบราว์เซอร์

แปลงสี ทำงานอย่างไร

Color Converter แปลงสีระหว่างรูปแบบ HEX, RGB, HSL, HSV และ CMYK ทันทีขณะที่คุณพิมพ์ ยังรัน WCAG contrast check ระหว่างสองสีที่คุณเลือก แสดงอัตราส่วนความคมชัดและผลผ่าน/ไม่ผ่านของ AA/AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และ UI components การคำนวณทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยไม่ส่งข้อมูลที่ใด ไม่มีสิ่งใดที่คุณพิมพ์ออกจากอุปกรณ์

การเข้าใจว่าสีเดียวกันมีลักษณะอย่างไรในรูปแบบสีต่าง ๆ มีประโยชน์ในการส่งมอบงานออกแบบ นักออกแบบอาจระบุสีแบรนด์เป็น HEX #1A4F8C นักพัฒนา CSS ต้องการ HSL เทียบเท่าสำหรับ theming ทีมสิ่งพิมพ์ต้องการรายละเอียด CMYK เครื่องมือนี้ทำการแปลงทุกทิศทางพร้อมกันเพื่อไม่ต้องรัน converters แยกหลายตัว

เขียนโดย Bastien Sulyan

วิธีใช้ แปลงสี ทีละขั้นตอน

  1. พิมพ์ค่า HEX คลิก color swatch หรือป้อนค่า RGB, HSL, HSV หรือ CMYK ลงในช่องตามลำดับ
  2. การแสดงรูปแบบอื่นทั้งหมดอัปเดตทันทีเพื่อแสดงสีเทียบเท่า
  3. หากต้องการรัน contrast check ให้เลือกสีพื้นหน้าและสีพื้นหลังโดยใช้สอง color pickers
  4. อ่านอัตราส่วนความคมชัด WCAG และ badge ผ่าน/ไม่ผ่านสำหรับระดับ AA และ AAA
  5. คัดลอกค่าสีใด ๆ โดยใช้ไอคอนคัดลอกข้างแต่ละช่อง

กรณีการใช้งานที่พบบ่อย

  • นักออกแบบ UI แปลงรหัส HEX ของแบรนด์เป็น HSL เพื่อเขียน CSS custom property สำหรับระบบ theming
  • นักพัฒนาเว็บตรวจสอบอัตราส่วนความคมชัดระหว่างสีข้อความและพื้นหลังก่อนส่ง component เพื่อยืนยันการปฏิบัติตาม WCAG AA
  • นักออกแบบสิ่งพิมพ์ได้รับสี HEX เว็บและต้องการ CMYK เทียบเท่าเพื่อจับคู่ในโบรชัวร์ที่พิมพ์
  • นักพัฒนาต้องการรายละเอียด RGB ของ design token เพื่อส่งค่า channel แต่ละตัวไปยังฟังก์ชันการวาด canvas

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

เครื่องมือรองรับค่า alpha (ความโปร่งใส) หรือไม่?

converter ปัจจุบันทำงานกับสีทึบสมบูรณ์ (alpha = 1) HEXA (8-digit hex) และ RGBA ยังไม่อยู่ในขอบเขต สำหรับ opacity ให้ตั้งค่า alpha channel ใน CSS แยกต่างหากโดยใช้ notation rgba() หรือ oklch()

สีที่ฉันป้อนถูกจัดเก็บหรือส่งที่ใดหรือไม่?

ไม่ การแปลงสีเป็นเลขคณิตบริสุทธิ์ (channel remapping และ range scaling) ที่ทำงานทั้งหมดใน JavaScript engine ของเบราว์เซอร์ ไม่มีสิ่งใดที่คุณพิมพ์ที่นี่ถึงเซิร์ฟเวอร์หรือบริการภายนอก

ตัวตรวจสอบรองรับระดับ WCAG contrast ใดบ้าง?

เครื่องมือรายงานตาม WCAG 2.1 success criteria: AA ต้องการอัตราส่วนความคมชัดขั้นต่ำ 4.5:1 สำหรับข้อความปกติ (ต่ำกว่า 18pt หรือ 14pt bold) และ 3:1 สำหรับข้อความขนาดใหญ่และ UI components AAA ต้องการ 7:1 สำหรับข้อความปกติและ 4.5:1 สำหรับข้อความขนาดใหญ่

ทำไมค่า CMYK จึงแตกต่างระหว่างเครื่องมือนี้กับซอฟต์แวร์ออกแบบระดับมืออาชีพ?

การแปลง RGB-to-CMYK ที่เครื่องมือนี้ดำเนินการเป็นสูตรทางคณิตศาสตร์โดยไม่มี color profile แอปพลิเคชันออกแบบระดับมืออาชีพใช้ ICC color profiles ที่คำนึงถึง ink dot gain และคุณสมบัติ substrate ค่า CMYK ที่นี่มีประโยชน์สำหรับการประมาณ สำหรับการพิมพ์จริง ควรใช้ press profile ในซอฟต์แวร์เฉพาะเสมอ

ฉันสามารถแปลง CSS color name เช่น cornflowerblue ที่นี่ได้หรือไม่?

CSS named colors ไม่สามารถพิมพ์โดยตรงลงในช่อง converter หากต้องการแปลง named color ให้ค้นหาค่า HEX ก่อนในการอ้างอิง CSS (cornflowerblue คือ #6495ED) จากนั้นวาง HEX นั้นลงในช่อง HEX เพื่อดูรูปแบบอื่นทั้งหมด

เครื่องมือทำงานออฟไลน์หลังจากโหลดหน้าแล้วหรือไม่?

ได้ การแปลงสีเป็นเลขคณิตที่ไม่มีการพึ่งพาภายนอก เมื่อหน้าอยู่ใน browser cache คุณสามารถเปิดโดยไม่มีการเชื่อมต่อเครือข่ายและการแปลงทั้งหมดจะทำงานตามปกติ

เครื่องมือที่เกี่ยวข้อง

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือนักพัฒนาทั้งหมด