แปลงรหัสสี

แปลงรหัสสีระหว่าง HEX, RGB และ HSL ได้ทันที กรอกค่าสีแล้วดูผลทุกรูปแบบพร้อมตัวอย่างสี เหมาะกับงานออกแบบเว็บและกราฟิก ใช้ฟรี

วิธีใช้งาน

  1. กรอกค่า

    กรอกข้อมูลในช่องที่จำเป็น

  2. กดคำนวณ

    กดปุ่มคำนวณเพื่อดูผลลัพธ์

  3. ดูผลลัพธ์

    ดูผลลัพธ์และแชร์ได้ตามต้องการ

การแปลงรหัสสีคืออะไร?

การแปลงรหัสสีคือการแสดงสีเดียวกันในระบบสัญกรณ์ที่ต่างกัน เช่น HEX, RGB และ HSL หน้าจอสร้างสีด้วยการผสมแม่สีของแสง คือ แดง เขียว และน้ำเงิน ดังนั้นทุกสีจึงลงเอยที่ความเข้มของช่องสัญญาณ RGB สามช่อง HEX บีบอัดค่า RGB เหล่านี้ให้เป็นสตริงเลขฐานสิบหกหกหลัก (#RRGGBB) ส่วน HSL จัดเรียงใหม่ตามวิธีที่มนุษย์รับรู้สี โดยใช้มุมของวงล้อสี ความอิ่มตัว และความสว่าง

ทำไมการแปลงจึงสำคัญ

  • การเขียน CSS — นำรหัส HEX จากแบบดีไซน์มาแปลงเป็น RGB ซึ่งช่วยให้ปรับความโปร่งใสได้ง่ายขึ้น
  • การปรับสี — เมื่อต้องการแค่ทำให้สีเข้มขึ้นเล็กน้อย การแปลงเป็น HSL ช่วยให้ปรับเพียงค่า L ค่าเดียว
  • การทำงานร่วมกัน — ทำให้ HEX ใน Figma ของดีไซเนอร์ ตัวแปร RGB ของนักพัฒนา และมาตรฐานสีของทีมพิมพ์ตรงกัน

ไม่ว่าคุณจะป้อนในรูปแบบใด เครื่องมือนี้จะคำนวณรูปแบบที่เหลือทั้งหมดในครั้งเดียวและแสดงสีจริงในตัวอย่าง

สูตรการคำนวณ

HEX → RGB แบ่งเลขฐานสิบหกออกเป็นคู่ละสองหลักแล้วอ่านแต่ละคู่เป็นเลขฐานสิบ

R = parseInt(hex[0:2], 16) ส่วน G และ B คำนวณแบบเดียวกัน ตัวอย่าง: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51)

RGB → HSL ก่อนอื่นจะทำให้แต่ละช่องอยู่ในช่วง 0-1 แล้วจึงหาความสว่าง

L = (max + min) / 2
S = delta / (2 − max − min) (เมื่อ L > 0.5)
โดยที่ delta = max − min ในตัวอย่างข้างต้น max=1, min=0.2 จะได้ L = 0.6 (60%), S = 0.8/0.8 = 100% และมุมสี H ≈ 11° ซึ่งแปลงเป็น HSL(11°, 100%, 60%)

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

HEX กับ RGB ต่างกันอย่างไร?
HEX แสดงสีในรูปเลขฐานสิบหก (#FF5733) ส่วน RGB แสดงค่าแดง เขียว น้ำเงินในรูปเลขฐานสิบในช่วง 0-255 (255, 87, 51) เป็นการเขียนสีเดียวกันสองวิธี
แปลงรหัส HEX เป็น RGB อย่างไร?
แบ่ง #RRGGBB ออกเป็นคู่ละสองหลักแล้วแปลงแต่ละคู่จากเลขฐานสิบหกเป็นเลขฐานสิบ ตัวอย่างเช่น #FF5733 ได้ FF=255, 57=87, 33=51 จึงเป็น RGB(255, 87, 51) แต่ละคู่แทนความเข้มของช่องตั้งแต่ 00 (0) ถึง FF (255)
ควรใช้ CMYK เมื่อใด?
CMYK เป็นโมเดลสีสำหรับงานพิมพ์ที่ผสมหมึกฟ้า ม่วงแดง เหลือง และดำ หน้าจอและเว็บใช้ RGB/HEX ที่เพิ่มแสง ส่วนการผลิตงานพิมพ์จะแปลงเป็น CMYK ที่ซ้อนชั้นหมึก เนื่องจากขอบเขตสีของทั้งสองต่างกัน สีบนหน้าจอจึงอาจดูต่างไปเล็กน้อยเมื่อพิมพ์ออกมา
โมเดลสี HSL มีข้อดีอย่างไร?
HSL ประกอบด้วยเฉดสี ความอิ่มตัว และความสว่าง ทำให้ปรับสีได้อย่างเป็นธรรมชาติ ตัวอย่างเช่น เพียงลดค่าความสว่าง (L) ก็คงเฉดสีไว้และสร้างสีเวอร์ชันที่เข้มขึ้นได้ง่าย สะดวกสำหรับเอฟเฟกต์ hover และการสร้างชุดสี
ใน HSL เฉดสี (H) ความอิ่มตัว (S) และความสว่าง (L) หมายถึงอะไร?
เฉดสี (H) คือมุมบนวงล้อสีตั้งแต่ 0 ถึง 360 องศา โดย 0° คือแดง 120° คือเขียว และ 240° คือน้ำเงิน ความอิ่มตัว (S) คือความเข้มของสีตั้งแต่ 0 ถึง 100%: 0% เป็นสีเทา 100% เป็นสีที่ชัดที่สุด ความสว่าง (L) คือความสว่างตั้งแต่ 0 ถึง 100%: 0% เป็นสีดำ 100% เป็นสีขาว และ 50% เป็นสีที่บริสุทธิ์ที่สุด
สีขาวและสีดำแสดงอย่างไร?
สีขาวมีทุกช่องอยู่ที่ค่าสูงสุด: #FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%) ส่วนสีดำมีทุกช่องเป็น 0: #000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%) สีเทาจะมีความอิ่มตัว (S) เป็น 0% และต่างกันที่ความสว่าง (L) เท่านั้น
หากค่า RGB อยู่นอกช่วง 0-255 จะเกิดอะไรขึ้น?
แต่ละช่องจะถูกจำกัดค่าอัตโนมัติ (clamp) ก่อนแปลงเป็น HEX — ค่าต่ำกว่า 0 จะกลายเป็น 0 และค่าสูงกว่า 255 จะกลายเป็น 255 ตัวอย่างเช่น RGB(300, -10, 128) จะถูกประมวลผลเป็น RGB(255, 0, 128) ซึ่งกลายเป็น #FF0080
คัดลอกผลการแปลงได้ทันทีไหม?
ได้ คลิกที่รหัส HEX, RGB หรือ HSL ที่แปลงแล้วเพื่อคัดลอกลงคลิปบอร์ด และตัวอย่างสีช่วยให้ยืนยันสีจริงด้วยตาเพื่อนำไปวางใน CSS หรือเครื่องมือออกแบบได้ทันที
สเปคอุปกรณ์ 2026

เครื่องคิดเลขที่เกี่ยวข้อง

เครื่องคำนวณ PPI/DPIPPI = sqrt(w^2 + h^2) / diagonalเครื่องคำนวณอัตราส่วนภาพratio = w/gcd(w,h) : h/gcd(w,h)เครื่องคำนวณ SubnetCIDR bitwise maskแปลงฐานเลขparseInt(value, fromBase).toString(toBase)