ตัวแปลง Hex เป็น RGB

ยินดีต้อนรับสู่ ตัวแปลง Hex เป็น RGB เครื่องมือแปลงค่าสีที่ครอบคลุม ซึ่งจะเปลี่ยนรหัสสีฐานสิบหกให้เป็นค่า RGB, RGBA, HSL, HSLA และ CMYK ได้ทันที ไม่ว่าคุณจะเป็นนักออกแบบเว็บไซต์ นักพัฒนา หรือศิลปินดิจิทัล เครื่องมือนี้จะช่วยให้คุณดูตัวอย่างสีแบบเรียลไทม์ มีฟังก์ชันคัดลอกในคลิกเดียว สร้างสีคู่ตรงข้าม และตรวจสอบความต่างของสีตามมาตรฐาน WCAG

รหัสสี Hex คืออะไร?

รหัสสี Hex (Hexadecimal color) คือรหัส 6 หลักที่ใช้แทนค่าสีในการออกแบบเว็บ, CSS และกราฟิกดิจิทัล รหัสนี้ประกอบด้วยตัวเลขฐานสิบหกสามคู่ (0-9 และ A-F) ซึ่งแสดงถึงความเข้มของส่วนประกอบสีแดง สีเขียว และสีน้ำเงิน แต่ละคู่มีค่าตั้งแต่ 00 (ต่ำสุด, 0) ถึง FF (สูงสุด, 255)

ตัวอย่างเช่น #FF5733 แยกย่อยได้ดังนี้:

• FF = 255 แดง (ความเข้มสีแดงสูงสุด)
• 57 = 87 เขียว (ความเข้มสีเขียวปานกลาง)
• 33 = 51 น้ำเงิน (ความเข้มสีน้ำเงินต่ำ)

ผลลัพธ์ที่ได้คือสีส้มคอรัลที่สดใส สัญลักษณ์ # เป็นตัวเลือกเสริมแต่นิยมใส่ไว้เพื่อระบุว่าค่านั้นเป็นรหัสสี hex

รหัสย่อ 3 หลัก

เมื่อคู่สีทั้งสามคู่ใช้ตัวเลขซ้ำกัน คุณสามารถใช้รหัสย่อ 3 หลักได้ ตัวอย่างเช่น #FF5533 ไม่สามารถย่อได้ แต่ #FFAA00 สามารถเขียนเป็น #FA0 ได้ โดยแต่ละหลักจะถูกเพิ่มเป็นสองเท่าโดยอัตโนมัติ: F กลายเป็น FF, A กลายเป็น AA, 0 กลายเป็น 00

วิธีแปลง Hex เป็น RGB

การแปลง hex เป็น RGB เกี่ยวข้องกับการแปลงตัวเลขฐานสิบหกแต่ละคู่เป็นค่าฐานสิบที่เทียบเท่ากัน:

1. ลบเครื่องหมาย # (ถ้ามี)
2. แบ่งเป็นคู่: แบ่งตัวเลข 6 หลักออกเป็น 3 คู่ (RR, GG, BB)
3. แปลงแต่ละคู่: แปลงจากฐาน 16 (ฐานสิบหก) เป็นฐาน 10 (ฐานสิบ)

การแปลงฐานสิบหกเป็นฐานสิบ

ตำแหน่งตัวเลข hex แต่ละตำแหน่งมีค่า: หลักแรกคูณด้วย 16 และบวกด้วยหลักที่สอง สำหรับคู่ hex "5A":

5 × 16 + 10 (A) = 80 + 10 = 90

ทำความเข้าใจรูปแบบสี

RGB และ RGBA

RGB (Red, Green, Blue) ใช้ค่าสามค่าตั้งแต่ 0-255 เพื่อกำหนดสี RGBA จะเพิ่มช่อง Alpha (0 ถึง 1) สำหรับความโปร่งใส RGB(255, 87, 51) คือสีทึบ ในขณะที่ RGBA(255, 87, 51, 0.5) คือสีที่โปร่งใส 50%

HSL และ HSLA

HSL (Hue, Saturation, Lightness) มักจะเข้าใจง่ายกว่าสำหรับนักออกแบบ:

• Hue (เฉดสี): ตำแหน่งบนวงล้อสี (0-360 องศา) 0=แดง, 120=เขียว, 240=น้ำเงิน
• Saturation (ความอิ่มตัว): ความเข้มของสี (0-100%) 0% คือสีเทา, 100% คือสีที่สดใสที่สุด
• Lightness (ความสว่าง): ความสว่าง (0-100%) 0% คือสีดำ, 100% คือสีขาว, 50% คือสีบริสุทธิ์

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) ใช้สำหรับการพิมพ์ ในขณะที่หน้าจอใช้การผสมสีแบบบวก (RGB) เครื่องพิมพ์จะใช้การผสมสีแบบลบ (CMYK) สีอาจดูแตกต่างกันเมื่อพิมพ์ออกมา ดังนั้นการตรวจสอบค่า CMYK จะช่วยให้มั่นใจได้ว่าสีในงานพิมพ์จะออกมาถูกต้อง

ทฤษฎีสี: สีคู่ตรงข้ามและสีแบบ Triadic

สีคู่ตรงข้าม (Complementary Colors)

สีคู่ตรงข้าม จะอยู่ตรงข้ามกันบนวงล้อสี ซึ่งช่วยสร้างความตัดกันสูงสุด สีคู่ตรงข้ามบนวงล้อสีหาได้โดยหมุนเฉดสี 180° โดยคงความอิ่มสีและความสว่างเท่าเดิม การลบค่า RGB แต่ละค่าออกจาก 255 จะได้ค่าสีเนกาทีฟ RGB ไม่ใช่สีคู่ตรงข้ามบนวงล้อ ดูความแตกต่างได้ที่ /color-inverter/ คู่สีตรงข้ามมักใช้สำหรับ:

• ปุ่ม Call-to-action ที่ต้องการให้โดดเด่น
• การออกแบบโลโก้ที่ต้องการผลกระทบทางสายตา
• การสร้างความตื่นเต้นและพลังงานในงานดีไซน์

สีแบบ Triadic (Triadic Colors)

สีแบบ Triadic คือสีสามสีที่เว้นระยะห่างเท่าๆ กันบนวงล้อสี (ห่างกัน 120 องศา) ช่วยสร้างจานสีที่สดใสและสมดุลซึ่งยังคงความกลมกลืนในขณะที่ให้ความหลากหลาย รูปแบบนี้เป็นที่นิยมในการออกแบบกราฟิกและการสร้างแบรนด์

มาตรฐาน WCAG และความตัดกันของสี

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดอัตราส่วนความต่างของสีเพื่อให้ข้อความอ่านง่าย:

• ระดับ AAA (7:1): ยอดเยี่ยม - มาตรฐานการเข้าถึงสูงสุด
• ระดับ AA (4.5:1): ดี - ขั้นต่ำสำหรับข้อความปกติ
• ระดับ AA Large (3:1): ยอมรับได้สำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt ตัวหนา)
• ไม่ผ่าน (<3:1): ความต่างไม่เพียงพอสำหรับการเข้าถึง

เครื่องมือของเราคำนวณอัตราส่วนความต่างของสีทั้งบนพื้นหลังสีขาวและสีดำ เพื่อช่วยคุณเลือกสีข้อความที่เหมาะสมสำหรับการออกแบบ

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

1. กรอกรหัส hex ของคุณ: พิมพ์หรือวางสี hex (จะมี # หรือไม่ก็ได้) รองรับทั้งรูปแบบ 6 หลักและ 3 หลัก
2. ตั้งค่า alpha (ไม่บังคับ): ปรับความโปร่งใสจาก 0 (มองไม่เห็น) เป็น 1 (ทึบ) สำหรับเอาต์พุต RGBA/HSLA
3. คลิก แปลง: ดูค่า RGB, HSL, CMYK และตัวอย่างสีได้ทันที
4. คัดลอกรูปแบบใดก็ได้: คลิกปุ่มคัดลอกเพื่อนำค่าไปไว้ในคลิปบอร์ด
5. สำรวจจานสี: ดูสีคู่ตรงข้าม, รูปแบบ triadic, เฉดสี และทินต์ เพื่อเป็นแรงบันดาลใจในการออกแบบ

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

รหัสสี hex คืออะไร?

รหัสสี hex คือการแทนค่าสีด้วยเลขฐานสิบหก 6 หลัก (หรือ 3 หลักแบบย่อ) ที่ใช้ในการออกแบบเว็บและกราฟิกดิจิทัล โดยเริ่มต้นด้วยสัญลักษณ์ # ตามด้วยตัวอักษรหกตัว (0-9 และ A-F) ซึ่งแสดงถึงส่วนประกอบของสีแดง สีเขียว และสีน้ำเงิน ตัวอย่างเช่น #FF5733 แทนสีส้มคอรัลที่มีค่า Red=255, Green=87, Blue=51

ฉันจะแปลง hex เป็น RGB ได้อย่างไร?

วิธีแปลง hex เป็น RGB ด้วยตนเอง: 1) ลบเครื่องหมาย # ออก 2) แบ่งตัวเลข 6 หลักออกเป็น 3 คู่ (RR, GG, BB) 3) แปลงแต่ละคู่จากเลขฐานสิบหกเป็นฐานสิบ ตัวอย่างเช่น #FF5733: FF=255 (แดง), 57=87 (เขียว), 33=51 (น้ำเงิน) จะได้ RGB(255, 87, 51) เครื่องมือของเราจะทำสิ่งนี้ให้คุณทันที

RGB และ RGBA แตกต่างกันอย่างไร?

RGB ระบุสีโดยใช้ค่าสีแดง สีเขียว และสีน้ำเงิน (ค่าละ 0-255) ส่วน RGBA จะเพิ่มช่อง Alpha (0-1) สำหรับความโปร่งใส RGB(255, 87, 51) คือสีทึบ ในขณะที่ RGBA(255, 87, 51, 0.5) คือสีเดียวกันที่ความโปร่งใส 50% RGBA มีความสำคัญต่อการสร้างเลเยอร์และเอฟเฟกต์กึ่งโปร่งใส

รูปแบบสี HSL คืออะไร?

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

CMYK คืออะไรและควรใช้เมื่อใด?

CMYK ย่อมาจาก Cyan (ฟ้าอมเขียว), Magenta (ม่วงแดง), Yellow (เหลือง) และ Key (ดำ) เป็นโมเดลสีที่ใช้ในงานพิมพ์ ในขณะที่ hex และ RGB ใช้สำหรับหน้าจอ (ระบบสีแบบบวก) CMYK จะใช้สำหรับการพิมพ์ (ระบบสีแบบลบ) หากงานออกแบบของคุณต้องนำไปพิมพ์ คุณควรตรวจสอบค่า CMYK เพื่อให้แน่ใจว่าสีมีความแม่นยำ

สีคู่ตรงข้ามคืออะไร?

สีคู่ตรงข้ามคือสีที่อยู่ฝั่งตรงข้ามกันพอดีบนวงล้อสี ซึ่งช่วยสร้างความตัดกันสูงสุด สำหรับสีใดๆ ก็ตาม สามารถหาสีคู่ตรงข้ามได้โดยการกลับค่า RGB (255 ลบด้วยค่าของแต่ละช่องสี) สีคู่ตรงข้ามจะช่วยสร้างงานออกแบบที่มีชีวิตชีวา มีความเปรียบต่างสูง และนิยมใช้ในโลโก้รวมถึงองค์ประกอบที่ต้องการเน้นให้เด่นชัด

แหล่งข้อมูลที่เกี่ยวข้อง

• แนวทางความต่างของสี WCAG - W3C