แปลง rgb เป็น hex ทำอย่างไร?

พิมพ์ค่า RGB เช่น rgb(46, 139, 87) ลงในช่อง RGB แล้วช่อง HEX จะแสดง #2E8B57 ให้ทันที ในทางกลับกันถ้าใส่ค่า HEX ช่อง RGB ก็จะอัปเดตตามทันทีเช่นกัน ไม่ต้องกดแปลงเพิ่มเพราะทุกรูปแบบซิงก์กันอยู่แล้ว

แก้ไขรูปแบบสีใดก็ได้แล้วให้ค่าอื่นอัปเดตตามได้ไหม?

ได้ ตัวแปลงนี้ซิงก์แบบสองทาง ไม่ว่าจะแก้ RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK หรือ CMYKA รูปแบบที่เหลือจะอัปเดตทันทีเมื่อค่าที่กรอกถูกต้อง

ความโปร่งใส (อัลฟา) ถูกจัดการอย่างไรตอนแปลง?

HEX จะแสดงโดยไม่มีอัลฟา แต่ค่าความโปร่งใสจะถูกเก็บไว้ในรูปแบบ RGBA, HSLA, HSVA และ CMYKA ส่วนพรีวิวจะสะท้อนความทึบปัจจุบันเสมอ คุณยังปรับอัลฟาได้จากตัวเลื่อนด้านบน

เครื่องมือนี้แปลง RGB เป็น CMYK สำหรับงานพิมพ์ได้หรือไม่?

ได้ ช่อง CMYK และ CMYKA จะอัปเดตทุกครั้งที่คุณเปลี่ยนรูปแบบอื่น ทำให้ได้ค่า cyan, magenta, yellow และ key สำหรับงานพิมพ์ ทั้งนี้ CMYK ขึ้นกับอุปกรณ์ สีบนหน้าจอกับงานพิมพ์จริงอาจต่างกันเล็กน้อย

ตัวแปลงสีนี้ปลอดภัยและเป็นส่วนตัวหรือไม่?

เป็นส่วนตัวเต็มที่ การแปลงทั้งหมดทำงานในเบราว์เซอร์ของคุณ ค่าสีจึงไม่ถูกส่งหรืออัปโหลดไปยังเซิร์ฟเวอร์ใด ๆ

เครื่องมือสี

ตัวแปลงสีออนไลน์ | ซิงก์ RGB, HEX, HSL, HSV, CMYK

แปลงค่าสีระหว่าง RGB, HEX, HSL, HSV, CMYK และอื่นๆ ฟรี แก้ค่าในรูปแบบใดก็ได้แล้วซิงก์ค่าสีที่เหลือให้ทันที เช่น แปลง rgb เป็น hex

ซิงก์สดไม่ต้องอัปโหลด

ตัวอย่างภาพ

ใช้สวอตช์สี ตัวเลือกสีของเบราว์เซอร์ และตัวเลื่อนอัลฟาเพื่อปรับสีเดียวกันในทุกรูปแบบอย่างละเอียด

สีตัวอย่าง

#3B82F6

rgba(59, 130, 246, 0.84)

ตัวเลือกสี

#3B82F6

อัลฟา

0.84

ช่องสีแบบสด

HEX

R: 59
G: 130
B: 246
A: 0.84

เคล็ดลับการแก้ไข

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

ซิงก์สดไม่ต้องอัปโหลด

ตัวแก้ไขรูปแบบสีแบบสองทาง

รูปแบบทั้งหมดด้านล่างแก้ไขได้โดยตรง เมื่อคุณเปลี่ยน HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK หรือ CMYKA โมเดลสีอื่นจะซิงก์ทันที

HEX

ต้นทาง

RGB

RGBA

HSL

HSLA

HSV

HSVA

CMYK

CMYKA

คำอธิบาย

RGB

RGB เป็นโมเดลสีมาตรฐานที่ประกอบด้วยช่องสีแดง (R) เขียว (G) และน้ำเงิน (B) การปรับความเข้มของแต่ละช่องและผสมเข้าด้วยกันทำให้ RGB แสดงสีได้เกือบทั้งหมดที่มองเห็นบนหน้าจอ จึงเป็นหนึ่งในระบบสีที่ใช้มากที่สุด

RGBA

RGBA คือ RGB ที่เพิ่มช่องอัลฟาสำหรับความโปร่งใส โดย R, G และ B ใช้ค่าตั้งแต่ 0 ถึง 255 ส่วน A มักใช้ 0 ถึง 1 หรือ 0% ถึง 100% และมักใช้ใน CSS เมื่อต้องการปรับความทึบของสีเดียวกัน

HEX

HEX คือการแทนค่าสีด้วยเลขฐานสิบหก ใช้อย่างแพร่หลายในงานเว็บและ CSS เพราะสั้นและคัดลอกง่าย ค่าสีอย่าง #2E8B57 จะเก็บค่าแดง เขียว น้ำเงินเป็นคู่เลขฐานสิบหก และรูปแบบขยายยังรวมค่าอัลฟาได้ด้วย

HSL

HSL (Hue, Saturation, Lightness) คือการแทนค่าสี RGB ในระบบพิกัดทรงกระบอก H คือโทนสีพื้นฐาน S คือความอิ่มตัวของสี และ L คือความสว่าง โดย 0% มืดที่สุด 50% สมดุล และ 100% สว่างที่สุด

HSLA

HSLA คือ HSL ที่เพิ่มช่องอัลฟาเข้าไป ยังคงแนวคิด hue, saturation และ lightness เดิม แต่เพิ่มความโปร่งใส จึงเหมาะกับเงา สีทึบโปร่ง และโอเวอร์เลย์ใน UI

HSV

HSV (Hue, Saturation, Value) เป็นปริภูมิสีที่ A. R. Smith สร้างขึ้นในปี 1978 และเรียกอีกชื่อว่า Hexcone Model โดย Value อธิบายความสว่างที่มองเห็นได้โดยตรง จึงเหมาะกับการเลือกสีแบบเข้าใจง่าย

HSVA

HSVA คือ HSV ที่เพิ่มช่องอัลฟา เหมาะเมื่อคุณต้องการใช้โมเดล hue, saturation, value พร้อมอธิบายความทึบแสงสำหรับอินเทอร์เฟซและกราฟิกแบบมีเลเยอร์

CMYK

CMYK เป็นโหมดสีที่ใช้กันมากในงานพิมพ์ สื่อสิ่งพิมพ์มองเห็นได้จากการสะท้อนแสงภายนอกเข้าสู่ดวงตา จึงเหมาะกับหนังสือพิมพ์ บรรจุภัณฑ์ และโบรชัวร์ ต่างจาก RGB บนหน้าจอ CMYK ถูกออกแบบมาสำหรับหมึกบนกระดาษ

CMYKA

CMYKA คือ CMYK ที่เพิ่มช่องอัลฟา เหมาะเมื่อคุณต้องการอธิบายค่า cyan, magenta, yellow, key พร้อมความโปร่งใสสำหรับการส่งต่องานออกแบบหรือไฟล์แบบเลเยอร์

วิธีใช้ตัวแปลงสีออนไลน์

วางหรือพิมพ์ค่าสีลงในช่องรูปแบบใดก็ได้ เช่น HEX, RGB, RGBA, HSL, HSV หรือ CMYK

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

ใช้แผงพรีวิว ตัวเลือกสี ตัวเลื่อนอัลฟา และปุ่มคัดลอกเพื่อปรับแต่งและนำค่าสีที่ต้องการออกไปใช้

คุณสมบัติหลัก

ซิงก์รูปแบบสองทาง

เปลี่ยนรูปแบบที่รองรับใดก็ได้ แล้วให้ RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK และ CMYKA ซิงก์กันแบบเรียลไทม์

การควบคุมสีแบบมองเห็น

ดูสีปัจจุบันทันทีด้วยสวอตช์สด ตัวเลือกสีของเบราว์เซอร์ ตัวเลื่อนอัลฟา และค่าช่องสี

การแปลงในเบราว์เซอร์

แต่ละช่องรองรับไวยากรณ์ที่คุ้นเคย และทุกการแปลงเกิดขึ้นในเบราว์เซอร์เพื่อความรวดเร็วและเป็นส่วนตัว

คำถามที่พบบ่อยเกี่ยวกับตัวแปลงสี

ฉันแก้ไขรูปแบบสีใดก็ได้แล้วให้อีกรูปแบบอัปเดตตามได้ไหม?

ได้ ตัวแปลงนี้ซิงก์ได้สองทาง หากคุณแก้ไข RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK หรือ CMYKA รูปแบบอื่นจะอัปเดตทันทีเมื่อค่าถูกต้อง

ความโปร่งใสถูกจัดการอย่างไรระหว่างการแปลง?

HEX จะแสดงโดยไม่มีอัลฟาเพราะหน้านี้เน้นรูปแบบที่คุณต้องการ ค่าอัลฟาจะยังคงอยู่ใน RGBA, HSLA, HSVA และ CMYKA และส่วนพรีวิวจะแสดงความทึบปัจจุบันเสมอ

ตัวแปลงสีนี้เป็นส่วนตัวหรือไม่?

ไม่ ข้อมูลทั้งหมดประมวลผลภายในเบราว์เซอร์ของคุณ ดังนั้นค่าสีจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์

ตัวแปลงสีตัวนี้ช่วยแปลงรหัสสีระหว่าง HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK และ CMYKA ได้ในที่เดียว เช่น แปลง rgb เป็น hex หรือ HEX เป็น RGB เพียงพิมพ์ค่าในช่องรูปแบบใดก็ได้ รูปแบบอื่นทั้งหมดจะคำนวณและซิงก์ให้ทันทีแบบสองทาง พร้อมพรีวิวสีสด ตัวเลือกสี และตัวเลื่อนอัลฟาสำหรับปรับความโปร่งใส ทุกการแปลงทำงานในเบราว์เซอร์ของคุณ ค่าสีจึงไม่ถูกอัปโหลดขึ้นเซิร์ฟเวอร์

วิธีใช้ตัวแปลงสี

1
ใส่ค่าสี
วางหรือพิมพ์ค่าลงในช่องรูปแบบใดก็ได้ เช่น #2E8B57 สำหรับ HEX, rgb(46, 139, 87) สำหรับ RGB หรือ hsl(146, 50%, 36%) สำหรับ HSL
2
ดูทุกรูปแบบซิงก์กัน
ทันทีที่ค่าถูกต้อง เครื่องมือจะแปลงเป็นรูปแบบที่รองรับทั้งหมดพร้อมกัน ทั้ง RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK และ CMYKA
3
ปรับแต่งสีให้พอดี
ใช้สวอตช์สด ตัวเลือกสีของเบราว์เซอร์ และตัวเลื่อนอัลฟาเพื่อปรับโทนสีและความโปร่งใส หรือกดปุ่มสุ่มเพื่อลองสีใหม่
4
คัดลอกหรือนำออกไปใช้
คลิกที่ช่องใดก็ได้เพื่อคัดลอกค่านั้น หรือกดคัดลอกทั้งหมดเพื่อเอาทุกรูปแบบไปใช้กับ CSS ไฟล์ออกแบบ หรือโค้ดของคุณ

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

W3C — CSS Color Module Level 4
ข้อกำหนดของ W3C ที่นิยามรูปแบบสีใน CSS ทั้ง hex, rgb(), hsl(), hwb() และไวยากรณ์สีสมัยใหม่
MDN — CSS <color> value
เอกสารอ้างอิงจาก MDN ครอบคลุมการเขียนสีทุกแบบใน CSS ทั้ง HEX, RGB/RGBA, HSL/HSLA และวิธีทำงานของช่องอัลฟา

เครื่องมือที่เกี่ยวข้อง

CSS Minifier

บีบอัดโค้ด CSS ที่ใช้ค่าสี HEX, RGB และ HSL ที่คุณแปลงได้

SVG Viewer

พรีวิวและตรวจสอบกราฟิก SVG ที่ใช้สีในส่วน fill และ stroke

Image to Base64

เข้ารหัสรูปภาพเป็นสตริง Base64 เพื่อฝังลงในสไตล์ร่วมกับค่าสีของคุณ

JSON Formatter

จัดรูปแบบและตรวจสอบ JSON ที่เก็บชุดสีและ design token

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

แปลง rgb เป็น hex ทำอย่างไร?: พิมพ์ค่า RGB เช่น rgb(46, 139, 87) ลงในช่อง RGB แล้วช่อง HEX จะแสดง #2E8B57 ให้ทันที ในทางกลับกันถ้าใส่ค่า HEX ช่อง RGB ก็จะอัปเดตตามทันทีเช่นกัน ไม่ต้องกดแปลงเพิ่มเพราะทุกรูปแบบซิงก์กันอยู่แล้ว
แก้ไขรูปแบบสีใดก็ได้แล้วให้ค่าอื่นอัปเดตตามได้ไหม?: ได้ ตัวแปลงนี้ซิงก์แบบสองทาง ไม่ว่าจะแก้ RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK หรือ CMYKA รูปแบบที่เหลือจะอัปเดตทันทีเมื่อค่าที่กรอกถูกต้อง
ความโปร่งใส (อัลฟา) ถูกจัดการอย่างไรตอนแปลง?: HEX จะแสดงโดยไม่มีอัลฟา แต่ค่าความโปร่งใสจะถูกเก็บไว้ในรูปแบบ RGBA, HSLA, HSVA และ CMYKA ส่วนพรีวิวจะสะท้อนความทึบปัจจุบันเสมอ คุณยังปรับอัลฟาได้จากตัวเลื่อนด้านบน
เครื่องมือนี้แปลง RGB เป็น CMYK สำหรับงานพิมพ์ได้หรือไม่?: ได้ ช่อง CMYK และ CMYKA จะอัปเดตทุกครั้งที่คุณเปลี่ยนรูปแบบอื่น ทำให้ได้ค่า cyan, magenta, yellow และ key สำหรับงานพิมพ์ ทั้งนี้ CMYK ขึ้นกับอุปกรณ์ สีบนหน้าจอกับงานพิมพ์จริงอาจต่างกันเล็กน้อย
ตัวแปลงสีนี้ปลอดภัยและเป็นส่วนตัวหรือไม่?: เป็นส่วนตัวเต็มที่ การแปลงทั้งหมดทำงานในเบราว์เซอร์ของคุณ ค่าสีจึงไม่ถูกส่งหรืออัปโหลดไปยังเซิร์ฟเวอร์ใด ๆ