ToolDeck

ตัวแปลงสี

แปลงสีระหว่างรูปแบบ HEX, RGB, HSL และ HSV พร้อมตัวเลือกสีแบบวิชวล

ลองตัวอย่าง

คลิกสีเพื่อเปิดตัวเลือกสี

หรือแก้ไขค่าใดๆ ด้านล่าง

HEX
RGB
HSL
HSV

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

ตัวแปลงสีจะแปลงค่าสีจากสัญกรณ์หนึ่งไปยังอีกสัญกรณ์หนึ่ง เช่น จาก HEX triplet (#6366F1) เป็น RGB tuple (99, 102, 241) หรือ HSL triple (239, 84%, 67%) สีเดียวกันยังสามารถแสดงเป็น HSV triple (239, 59%, 95%) ได้ด้วย แต่ละรูปแบบเข้ารหัสสีเดียวกันด้วยแบบจำลองทางคณิตศาสตร์ที่ต่างกัน เครื่องมือ ภาษาโปรแกรม และ API ต่างๆ ล้วนคาดหวังรูปแบบที่แตกต่างกันขึ้นอยู่กับบริบท

HEX และ RGB ต่างอธิบายสีในรูปของการผสมแสงสีแดง เขียว และน้ำเงิน HEX เป็นการแสดงเลขฐานสิบหกแบบย่อของค่าช่องสัญญาณ 0-255 สามค่าเดียวกับที่ RGB เขียนออกมาในเลขฐานสิบ HSL (Hue, Saturation, Lightness) และ HSV (Hue, Saturation, Value) จัดเรียงข้อมูลเดิมในระบบพิกัดทรงกระบอก ซึ่งค่าสี (hue) เป็นมุมบนวงล้อสี (0-360 องศา) และความอิ่มตัวกับความสว่างเป็นเปอร์เซ็นต์ ทำให้ HSL และ HSV เหมาะกว่าสำหรับงานอย่างการสร้างเฉดสีอ่อนหรือเข้มของสีเดิม

การแปลงระหว่างรูปแบบเหล่านี้ต้องใช้สูตรคณิตศาสตร์ที่กำหนดชัดเจน ข้อกำหนด W3C CSS Color Module Level 4 บันทึกอัลกอริทึมที่เบราว์เซอร์ใช้ในการแปลงสี CSS ใดๆ เป็น sRGB triplet สูตรเหล่านี้เป็นแบบกำหนดตายตัว ข้อมูลเข้าเดิมจะให้ผลลัพธ์เดิมเสมอ การแปลงจึงไม่สูญเสียข้อมูลตราบใดที่ไม่มีการปัดเศษหรือตัดค่า ตัวเลือกสีและเครื่องมือออกแบบส่วนใหญ่ใช้สูตรเดียวกันนี้เบื้องหลัง

ทำไมต้องใช้ตัวแปลงสีนี้?

เครื่องมือออกแบบส่งออกสีในรูปแบบหนึ่ง CSS ของคุณต้องการอีกรูปแบบ และ API ที่คุณเรียกใช้คาดหวังอีกรูปแบบหนึ่ง แทนที่จะเขียนโค้ดแปลงหรือค้นหาสูตรที่ถูกต้อง เพียงวางค่าแล้วรับทุกรูปแบบพร้อมกันทันที

แปลงได้ทันทีแบบเรียลไทม์
พิมพ์หรือเลือกสี แล้วดู HEX, RGB, HSL และ HSV อัปเดตทันที ไม่มีปุ่มส่ง ไม่ต้องโหลดข้อมูลจากเซิร์ฟเวอร์
🔒
ประมวลผลโดยให้ความเป็นส่วนตัวเป็นหลัก
คำนวณการแปลงสีทั้งหมดในเบราว์เซอร์ของคุณ ไม่มีค่าสี ข้อมูลการใช้งาน หรือคุกกี้ถูกส่งออกไปที่ใด
🔀
ครบทุกรูปแบบพร้อมกัน
ข้อมูลเข้าหนึ่งค่าให้ผลลัพธ์เป็น HEX, RGB, HSL และ HSV พร้อมกัน คัดลอกรูปแบบที่ต้องการด้วยคลิกเดียว
📋
ไม่ต้องสร้างบัญชี
เปิดหน้าเว็บแล้วเริ่มแปลงได้เลย ไม่ต้องลงทะเบียน ไม่ต้องใช้อีเมล ไม่มีขีดจำกัดการใช้งาน ใช้งานได้แบบออฟไลน์หลังโหลดครั้งแรก

กรณีการใช้งานตัวแปลงสี

การพัฒนา CSS
นักออกแบบส่งค่า HEX จาก Figma มาให้ แต่ component library ของคุณใช้ HSL สำหรับธีม แปลงค่าแล้วใส่ใน CSS custom properties หรือคอนฟิก Tailwind ได้เลย
การเชื่อมต่อ Backend API
endpoint ของคุณรับสีเป็น RGB array สำหรับการสร้างกราฟ แปลงรหัสสี HEX จาก style guide เป็น integer triplet ที่ API ต้องการ
การดูแลรักษา Design System
เมื่อจัดทำเอกสาร design system คุณต้องการ color token ทุกค่าในรูป HEX สำหรับอ้างอิงเร็ว RGB สำหรับการแสดงผล Canvas และ HSL สำหรับการสร้างเฉดสีโดยโปรแกรม
QA และการทดสอบภาพ
เปรียบเทียบสีพิกเซลจากภาพหน้าจอ (โดยทั่วไปรายงานเป็น RGB โดย browser DevTools) กับค่า HEX ที่คาดหวังจากสเปก Figma การแปลงอย่างรวดเร็วช่วยยืนยันหรือตรวจพบความไม่ตรงกัน
การแสดงผลข้อมูล
ไลบรารีกราฟอย่าง D3.js และ Chart.js รับสีในรูปแบบต่างกันขึ้นอยู่กับเมธอด แปลงครั้งเดียวแล้วใช้สัญกรณ์ที่สม่ำเสมอตลอดคอนฟิกชุดข้อมูลของคุณ
การเรียนรู้ทฤษฎีสี
นักศึกษาที่ศึกษาคอมพิวเตอร์กราฟิกส์หรือการออกแบบเว็บสามารถดูว่าสีเดียวกันแมปกันอย่างไรระหว่าง HEX, RGB, HSL และ HSV การปรับช่องสัญญาณหนึ่งแล้วดูช่องอื่นเปลี่ยนตามช่วยสร้างความเข้าใจเชิงสัญชาตญาณว่าแบบจำลองสีสัมพันธ์กันอย่างไร

เอกสารอ้างอิงรูปแบบสี

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

รูปแบบตัวอย่าง (อินดิโก)ช่องสัญญาณการใช้งานทั่วไป
HEX#6366F16 (or 3/8)CSS, design tools, brand guides
RGBrgb(99, 102, 241)3 (0–255 each)CSS, Canvas API, image processing
HSLhsl(239, 84%, 67%)3 (deg, %, %)CSS, color theming, accessibility tuning
HSVhsv(239, 59%, 95%)3 (deg, %, %)Color pickers, Photoshop, Figma
CMYKcmyk(59%, 58%, 0%, 5%)4 (0–100% each)Print design, prepress workflows

HEX vs RGB vs HSL

ทั้งสามรูปแบบอธิบายพื้นที่สี sRGB เดียวกัน ความแตกต่างอยู่ที่วิธีการแสดงข้อมูล ซึ่งส่งผลต่อความสามารถอ่านและความง่ายในการจัดการในบริบทต่างกัน

HEX
สตริงเลขฐานสิบหก 6 หลัก (หรือชวเลข 3 หลัก) กระชับและเป็นสากลใน CSS เครื่องมือออกแบบ และแนวทางแบรนด์ อ่านได้ยากในทันที: #6366F1 ไม่บอกค่าสี รองรับรูปแบบ 8 หลักเสริม (#6366F180) สำหรับความโปร่งใสของ alpha
RGB
จำนวนเต็มสามค่าตั้งแต่ 0 ถึง 255 สำหรับช่องสัญญาณแดง เขียว และน้ำเงิน เป็นรูปแบบพื้นฐานสำหรับ Canvas 2D, WebGL และไลบรารีประมวลผลภาพส่วนใหญ่ จัดการทีละช่องได้ง่าย แต่การปรับความสว่างที่รับรู้ได้ต้องเปลี่ยนค่าทั้งสามพร้อมกัน
HSL
ค่าสี (0-360 องศา) ความอิ่มตัว (0-100%) และความสว่าง (0-100%) ออกแบบมาสำหรับความสามารถอ่านของมนุษย์ เพื่อทำสีให้สว่างขึ้น ให้เพิ่ม L เพื่อลดความอิ่มตัว ให้ลด S CSS รองรับสัญกรณ์ hsl() โดยตรง และ CSS color-mix() และไวยากรณ์สีสัมพัทธ์สมัยใหม่ต่อยอดจากมัน

ตัวอย่างโค้ด

การแปลงสีระหว่าง HEX, RGB และ HSL ในภาษาและสภาพแวดล้อมทั่วไป แต่ละตัวอย่างใช้สีอินดิโกเดียวกัน (#6366F1) เพื่อเปรียบเทียบได้ง่าย

JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
Python
import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)
Go
package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

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

HSL และ HSV ต่างกันอย่างไร?
ทั้งคู่ใช้ค่าสีและความอิ่มตัว แต่กำหนดความสว่างต่างกัน HSL ใช้ความสว่าง (lightness) ซึ่ง 50% คือสีบริสุทธิ์ 0% คือสีดำ และ 100% คือสีขาว HSV ใช้ค่า (value หรือ brightness) ซึ่ง 100% คือสีบริสุทธิ์และ 0% คือสีดำ HSV ไม่มีจุดสิ้นสุดที่สีขาวโดยตรง ในทางปฏิบัติ HSL ใช้ใน CSS และการพัฒนาเว็บ ขณะที่ HSV คือแบบจำลองที่ใช้ในตัวเลือกสีของซอฟต์แวร์ออกแบบอย่าง Photoshop และ Figma
จะแปลง HEX เป็น RGB ใน JavaScript ได้อย่างไร?
แยกสตริง hex เป็นจำนวนเต็มด้วย parseInt(hex, 16) จากนั้นดึงแต่ละช่องสัญญาณด้วย bit shifting: (n >> 16) & 255 สำหรับแดง (n >> 8) & 255 สำหรับเขียว และ n & 255 สำหรับน้ำเงิน วิธีนี้รองรับสตริง hex 6 หลักทั้งที่มีและไม่มีเครื่องหมาย # นำหน้า สำหรับชวเลข 3 หลักอย่าง #F0F ให้ขยายแต่ละหลักก่อน (FF00FF) แล้วค่อยแยก
ใช้ HSL โดยตรงใน CSS ได้หรือไม่?
ได้ เบราว์เซอร์สมัยใหม่ทุกตัวรองรับ hsl() และ hsla() ใน CSS ตั้งแต่ CSS Color Level 4 เป็นต้นไป ไวยากรณ์คือ hsl(239 84% 67%) โดยคั่นค่าด้วยช่องว่าง (ยังรับ comma ได้) คุณยังเพิ่ม alpha เป็นพารามิเตอร์ที่สี่ได้: hsl(239 84% 67% / 0.5) Safari, Chrome, Firefox และ Edge ล้วนรองรับไวยากรณ์นี้
การแปลงสีสูญเสียข้อมูลหรือไม่?
ในทางคณิตศาสตร์ไม่ HEX, RGB, HSL และ HSV ล้วนอธิบายพื้นที่สี sRGB เดียวกันและการแปลงสามารถย้อนกลับได้ ในทางปฏิบัติ ความแตกต่างจากการปัดเศษเล็กน้อยอาจปรากฏขึ้นเพราะ HEX จำกัดที่ 256 ขั้นต่อช่องสัญญาณและเปอร์เซ็นต์ HSL มักปัดเป็นจำนวนเต็ม การแปลงไปมาหลายครั้งอาจสะสมความผิดพลาดจากการปัดเศษ 1-2 หน่วย
รูปแบบ HEX 8 หลักคืออะไร?
รูปแบบ HEX 8 หลักเพิ่มตัวเลข alpha (ความโปร่งใส) สองหลักต่อท้าย HEX 6 หลักมาตรฐาน เช่น #6366F180 หมายถึงสีอินดิโกเดียวกันที่ความโปร่งแสง 50% (0x80 = 128 ซึ่งประมาณ 50% ของ 255) CSS รองรับสัญกรณ์นี้ในเบราว์เซอร์สมัยใหม่ทุกตัว รูปแบบย่อคือ 4 หลัก เช่น #63F8
ทำไมสีดูต่างกันบนหน้าจออื่น?
การปรากฏของสีขึ้นอยู่กับโปรไฟล์สี ความสว่าง และการปรับแกมมาของหน้าจอ สองหน้าจออาจแสดงค่า sRGB เดียวกัน (#6366F1) ต่างกันหากโปรไฟล์สีแตกต่างกัน เครื่องมือแปลงสีทำงานในพื้นที่สีที่กำหนด (โดยปกติคือ sRGB) และให้ผลลัพธ์ที่ถูกต้องทางคณิตศาสตร์ ความแตกต่างที่รับรู้ได้เป็นปัญหาการปรับเทียบหน้าจอ ไม่ใช่ข้อผิดพลาดในการแปลง
จะเลือกเฉดสีที่อ่อนหรือเข้มกว่าได้อย่างไร?
แปลงสีเป็น HSL แล้วปรับช่อง L (ความสว่าง) การเพิ่ม L ไปทาง 100% ให้เฉดสีอ่อน การลดไปทาง 0% ให้เฉดสีเข้ม ค่าสีและความอิ่มตัวยังคงเดิม ใน CSS คุณทำได้โดยตรง: hsl(239 84% 80%) คือเวอร์ชันอ่อนกว่าของ hsl(239 84% 67%) CSS สมัยใหม่ยังมี color-mix(in srgb, #6366F1, white 30%) สำหรับผลเดียวกันโดยไม่ต้องแปลงเอง