ตัวแปลงสี — ตัวแปลง HEX, RGB, HSL ออนไลน์ _

การแปลงสีคืออะไร?

ทุกสีที่เบราว์เซอร์ของคุณเรนเดอร์สุดท้ายแล้วคือทริปเปิล sRGB — ตัวเลขสามตัวระหว่าง 0 ถึง 255 สำหรับช่องสีแดง เขียว และน้ำเงิน บวกอัลฟาที่เป็นทางเลือก ข้อกำหนด CSS Color Level 4 กำหนดรูปแบบข้อความหลายแบบที่ round-trip ไปยังทริปเปิลเดียวกัน บวกกับสเปซ OKLCH ที่สม่ำเสมอเชิงการรับรู้ เครื่องมือนี้อ่านรูปแบบใดก็ได้ แปลงเป็นทุกรูปแบบ และรายงานอัตราส่วนคอนทราสต์ WCAG 2.1 เทียบกับสีที่สอง เพื่อให้คุณสามารถส่งมอบอินเทอร์เฟซที่เข้าถึงได้อย่างมั่นใจ

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

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

1. อินพุตของคุณจะถูกแยกวิเคราะห์ เครื่องมือจะตรวจจับ HEX 3, 4, 6 หรือ 8 หลักโดยอัตโนมัติ รวมถึงรูปแบบฟังก์ชัน rgb()/rgba()/hsl()/hsla()/hsv()/hwb() ทั้งในไวยากรณ์เครื่องหมายจุลภาคแบบเดิมหรือไวยากรณ์ slash-alpha สมัยใหม่ หรือสี CSS ที่มีชื่อทั้ง 150 สี (รวม rebeccapurple)
2. สีที่แยกวิเคราะห์แล้วจะถูกทำให้เป็น sRGB มาตรฐาน — float สี่ตัว {r, g, b, a} แต่ละตัวอยู่ในช่วง 0–1 นี่คือแหล่งข้อมูลเดียวที่ใช้สร้างทุกรูปแบบเอาต์พุต
3. HEX มาจากการปัดเศษแต่ละช่องเป็นค่าไบต์ 0–255 และต่อเลขฐานสิบหก RGB / RGBA พิมพ์ไบต์เดียวกัน HSL และ HSV ใช้อัลกอริทึมพิกัดทรงกระบอกมาตรฐาน W3C; HWB ได้สีตั้งต้นจาก HSV ความขาวจาก min(r, g, b) และความดำจาก 1 - max(r, g, b)
4. CMYK เป็นค่าประมาณแบบเรียบง่าย — k = 1 - max(r, g, b) จากนั้นได้ c, m, y จากช่องที่เหลือ เหมาะสำหรับการแสดงตัวอย่างหน้าจอแต่ไม่ใช่สำหรับงานพิมพ์ เอาต์พุต CMYK จริงต้องใช้โปรไฟล์ ICC ซึ่งเครื่องมือนี้ไม่ฝังไว้โดยตั้งใจ
5. OKLCH เดินตามเส้นทางไปข้างหน้าของ css-color-4: sRGB ถูกทำเชิงเส้น คูณผ่านเมทริกซ์ LMS ถอดรากที่สาม คูณผ่านเมทริกซ์ LMS เป็น OKLab และสุดท้ายแปลงจาก OKLab สี่เหลี่ยมเป็น OKLCH เชิงขั้ว OKLCH สม่ำเสมอเชิงการรับรู้ ซึ่งทำให้มันเป็นสเปซที่เหมาะสำหรับการออกแบบจานสีที่ดูสมดุลต่อสายตามนุษย์

ทำไมจึงใช้ตัวแปลงสีนี้?

• ความเป็นส่วนตัว: ทุกการแปลงทำงานในเบราว์เซอร์ของคุณโดยใช้ JavaScript ธรรมดา สีที่คุณวางไม่เคยออกจากอุปกรณ์ของคุณ ซึ่งสำคัญสำหรับงานแบรนด์ที่ยังไม่เปิดตัว ระบบออกแบบภายในและ mock ของลูกค้าภายใต้ NDA
• การส่งมอบจากนักออกแบบสู่นักพัฒนา: วาง HEX จาก Figma แล้วอ่านสตริง rgb() สำหรับการกำหนดค่า Tailwind สตริง hsl() สำหรับ CSS custom property หรือสตริง oklch() สำหรับจานสีสมัยใหม่ — ทุกรูปแบบในที่เดียว ไม่ต้องคัดลอกวางระหว่างแท็บ
• ความแม่นยำของ WCAG: ตัวตรวจสอบคอนทราสต์ใช้สูตร relative luminance ของ WCAG 2.1 ที่แม่นยำ และเกณฑ์ AA (4.5 / 3.0) และ AAA (7.0 / 4.5) ที่เผยแพร่สำหรับข้อความปกติและข้อความขนาดใหญ่ อัตราส่วนที่รายงานตรงกับเครื่องคิดเลขด้วยมือภายใน 0.01
• การหาค่าโหมดมืดและจานสี: HSL และ OKLCH เปิดเผยความสว่างเป็นช่องเดียว ดังนั้นจึงง่ายที่จะเลื่อนสีแบรนด์ขึ้นหรือลงตามแกนความสว่าง เพื่อหา token โหมดมืดที่จับคู่กัน หรือสร้างจานสี 10 ระดับจากเมล็ดเดียว

การใช้งานทั่วไปของการแปลงสีมีอะไรบ้าง?

การแปลงสีปรากฏอยู่ในงานพัฒนาเว็บ การออกแบบ และการเข้าถึง:

• ระบบออกแบบ: การแปลง HEX ของแบรนด์ไปยัง token HSL และ OKLCH ที่จับคู่กันสำหรับ CSS custom-property scale จากนั้นตรวจสอบว่าการรวม token ทุกชุดผ่าน WCAG AA เมื่อเทียบกับพื้นหลังของหน้า
• การตรวจสอบการเข้าถึง: วางคู่สี foreground และพื้นหลังจากหน้าจอผลิตภัณฑ์จริง และอ่านอัตราส่วนคอนทราสต์พร้อมคำตัดสิน AA/AAA ทั้งสำหรับข้อความน้ำหนักปกติและน้ำหนักใหญ่ในพริบตาเดียว
• การ round-trip ข้ามเครื่องมือ: ดึงสีจากตัวเลือกภาพหน้าจอ (HEX) วางที่นี่ และคัดลอกสตริง hsl() หรือ oklch() ลงใน Tailwind, Figma tokens หรือธีม CSS-in-JS โดยตรง

ตัวอย่างการแปลงสีมีลักษณะอย่างไร?

ลอง rebeccapurple อันโด่งดัง การค้นหาสีที่มีชื่อจะแปลงเป็น #663399 การแปลง RGB ให้ rgb(102, 51, 153) การแปลง HSL ให้ hsl(270, 50%, 40%) — สีม่วงคราม อิ่มตัวครึ่งหนึ่ง สว่างสี่ในสิบ การตรวจสอบสีนั้นกับสีขาวบริสุทธิ์ด้วยเครื่องมือคอนทราสต์ ให้อัตราส่วนใกล้เคียง 7.39 ซึ่งผ่าน AAA (7.0) สำหรับข้อความปกติและ AAA (4.5) สำหรับข้อความขนาดใหญ่ — เป็นตัวเลือก foreground ที่แข็งแกร่งและเข้าถึงได้ การ round-trip #663399 ผ่าน RGB → HSL → RGB → HEX จะคืนสตริงต้นฉบับอย่างแม่นยำ ทุกไบต์

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