เครื่องมือแปลงสี
กรอกรหัสสี Hex เพื่อดูค่า RGB และ HSL ที่เทียบเท่า พร้อมค่าช่องสีแดง เขียว และน้ำเงินแยกกัน
วิธีใช้งานเครื่องมือแปลงสีนี้
- ใส่รหัสสี Hex
พิมพ์รหัส Hex 6 หลักลงในช่องรหัสสี Hex (เช่น FF6B35 หรือ 00FF88) โดยไม่ต้องใส่เครื่องหมาย #
- อ่านค่า RGB
ผลลัพธ์ช่องสีแดง สีเขียว และสีน้ำเงิน แสดงค่า 0–255 สำหรับแต่ละส่วนประกอบ
- ตรวจสอบผลลัพธ์ HSL
ตรวจสอบผลลัพธ์ HSL สำหรับค่าสี (0–360°), ความอิ่มตัว และความสว่าง ซึ่งมีประโยชน์สำหรับการปรับแต่งสี
วิธีการทำงานของเครื่องมือแปลงสีนี้
เครื่องมือนี้แปลงรหัสสีฐานสิบหกเป็น RGB (แดง, เขียว, น้ำเงิน) และ HSL (เฉดสี, ความอิ่มตัว, ความสว่าง) โดยรหัสฐานสิบหกแต่ละคู่จะเทียบเท่ากับค่าช่องสัญญาณ 8 บิต (0–255) และการแปลง HSL ใช้หลักคณิตศาสตร์ปริภูมิสีมาตรฐาน
R = hex[0:2] → เลขฐานสิบ; G = hex[2:4] → เลขฐานสิบ; B = hex[4:6] → เลขฐานสิบ Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%)
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — สีดำสนิท
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — สีขาวบริสุทธิ์ Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — สีเทากลาง
- ✓ ข้อมูลที่ป้อนคือรหัสสี Hex 6 หลักที่ถูกต้อง
- ✓ ยังไม่รองรับช่องสัญญาณ Alpha ในเวอร์ชันนี้
- การแปลง CMYK จำเป็นต้องใช้โปรไฟล์สีและไม่รวมอยู่ในเครื่องมือนี้
ทำความเข้าใจโมเดลสี
HEX, RGB และ HSL เป็นวิธีที่แตกต่างกันในการอธิบายสีเดียวกัน HEX เข้ารหัส RGB เป็นสตริงเลขฐานสิบหก 6 หลัก โดยอักขระแต่ละคู่คือหนึ่งช่องสัญญาณ 8-bit (0–255) RGB แสดงค่าเดียวกันเป็นตัวเลขสามตัว ซึ่งเป็นแม่สีแบบบวกที่หน้าจอปล่อยออกมา HSL (Hue, Saturation, Lightness) เป็นโมเดลทรงกระบอก: Hue คือมุมบนวงล้อสี (0° สีแดง, 120° สีเขียว, 240° สีน้ำเงิน), Saturation คือความเข้มของสี และ Lightness คือความสว่าง นักออกแบบมักชอบใช้ HSL เมื่อปรับสีผ่านการเขียนโปรแกรม เนื่องจากการเปลี่ยนค่า Lightness เพียงอย่างเดียวจะทำให้สีเข้มขึ้นหรือสว่างขึ้นโดยไม่เปลี่ยนค่าสี และการปรับ Saturation จะช่วยปรับความสดของสี
กรณีการใช้งานการแปลงสีสำหรับนักพัฒนา
นักพัฒนาแปลงสีเมื่อสร้างระบบการออกแบบ, การใช้ธีม, การสร้างจานสี และการดีบัก CSS โดย Design tokens มักจะเก็บสีในรูปแบบ Hex การแปลงเป็น RGB หรือ HSL ช่วยให้สามารถคำนวณในขณะรันไทม์ได้ เช่น การซ้อนทับความโปร่งใส หรือการตรวจสอบคอนทราสต์ที่เข้าถึงได้ ตัวสลับธีมอาจจำเป็นต้องสร้างสีที่สว่างกว่าหรือเข้มกว่าจากสีพื้นฐานโดยใช้ HSL เครื่องมือช่วยการเข้าถึงอัตโนมัติจะแปลงสีเพื่อคำนวณค่าความสว่างและอัตราส่วนคอนทราสต์ เมื่อดีบักเลย์เอาต์หรือบั๊กของธีม การดูค่า Hex เป็น RGB หรือ HSL จะช่วยระบุได้ว่าช่องสีใดที่ผิดเพี้ยนไป การแปลงสียังใช้ในการแสดงข้อมูลด้วยภาพ, ไลบรารีกราฟ และการกำหนดธีม UI แบบไดนามิก
คำถามที่พบบ่อย
ฉันสามารถป้อนรหัส hex 3 หลักได้หรือไม่?
ปัจจุบันเครื่องมือนี้รองรับรหัส 6 หลัก สำหรับรหัสย่อ 3 หลัก เช่น F60 โปรดขยายเป็น FF6600 ก่อน
HSL คืออะไร?
HSL ย่อมาจาก Hue, Saturation, Lightness เป็นอีกวิธีหนึ่งในการระบุสีที่นักออกแบบบางคนพบว่าเข้าใจง่ายกว่า RGB