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

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

การแปลง RGB เป็น Hex ทำงานอย่างไร

RGB (Red, Green, Blue) และ Hex เป็นสองสัญลักษณ์ที่แตกต่างกันสำหรับโมเดลสีแบบบวกเดียวกันที่ใช้โดยจอแสดงผลอิเล็กทรอนิกส์ แต่ละช่องสีมีค่าตั้งแต่ 0 ถึง 255 ในเลขฐานสิบ ในการแปลงเป็น Hex ค่าฐานสิบของแต่ละช่องสีจะถูกแสดงเป็นเลขฐานสิบหกสองหลัก (ฐาน 16) และนำทั้งสามคู่มารวมกันโดยมีเครื่องหมาย # นำหน้า

สูตรการแปลง

สำหรับแต่ละค่าช่องสี V (0–255):

1. หาร V ด้วย 16 ผลหารคือหลักแรกของ hex เศษที่ได้คือหลักที่สอง
2. จับคู่ตัวเลข 10–15 เป็นตัวอักษร A–F
3. รวมกัน: #RRGGBB

ตัวอย่าง: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (สีส้ม)

อธิบายรูปแบบสีต่างๆ

HEX (Hexadecimal)

สัญลักษณ์สีที่พบบ่อยที่สุดในการพัฒนาเว็บ ประกอบด้วย # ตามด้วยเลขฐานสิบหก 6 หลักแทน RR, GG, BB มีรูปแบบตัวย่อ (#RGB) ให้ใช้เมื่อแต่ละคู่มีตัวเลขเหมือนกัน เช่น #FF0000 → #F00

HSL (Hue, Saturation, Lightness)

โมเดลที่เข้าใจง่ายกว่าสำหรับนักออกแบบ Hue คือมุมบนวงล้อสี (0°–360°), Saturation คือความสดของสี (0–100%) และ Lightness มีตั้งแต่สีดำ (0%) ผ่านสีบริสุทธิ์ (50%) ไปจนถึงสีขาว (100%) HSL ช่วยให้สร้างความหลากหลายของสีได้ง่ายโดยการปรับพารามิเตอร์เพียงตัวเดียว

HSV / HSB (Hue: สี, Saturation: ความอิ่มตัวของสี, Value/Brightness: ความสว่าง)

คล้ายกับ HSL แต่กำหนดความสว่างต่างกัน ค่า Value 100% หมายความว่าสีนั้นอยู่ในสถานะที่สว่างที่สุดสำหรับเฉดสีและความอิ่มตัวนั้น โมเดลนี้ใช้ในแอปพลิเคชันออกแบบกราฟิกมากมาย เช่น Photoshop และ Figma

CMYK (Cyan, Magenta, Yellow, Key/Black)

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

ประเภทของคู่สีที่เข้ากัน (Color Harmony)

คู่สีที่เข้ากันคือการรวมกันของสีตามตำแหน่งบนวงล้อสี เครื่องมือนี้นักสร้างขึ้นสี่ประเภท:

• สีตรงข้าม (Complementary): สีที่อยู่ตรงข้ามกันพอดีบนวงล้อ (ห่างกัน 180°) สร้างคอนทราสต์สูงสุดและผลกระทบทางสายตาที่รุนแรง
• สีข้างเคียง (Analogous): สีที่อยู่ติดกันบนวงล้อ (±30°) สร้างการออกแบบที่กลมกลืน สบายตา มักพบเห็นได้ทั่วไปในธรรมชาติ
• สามสี (Triadic): สีสามสีที่มีระยะห่างเท่ากัน (ห่างกัน 120°) ให้คอนทราสต์ที่สดใสในขณะที่ยังรักษาความสมดุลไว้ได้
• สีตรงข้ามเยื้อง (Split-Complementary): สีสองสีที่อยู่ติดกับสีตรงข้าม (150° และ 210°) เป็นทางเลือกที่นุ่มนวลกว่าสีตรงข้ามและมีความหลากหลายมากกว่า

คอนทราสต์การเข้าถึง WCAG

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

การแปลง RGB เป็น Hex ที่พบบ่อย

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

วิธีแปลง RGB เป็น Hex ทำอย่างไร?

ในการแปลง RGB เป็น Hex ให้หารค่าแต่ละช่องสี (0-255) ด้วย 16 เพื่อหาผลหารและเศษ จากนั้นจับคู่แต่ละค่าเป็นตัวเลขฐานสิบหก (0-9, A-F) รวมค่าฐานสิบหก 2 หลักทั้งสามชุดเข้าด้วยกันโดยมีเครื่องหมาย # นำหน้า ตัวอย่างเช่น RGB(255, 165, 0) จะกลายเป็น #FFA500: 255→FF, 165→A5, 0→00

รหัสสี RGB และ Hex แตกต่างกันอย่างไร?

RGB และ Hex แทนค่าสีเดียวกันโดยใช้สัญลักษณ์ต่างกัน RGB ใช้ตัวเลขฐานสิบสามชุด (0-255) สำหรับช่องสีแดง สีเขียว และสีน้ำเงิน เช่น rgb(255, 0, 0) ส่วน Hex ใช้ # ตามด้วยตัวเลขฐานสิบหกหกหลัก เช่น #FF0000 ทั้งสองเข้ารหัสข้อมูลสีที่เหมือนกัน — Hex เป็นเพียงการแสดงค่า RGB เดียวกันในรูปแบบฐาน 16 ที่กะทัดรัดกว่า

Hex ใช้โมเดลสีแบบใด?

รหัสสี Hex ใช้โมเดลสีแบบบวก RGB (Red, Green, Blue) ซึ่งเป็นโมเดลเดียวกับที่ใช้ในจอแสดงผลคอมพิวเตอร์ เลขฐานสิบหกหกหลักแทนค่าสามคู่: สองหลักแรกสำหรับสีแดง สองหลักกลางสำหรับสีเขียว และสองหลักสุดท้ายสำหรับสีน้ำเงิน แต่ละคู่มีค่าตั้งแต่ 00 (ความเข้ม 0) ถึง FF (ความเข้มสูงสุด 255)

อัตราส่วนคอนทราสต์ WCAG คืออะไร?

อัตราส่วนคอนทราสต์ WCAG วัดความแตกต่างของความสว่างระหว่างสองสี ใช้เพื่อให้แน่ใจว่าผู้พิการทางสายตาสามารถอ่านข้อความได้ อัตราส่วนมีตั้งแต่ 1:1 (ไม่มีคอนทราสต์) ถึง 21:1 (สูงสุด) WCAG 2.0 กำหนดให้มีอย่างน้อย 4.5:1 สำหรับข้อความปกติ (ระดับ AA), 3:1 สำหรับข้อความขนาดใหญ่ (AA Large) และ 7:1 สำหรับคอนทราสต์ที่เพิ่มขึ้น (ระดับ AAA)

วิธีแปลง RGB เป็น HSL ทำอย่างไร?

การแปลง RGB เป็น HSL: ปรับค่า R,G,B ให้อยู่ในช่วง 0-1, หาค่าสูงสุดและต่ำสุด, คำนวณความสว่างเป็น (max+min)/2, ความอิ่มตัวขึ้นอยู่กับความสว่าง และเฉดสีคำนวณตามช่องสีที่เด่น (0° สำหรับแดง, 120° สำหรับเขียว, 240° สำหรับน้ำเงิน) ปรับตามความแตกต่างระหว่างช่องสี

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

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

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

• แนวทางคอนทราสต์ WCAG 2.1