ตัวแปลงรหัสสี ทุกรูปแบบ

ยินดีต้อนรับสู่ ตัวแปลงรหัสสี ทุกรูปแบบ (All Formats) เครื่องมือออนไลน์ฟรีที่แปลงค่าสีใดๆ ให้เป็นทุกรูปแบบทั่วไปในครั้งเดียว เพียงวางรหัส HEX, ชุดสี RGB, คำจำกัดความ HSL หรือ HSV, ชุดสี CMYK หรือแม้แต่ชื่อสี CSS — แล้วอ่านค่าที่เทียบเท่าได้ทันที พร้อมดูแถบสีตัวอย่างแบบสด ตรวจสอบคอนทราสต์สำหรับการเข้าถึงตามมาตรฐาน WCAG และสำรวจจานสีสำหรับนักออกแบบที่สร้างขึ้น ทั้งสีคู่ตรงข้าม, สีสามเส้า, สีข้างเคียง, Tints และ Shades

ทำไมต้องใช้ตัวแปลงสีแบบ All-in-one?

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

รูปแบบอินพุตที่รองรับ

โมเดลสี HSL และ HSV แตกต่างกันอย่างไร?

ทั้ง HSL และ HSV อธิบายสีผ่านสามช่องสีที่เข้าใจง่าย — Hue (ค่าสี), Saturation (ความอิ่มตัว) และค่าที่สามที่เกี่ยวข้องกับความสว่าง — แต่ต่างกันที่ช่องสีที่สามนั้น

• HSL — Hue, Saturation, Lightness: ค่าความสว่าง (Lightness) มีตั้งแต่ 0% (ดำบริสุทธิ์) ไปจนถึง 50% (เวอร์ชันที่สดใสที่สุดของค่านั้น) จนถึง 100% (ขาวบริสุทธิ์) HSL เป็นที่นิยมใน CSS เพราะทำให้การทำให้สีสว่างขึ้นหรือเข้มขึ้นมีความสมมาตรและคาดเดาได้
• HSV / HSB — Hue, Saturation, Value (Brightness): ค่า Value มีตั้งแต่ 0% (ดำบริสุทธิ์) จนถึง 100% (เวอร์ชันที่อิ่มตัวและเต็มที่สุดของค่านั้น) HSV เป็นโมเดลที่อยู่เบื้องหลังตัวเลือกสีใน Photoshop, Figma และเครื่องมือออกแบบบนเดสก์ท็อปส่วนใหญ่

ตัวอย่างเช่น สีแดงที่อิ่มตัวเต็มที่คือ hsl(0, 100%, 50%) ใน HSL แต่เป็น hsv(0, 100%, 100%) ใน HSV เป็นสีเดียวกันในสองโมเดลทางความคิดที่แตกต่างกัน — ซึ่งมีประโยชน์ทั้งคู่ ขึ้นอยู่กับว่าคุณกำลังคิดแบบผู้เขียน CSS หรือแบบจิตรกร

ทำไมค่า CMYK ของฉันจึงดูแตกต่างจากซอฟต์แวร์การพิมพ์เล็กน้อย?

RGB เป็นโมเดลแบบบวก (additive) ที่ใช้โดยหน้าจอ ในขณะที่ CMYK เป็นโมเดลแบบลบ (subtractive) ที่ใช้โดยเครื่องพิมพ์ การแปลงทางคณิตศาสตร์ที่เครื่องมือนี้ทำเป็นการประมาณค่าอย่างรวดเร็วซึ่งไม่รวมโปรไฟล์สี ICC, ขีดจำกัดการครอบคลุมของหมึก หรือการปรับเปลี่ยนเฉพาะกระดาษ สำหรับงานพิมพ์จริง ให้พึ่งพาโปรไฟล์ CMYK ที่จัดการสีของซอฟต์แวร์ออกแบบของคุณเสมอ (เช่น US Web Coated SWOP v2 หรือ Coated FOGRA39) ใช้ตัวแปลงนี้เป็นข้อมูลอ้างอิงที่รวดเร็วเมื่อคุณเพียงแค่ต้องการชุดสี CMYK ที่ "ใกล้เคียงพอ" สำหรับการพูดคุยเรื่องการออกแบบในระยะเริ่มต้น

การตรวจสอบคอนทราสต์ของ WCAG ทำงานอย่างไร?

แนวทางการเข้าถึงเนื้อหาเว็บ (Web Content Accessibility Guidelines) กำหนดอัตราส่วนคอนทราสต์ระหว่างสองสีตามความสว่างสัมพัทธ์ (relative luminance) — ซึ่งเป็นโมเดลความสว่างเชิงการรับรู้ที่ให้น้ำหนักสีเขียวมากกว่าสีแดง และสีแดงมากกว่าสีน้ำเงิน อัตราส่วนมีตั้งแต่ 1:1 (ไม่มีคอนทราสต์เลย) ถึง 21:1 (สีดำบริสุทธิ์บนสีขาวบริสุทธิ์)

• AAA — อัตราส่วน ≥ 7:1, ตรงตามระดับการเข้าถึงที่เข้มงวดที่สุดสำหรับข้อความเนื้อหา
• AA — อัตราส่วน ≥ 4.5:1, ขั้นต่ำสำหรับข้อความเนื้อหาในกฎระเบียบส่วนใหญ่
• AA Large — อัตราส่วน ≥ 3:1, เพียงพอสำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt ตัวหนา) และองค์ประกอบ UI แบบกราฟิก
• Fail — อัตราส่วน < 3:1, ไม่ควรใช้การผสมสีนี้สำหรับข้อความ

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

ตัวแปลงนี้สามารถสร้างจานสีได้หรือไม่?

ใช่ หลังจากทุกการแปลง เครื่องมือจะสร้างจานสีสำหรับนักออกแบบจาก Hue เดียวกัน ซึ่งรวมถึง:

• สีคู่ตรงข้าม (Complementary) — สีที่อยู่ตรงข้ามกันโดยตรงบนวงล้อ (หมุนค่าสี 180°) มีประโยชน์สำหรับจุดเน้นที่มีคอนทราสต์สูง
• สีสามเส้า (Triadic) — สองสีที่ห่างกันเท่าๆ กัน 120° ให้ความสมดุลและมีชีวิตชีวา
• สีข้างเคียง (Analogous) — ค่าสีที่อยู่ติดกันที่ ±30° มีประโยชน์สำหรับการทำไล่เฉดสีและพื้นหลังที่กลมกลืนกัน
• Tints — รูปแบบที่สว่างกว่าสามรูปแบบ (Hue เดียวกัน แต่ความสว่างสูงกว่า)
• Shades — รูปแบบที่เข้มกว่าสามรูปแบบ (Hue เดียวกัน แต่ความสว่างต่ำกว่า)

คลิกที่แถบจานสีใดก็ได้เพื่อโหลดเข้าสู่ตัวแปลงทันทีเพื่อเป็นจุดเริ่มต้นใหม่ — เหมาะสำหรับการทำซ้ำอย่างรวดเร็วกับสีแบรนด์, ชุดไอคอน หรือธีม UI

วิธีใช้งานเครื่องมือนี้

1. กรอกหรือเลือกสี — พิมพ์ค่าใดก็ได้ (HEX, RGB, HSL, HSV, CMYK หรือชื่อสี CSS) ลงในช่องอินพุต หรือคลิกแถบสีขนาดเล็กเพื่อเปิดตัวเลือกสีพื้นฐานของเบราว์เซอร์
2. แปลงค่า — คลิกปุ่มแปลง เครื่องมือจะตรวจหารูปแบบที่คุณให้มาโดยอัตโนมัติและคำนวณรูปแบบอื่นๆ ทั้งหมด
3. คัดลอกสิ่งที่คุณต้องการ — คลิกปุ่มคัดลอกแบบแตะครั้งเดียวข้างค่ารูปแบบ ปุ่มจะแสดงเครื่องหมายถูกสั้นๆ เพื่อยืนยันว่าค่าน้นอยู่ในคลิปบอร์ดของคุณแล้ว
4. ตรวจสอบการเข้าถึง — ตรวจสอบอัตราส่วนคอนทราสต์ของ WCAG เทียบกับสีขาวบริสุทธิ์และสีดำบริสุทธิ์เพื่อยืนยันว่าสีนั้นอ่านง่ายในฐานะข้อความหรือพื้นหลังหรือไม่
5. สำรวจจานสี — คลิกแถบสีใดก็ได้ในส่วนจานสีสำหรับนักออกแบบเพื่อแปลงค่า ขยายการสำรวจงานออกแบบของคุณโดยไม่ต้องออกจากหน้าเว็บ

กรณีใช้งานจริง

สำหรับนักพัฒนาเว็บ

• แปลง HEX จากม็อคอัพ Figma เป็น hsl() เพื่อใช้กับคุณสมบัติกำหนดเองของ CSS (CSS custom properties) และระบบธีมสมัยใหม่
• สร้างค่า rgba() สำหรับการวางเลเยอร์โปร่งใสจากสี HEX ของแบรนด์โดยตรง
• ตรวจสอบว่าสีของแบรนด์เป็นไปตามมาตรฐาน WCAG AA บนพื้นหลังสีขาวก่อนส่งงาน

สำหรับกราฟิกดีไซเนอร์

• แปลสี CSS จากเว็บไซต์ให้เป็นค่า CMYK โดยประมาณสำหรับม็อคอัพงานพิมพ์
• สร้างสเกลสี (Tints และ Shades) จากสีเริ่มต้นสีเดียว
• ค้นหาสีเน้นแบบคู่ตรงข้ามหรือสีสามเส้าได้โดยไม่ต้องออกจากเบราว์เซอร์

สำหรับนักออกแบบ UI และผลิตภัณฑ์

• ทำงานข้ามไปมาระหว่าง HSV (ตัวเลือกของ Figma) และ HSL (CSS) เมื่อจัดทำเอกสาร Design Tokens
• ระบุสีข้อความที่ดีที่สุด (ดำ vs ขาว) โดยอัตโนมัติสำหรับพื้นหลังใดๆ
• บุ๊กมาร์กหรือแชร์สีที่แปลงแล้วได้อย่างรวดเร็วผ่าน URL ของหน้าผลลัพธ์

เคล็ดลับเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

• ยืดหยุ่นกับตัวคั่น — ตัวแยกส่วนรองรับทั้งเครื่องหมายจุลภาค, ช่องว่าง หรือสแลชภายในวงเล็บ ดังนั้น rgb(79 70 229) จึงใช้งานได้เช่นเดียวกับ rgb(79, 70, 229)
• ใช้เปอร์เซ็นต์ตามความเหมาะสม — rgb(31%, 27%, 90%) เป็นค่าที่ถูกต้อง เครื่องมือจะแปลงเปอร์เซ็นต์เป็น 0–255 ภายในระบบ
• ลองใช้ชื่อสี CSS — ใช้งานได้มากกว่า 140 ชื่อ รวมถึงชื่อที่เพิ่มเข้ามาใหม่ เช่น rebeccapurple
• อ่านแถบช่องสี — การแจกแจงภาพของช่องสี แดง/เขียว/น้ำเงิน และ CMYK ทำให้ง่ายต่อการดูว่าหมึกใดมีความโดดเด่นในเวอร์ชันพิมพ์ของสีนั้น
• ถือว่า CMYK เป็นเพียงแนวทาง — เปิดผลลัพธ์ในซอฟต์แวร์การพิมพ์ที่จัดการสีของคุณเพื่อให้ได้ค่าที่ถูกต้องที่สุดในขั้นตอนสุดท้าย

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

ฉันจำเป็นต้องใส่สัญลักษณ์ # เมื่อกรอกค่า HEX หรือไม่?

ไม่จำเป็น ทั้ง #4f46e5 และ 4f46e5 สามารถใช้งานได้ทั้งหมด การใส่ # นำหน้าเป็นทางเลือก

รองรับค่า HEX แบบ 4 หลักและ 8 หลัก (พร้อมอัลฟ่า) หรือไม่?

ตัวแยกส่วนจะยอมรับค่านั้น แต่ช่องอัลฟ่าจะถูกตัดออกในระหว่างการแปลง เนื่องจาก RGB, HSL, HSV และ CMYK ในรูปแบบคลาสสิกไม่มีค่าอัลฟ่า เครื่องมือนี้เน้นที่ส่วนของสีเท่านั้น

ฉันสามารถแชร์หรือบุ๊กมาร์กสีที่แปลงแล้วได้หรือไม่?

ได้ แบบฟอร์มจะส่งผ่าน GET ดังนั้น URL จะมีสีที่คุณแปลง คัดลอก URL ของหน้าหลังจากแปลงเพื่อแชร์หรือบุ๊กมาร์กหน้าผลลัพธ์ที่แน่นอน

ทำไมค่า HEX บางค่าจึงแสดงเป็นตัวอักษรพิมพ์ใหญ่?

ผลลัพธ์จะปรับค่า HEX ให้เป็นตัวพิมพ์ใหญ่ตามมาตรฐาน (เช่น #4F46E5) ซึ่งเป็นรูปแบบที่ใช้ในคู่มือการออกแบบและสไตล์ของแบรนด์มากมาย คุณสามารถวางกลับเป็นตัวพิมพ์เล็กได้หากต้องการ — ทั้งสองแบบมีค่าเท่ากัน

ใช้งานบนอุปกรณ์มือถือได้หรือไม่?

ได้ อินเทอร์เฟซรองรับการแสดงผลแบบตอบสนอง (Responsive) อย่างเต็มที่ และแบบฟอร์ม จานสี และการ์ดคอนทราสต์จะปรับโครงสร้างเป็นคอลัมน์เดียวบนหน้าจอขนาดเล็กเพื่อประสบการณ์การสัมผัสที่สะดวกสบาย

แหล่งข้อมูลเพิ่มเติม

• HSL และ HSV - Wikipedia
• โมเดลสี CMYK - Wikipedia
• ข้อกำหนดคอนทราสต์ WCAG 2.1 (ขั้นต่ำ)