AbraCalc

ตัวแปลงสี RGB เป็น HSL

แปลงค่าสี RGB เป็น HSL (เฉดสี ความอิ่มตัว ความสว่าง) ได้ทันที ฟรี ไม่ต้องสมัครสมาชิก

ฝังเครื่องมือนี้ในเว็บไซต์ของคุณ
อ้างอิงเครื่องมือนี้

APA

AbraCalc. (2026). ตัวแปลงสี RGB เป็น HSL [Online calculator]. Retrieved from https://abracalc.com/th/plaeng-rgb-hsl/

BibTeX

@misc{abracalc-plaeng-rgb-hsl, author = {AbraCalc}, title = {ตัวแปลงสี RGB เป็น HSL}, year = {2026}, howpublished = {\url{https://abracalc.com/th/plaeng-rgb-hsl/}} }

เครื่องมือนี้ตอบคำถามของคุณหรือไม่

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

  1. กรอกค่าสีแดง เขียว และน้ำเงิน (แต่ละค่า 0–255)
  2. เครื่องมือจะคำนวณเฉดสี (0–360°) ความอิ่มตัว (0–100%) และความสว่าง (0–100%)
  3. นำผลลัพธ์ hsl() ไปใช้ใน CSS ได้โดยตรง

แปลงค่าสี RGB เป็นโมเดลสี HSL (เฉดสี ความอิ่มตัว ความสว่าง) ที่ใช้ใน CSS และเครื่องมือออกแบบ

สูตร

Given Red, Green, Blue each in 0–255, first normalize: r' = R/255, g' = G/255, b' = B/255.

Then: L = (max + min) / 2

If max ≠ min, delta d = max − min, then:
S = d / (2 − max − min) when L > 0.5, else S = d / (max + min)

Hue sector depends on which channel is max:
• R is max: H = (g' − b') / d + (g' < b' ? 6 : 0)
• G is max: H = (b' − r') / d + 2
• B is max: H = (r' − g') / d + 4
Then H = H / 6 × 360

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

HSL คืออะไร?
HSL ย่อมาจาก Hue (เฉดสี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) เป็นการแทนสีในรูปแบบทรงกระบอก ทำให้เข้าใจง่ายกว่า RGB เมื่อต้องปรับความสว่างและความอิ่มตัว
เฉดสีมีช่วงค่าเท่าไร?
เฉดสีวัดเป็นองศาตั้งแต่ 0 ถึง 360 โดย 0/360 คือสีแดง 120 คือสีเขียว และ 240 คือสีน้ำเงิน

แหล่งอ้างอิง