ตัวแปลงสี
แปลงสีระหว่างรูปแบบ 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 ที่คุณเรียกใช้คาดหวังอีกรูปแบบหนึ่ง แทนที่จะเขียนโค้ดแปลงหรือค้นหาสูตรที่ถูกต้อง เพียงวางค่าแล้วรับทุกรูปแบบพร้อมกันทันที
กรณีการใช้งานตัวแปลงสี
เอกสารอ้างอิงรูปแบบสี
ตารางด้านล่างแสดงรูปแบบสีที่ใช้กันมากที่สุดห้ารูปแบบ โดยแสดงสีอินดิโก (#6366F1) เดียวกันในแต่ละสัญกรณ์ HEX และ RGB ได้รับการรองรับอย่างกว้างขวางที่สุดใน CSS และ JavaScript HSL เป็นที่นิยมสำหรับการทำธีมเพราะการปรับความสว่างและความอิ่มตัวทำได้ตรงไปตรงมา HSV คือแบบจำลองที่ซอฟต์แวร์ออกแบบกราฟิกส่วนใหญ่ใช้ในตัวเลือกสี
| รูปแบบ | ตัวอย่าง (อินดิโก) | ช่องสัญญาณ | การใช้งานทั่วไป |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs RGB vs HSL
ทั้งสามรูปแบบอธิบายพื้นที่สี sRGB เดียวกัน ความแตกต่างอยู่ที่วิธีการแสดงข้อมูล ซึ่งส่งผลต่อความสามารถอ่านและความง่ายในการจัดการในบริบทต่างกัน
ตัวอย่างโค้ด
การแปลงสีระหว่าง HEX, RGB และ HSL ในภาษาและสภาพแวดล้อมทั่วไป แต่ละตัวอย่างใช้สีอินดิโกเดียวกัน (#6366F1) เพื่อเปรียบเทียบได้ง่าย
// 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]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%)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
}/* 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); }