เครื่องมือสลับสี

เกี่ยวกับ เครื่องมือสลับสี

ยนดตอนรบสู่ เครองมอสลบส เครองมออนไลนฟรททรงพลงสำหรับนกออกแบบ นกพฒนา และผเชยวชาญด้านการเขาถง สลบสในรูปแบบ HEX, RGB, HSL และ CMYK ไดทนทดวยการแสดงตวอยางแบบเรยลไทม์ การแสดงภาพวงลอสแบบโตตอบ และการตรวจสอบความตางของสตามมาตรฐาน WCAG ไมว่าคณจะตองการสรางงานออกแบบโหมดมด คนหาสตรงขาม หรอตรวจสอบให้แนใจว่างานออกแบบของคณเปนไปตามมาตรฐานการเขาถง เครองมอนมทกอยางทคณตองการ

สรุปภาพรวม

เครื่องมือสลับสี สร้างสีกลับด้านของสีหนึ่ง ทั้งในรูปค่าลบของ RGB หรือสีคู่ตรงข้าม แสดงสีทั้งสองเคียงข้างกันพร้อมรหัสและอัตราส่วนความคมชัด WCAG

เครื่องมือสลับสี: ฟีเจอร์โดยสรุป

ฟีเจอร์	สิ่งที่ได้รับ	เหมาะสำหรับ
รูปแบบการป้อน	ป้อนสีเป็น HEX, RGB, HSL หรือ CMYK โดยใช้แท็บรูปแบบ ช่องข้อความ ตัวเลือกสี หรือตัวอย่างสี	เริ่มจากรหัสสีที่มีอยู่แล้ว
การกลับค่า RGB	ลบ R, G และ B แต่ละค่าออกจาก 255 การกลับค่าสีแดง #FF0000 ได้สีฟ้าอมเขียว #00FFFF และสีขาวได้สีดำ	ฟิล์มเนกาทีฟของภาพถ่ายและการทดสอบสีโหมดมืด
โหมดคู่ตรงข้าม	บวก 180° เข้ากับเฉดสี และคงความอิ่มตัวกับความสว่างไว้เท่าเดิม	หาสีตัดกันที่กลมกลืนสำหรับชุดสี
ตัวอย่างและวงล้อ	ตัวอย่างสดแสดงสีเดิมและสีที่กลับค่าแล้ว และวงล้อสีระบุตำแหน่งของแต่ละสี	เห็นว่าสีทั้งสองห่างกันเพียงใด
ตรวจความคมชัด	คำนวณอัตราส่วนความคมชัด WCAG ระหว่างสีเดิมกับสีที่กลับค่า และแสดงสถานะ AA และ AAA	ตรวจว่าคู่สีอ่านได้เป็นข้อความกับพื้นหลังหรือไม่
รหัสที่คัดลอกได้	แสดงรหัส HEX, RGB, HSL และ CMYK ของทั้งสองสี และคัดลอกได้ด้วยการคลิก	วางผลลัพธ์ลงในไฟล์ออกแบบและไฟล์สำหรับพิมพ์

การสลบสคออะไร?

การสลบส คอการสรางสตรงขามโดยการนำคา RGB แตละสวนไปลบออกจาก 255 ตามสูตรคณตศาสตร์ โดยสูตรการสลบ RGB มาตรฐานคอ:

ตวอยางเชน การสลบสแดงบรสทธ์ (#FF0000) จะไดสฟาไซแอน (#00FFFF) และการสลบสขาว (#FFFFFF) จะไดสดำ (#000000) ความสมพนธ์ทางคณตศาสตร์นหมายความว่าทกสมสตรงขามเพยงสเดยวเทานน

การสลบส RGB vs สตรงขาม

เครองมอนมโหมดการสลบส 2 แบบทให้ผลลพธ์แตกตางกน:

• การสลบส RGB: นำคา RGB แตละคาไปลบออกจาก 255 เพอสรางสตรงขามทางคณตศาสตร์ทแม่นยำ เหมาะสำหรับภาพเนกาตฟ การแปลงโหมดมด และความตางของสสูงสุด
• สตรงขาม: หมุนไป 180 องศาบนวงลอสโดยการบวก 180 เข้ากบคาสของ HSL ในขณะทคงความอมสและความสวางไว เหมาะสำหรับชดสทมความสมดุลและจานสงานออกแบบ

รูปแบบสทรองรบ

HEX (เลขฐานสบหก)

รูปแบบสเวบทพบไดบอยทสด HEX ใชเลขฐานสบหก 6 หลก (0-9, A-F) เพอแทนคา RGB รูปแบบคอ #RRGGBB โดย RR คอแดง, GG คอเขยว และ BB คอนำเงน แตละคู่มคาตงแต่ 00 (0) ถง FF (255)

RGB (แดง, เขยว, นำเงน)

แบบจำลองสแบบบวกทใชโดยหน้าจอและจอแสดงผล แตละสวนมคาตงแต่ 0 ถง 255 โดย (0,0,0) คอสดำ และ (255,255,255) คอสขาว RGB เปนรูปแบบทเขาใจงายสำหรับการผสมสของแสง

HSL (ส, ความอมส, ความสวาง)

แบบจำลองสทเขาใจงายกวาสำหรับนกออกแบบ Hue (ส) คอองศาบนวงลอส (0-360), Saturation (ความอมส) คอความเขมของส (0-100%) และ Lightness (ความสวาง) (0-100%) HSL ช่วยให้สรางความหลากหลายของสไดงาย

CMYK (ฟา, แดงมวง, เหลอง, ดำ)

แบบจำลองสแบบลบทใชในการพมพ์ แตละสวนมคาตงแต่ 0-100% แทนปรมาณของหมกแตละส คา CMYK มประโยชนในการเตรยมงานออกแบบสำหรับการพมพ์

วธการใชงานเครองมอน

1. เลือกรูปแบบอนพต: เลือกแถบรูปแบบสทคณตองการ (HEX, RGB, HSL หรอ CMYK) ตามวธทคณตองการระบุส
2. ใสสของคณ: ปอนคาสของคณโดยใชช่องพมพ์ขอความ หรอใชเครองมอเลือกสเพอเลือกด้วยตา คลกทตวอยางสเพอการทดสอบอยางรวดเรว
3. เลือกโหมดการสลบส: เลือก RGB Invert สำหรับสตรงขามทางคณตศาสตร์ (255 ลบด้วยคา RGB แตละคา) หรอ Complementary สำหรับสทอยตรงขามบนวงลอส (หมุนสไป 180 องศา)
4. ดผลลพธ์: ดูการแสดงตวอยางแบบเรยลไทม์ทแสดงสเดมของคณคูกบสทสลบแลว การแสดงภาพวงลอสจะแสดงทงสองสและตำแหน่งของมน
5. ตรวจสอบการเขาถง: ตรวสอบอตราสวนความตางตามมาตรฐาน WCAG เพอให้แนใจว่าการผสมสของคณเปนไปตามมาตรฐานการเขาถงสำหรับการอานขอความ
6. คดลอกรหสส: คลกทรูปแบบรหสสใดก็ได้ (HEX, RGB, HSL, CMYK) เพอคดลอกไปยงคลปบอร์ดสำหรับใชในงานออกแบบของคณ

ทำความเขาใจอตราสวนความตางของสตาม WCAG

แนวทางการเขาถงเนอหาเวบ (WCAG) กำหนดอตราสวนความตางขนตำสำหรับการอานขอความ:

WCAG AA (ขนตำ)

• ขอความปกต: ตองการอตราสวนความตาง 4.5:1
• ขอความขนาดใหญ (18pt+ หรอ 14pt+ ตวหนา): ตองการอตราสวนความตาง 3:1

WCAG AAA (ขนสูง)

• ขอความปกต: ตองการอตราสวนความตาง 7:1
• ขอความขนาดใหญ: ตองการอตราสวนความตาง 4.5:1

เครองมอนจะคำนวณอตราสวนความตางระหวางสเดมและสทสลบแลวให้โดยอตโนมต แสดงให้เหนว่าสของคณเปนไปตามมาตรฐาน WCAG AA และ AAA หรอไม่ สงนจำเปนอยางยงในการทำใหงานออกแบบของคณเขาถงไดสำหรับผพการทางสายตา

การประยกต์ใชในทางปฏบต

การออกแบบโหมดมด

การสลบสเปนพนฐานของอนเตอรเฟสโหมดมด การสลบพนหลงสสวางและขอความสมดช่วยให้คณสรางธมมดทเขาถงได อยางไรกตาม การสลบทางคณตศาสตร์เพยงอยางเดวมกตองมการปรบแต่งเพอให้สบายตาในการมอง

การเขาถง

การค้นหาการผสมสทมความตางสูงเปนสงสำคญสำหรับผทสายตาเลือนรางหรอตาบอดสี ตวตรวจสอบความตางของสตามมาตรฐาน WCAG ช่วยให้แนใจว่าขอความของคณยงคงอานไดสำหรับทกคน

การตบแต่งภาพ

การสลบสช่วยสรางภาพเนกาตฟ ซงเปนเอฟเฟกตทางศลปะคลาสสก การทำความเขาใจการสลบสช่วยในการประมวลผลภาพและเอฟเฟกตพเศษ

การสรางแบรนดและการออกแบบ

สตรงขาม (สทอยตรงขามกน 180 องศาบนวงลอส) ช่วยสรางการผสมสทโดดเดนและดงดูดสายตาสำหรับโลโก้ วสดการตลาด และการออกแบบ UI

การเตรยมงานพมพ์

การแปลงระหวาง RGB และ CMYK เปนสงจำเปนเมอเตรยมงานออกแบบสำหรับการพมพ์ เครองมอนจะแสดงคา CMYK สำหรับทงสเดมและสทสลบแลว

วงลอสและสตรงขาม

การแสดงภาพวงลอสแบบโตตอบจะแสดงให้เหนว่าสของคณอยูตรงไหนบนสเปกตรม สตรงขามจะอยูตรงขามกนพอดีบนวงลอ สรางความตางทางสายตาสูงสุดในขณะทรกษาความกลมกลนของส

ความสมพนธ์ของสหลกบนวงลอ:

• สตรงขาม (180 องศา): ความตางสูง การผสมสทสดใส (เชน แดง-ไซแอน, นำเงน-ส้ม)
• สข้างเคยง (อยูตดกน): มความกลมกลน สทคล้ายกนและเข้ากนไดด
• สสามมม (หางกน 120 องศา): สมดุล ชดสสามสทสดใส
• สตรงขามแยก (Split-complementary): มความรุนแรงน้อยกวาสตรงขามโดยตรง แตมความละเอยดออนกวา

คำถามทพบบอย

การสลบสคออะไร?

การสลบสคอกระบวนการสรางสตรงขามโดยการนำคา RGB แตละสวนไปลบออกจาก 255 ตวอยางเชน การสลบสขาว (#FFFFFF ซงมคา RGB เปน 255,255,255) จะไดสดำ (#000000 ซงมคา RGB เปน 0,0,0) สงนจะสรางสทอยตรงขามกนอยางสมบูรณ์บนสเปกตรม RGB ซงมประโยชนในการสรางงานออกแบบทมความตางของสสูงและคณสมบตการเขาถง

สทสลบแลวและสตรงขามแตกตางกนอยางไร?

สทสลบแลว (RGB inversion) คำนวณโดยการนำคา RGB แตละคาไปลบออกจาก 255 เพอให้ไดสตรงขามทางคณตศาสตร์ สวนสตรงขาม (Complementary colors) หาไดจากการหมุนไป 180 องศาบนวงลอส (โดยการบวก 180 เข้ากบคาสของ HSL) แมวาแรงจะสรางสทตดกน แตสตรงขามจะยงคงความอมตวของสและความสวางไวเทาเดม ทำใหดสมดุลกวาในแงของการออกแบบ

ฉนจะตรวจสอบความตางของสเพอการเขาถงไดอยางไร?

WCAG (Web Content Accessibility Guidelines) กำหนดอตราสวนความตางของสเพอการเขาถง โดยขอความปกตตองการอตราสวนความตางอยางนอย 4.5:1 (ระดบ AA) ในขณะทขอความขนาดใหญตองการ 3:1 สำหรับการเขาถงในระดบสูง (ระดบ AAA) ขอความปกตตองการ 7:1 และขอความขนาดใหญตองการ 4.5:1 เครองมอนจะคำนวณอตราสวนความตางระหวางสเดมและสทสลบแลวให้โดยอตโนมต

เครองมอนรองรบรูปแบบสใดบาง?

เครองมอสลบสนรองรบรูปแบบสหลก 4 แบบ: HEX (เลขฐานสบหก เชน #FF5733), RGB (คาแดง, เขยว, นำเงน 0-255), HSL (ส, ความอมส, ความสวาง) และ CMYK (ฟา, แดงมวง, เหลอง, ดำ 0-100%) ทกรูปแบบจะถกแปลงและแสดงผลโดยอตโนมตเพอให้งายตอการคดลอก

ทำไมฉนถงตองสลบส?

การสลบสมประโยชนในการสรางงานออกแบบเวอรชนโหมดมด, สรางชดสทมความตางสูงสำหรับการเขาถง, ออกแบบภาพเนกาตฟและเอฟเฟกตทางศลปะ, ค้นหาสของขอความทอานงายบนพนหลง, สรางจานสตรงขามสำหรับการสรางแบรนด และพฒนาอนเตอรเฟสทตองการการสลบระหวางธมสวางและมด

รายละเอยดทางเทคนค

การแปลงปรภมส

เครองมอนทำงานแปลงระหวางปรภมสอยางแม่นยำโดยใชอลกอรธมมาตรฐาน การแปลง RGB เปน HSL ยงคงความสมพนธ์ของสทมนุษย์รบรู ในขณะทการแปลง CMYK ใชสูตรแบบงายทเหมาะสำหรับการแสดงตวอยางบนหน้าจอ (งานพมพ์ระดบมออาชพอาจตองใชโปรไฟล์ส ICC)

การคำนวณอตราสวนความตาง

อตราสวนความตางตามมาตรฐาน WCAG คำนวณโดยใชคาความสวางสมพทธ์ (Relative Luminance):

โดยท L1 คอความสวางสมพทธ์ของสทสวางกวา และ L2 คอความสวางสมพทธ์ของสทมดกวา ความสวางสมพทธ์นคำนงถงการรบรูของมนุษย์ตอความยาวคลนสทแตกตางกน

แหลงขอมูลเพมเตม

• แนวทางความตางของส WCAG - W3C
• คาส CSS - MDN Web Docs

เครื่องมือสี:

• ตัวแปลง CMYK เป็น HEX
• ตัวแปลงรหัสสี ทุกรูปแบบ ใหม่
• ตัวตรวจสอบความคมชัดของสี
• เครื่องมือสลับสี
• ตัวสร้างโทนสี
• เครื่องสร้างไล่สี
• เครื่องมือแปลง HEX เป็น CMYK
• ตัวแปลง Hex เป็น RGB
• เครื่องมือเลือกสีจากภาพ
• เครื่องคำนวณการผสมสี ใหม่
• เครื่องมือสร้างชุดสี
• เครื่องกำเนิดสีแบบสุ่ม
• ตัวสร้างพาเลทสีสุ่ม
• ตัวแปลง RGB เป็น HEX