แปลง RGBA เป็น HSL

วางค่า RGBA แล้วได้ HSL ทันที ใช้รูปแบบอื่นก็ได้เช่นกัน

จาก RGBA

อ่านเป็น RGB

ค่า HSLhsla(10.59, 100%, 60%, 0.8)

HSL เป็น RGBA

สีเดียวกันแบบไม่โปร่งใส เป็น HSL ทึบ

ปรับสี

ฮิว11°

ความทึบ80%

ความสว่าง68%

ความสด0.210

ฮิว34°

รูปแบบอื่นทั้งหมด

ตารางความทึบ: ค่าอัลฟาใน HEX และ RGBA

ใน HEX แบบ 8 หลัก สองหลักสุดท้ายกำหนดความทึบ: FF คือทึบเต็มที่ 80 ประมาณ 50% และ 00 คือโปร่งใสทั้งหมด ตารางแสดงสีตัวอย่างทุก 5%

ความทึบ	อัลฟา HEX	HEX	RGBA
100%	ff	#ff5733	rgba(255, 87, 51, 1)
95%	f2	#ff5733f2	rgba(255, 87, 51, 0.95)
90%	e6	#ff5733e6	rgba(255, 87, 51, 0.9)
85%	d9	#ff5733d9	rgba(255, 87, 51, 0.85)
80%	cc	#ff5733cc	rgba(255, 87, 51, 0.8)
75%	bf	#ff5733bf	rgba(255, 87, 51, 0.75)
70%	b3	#ff5733b3	rgba(255, 87, 51, 0.7)
65%	a6	#ff5733a6	rgba(255, 87, 51, 0.65)
60%	99	#ff573399	rgba(255, 87, 51, 0.6)
55%	8c	#ff57338c	rgba(255, 87, 51, 0.55)
50%	80	#ff573380	rgba(255, 87, 51, 0.5)
45%	73	#ff573373	rgba(255, 87, 51, 0.45)
40%	66	#ff573366	rgba(255, 87, 51, 0.4)
35%	59	#ff573359	rgba(255, 87, 51, 0.35)
30%	4d	#ff57334d	rgba(255, 87, 51, 0.3)
25%	40	#ff573340	rgba(255, 87, 51, 0.25)
20%	33	#ff573333	rgba(255, 87, 51, 0.2)
15%	26	#ff573326	rgba(255, 87, 51, 0.15)
10%	1a	#ff57331a	rgba(255, 87, 51, 0.1)
5%	0d	#ff57330d	rgba(255, 87, 51, 0.05)
0%	00	#ff573300	rgba(255, 87, 51, 0)

ตัวอย่างการแปลง RGBA เป็น HSL

สี	RGBA	HSL
	rgba(255, 0, 0, 1)	hsl(0, 100%, 50%)
	rgba(0, 255, 0, 1)	hsl(120, 100%, 50%)
	rgba(0, 0, 255, 1)	hsl(240, 100%, 50%)
	rgba(255, 255, 255, 1)	hsl(0, 0%, 100%)
	rgba(0, 0, 0, 1)	hsl(0, 0%, 0%)
	rgba(128, 128, 128, 1)	hsl(0, 0%, 50.2%)
	rgba(255, 87, 51, 1)	hsl(10.59, 100%, 60%)
	rgba(59, 130, 246, 1)	hsl(217.22, 91.22%, 59.8%)
	rgba(16, 185, 129, 1)	hsl(160.12, 84.08%, 39.41%)
	rgba(245, 158, 11, 1)	hsl(37.69, 92.13%, 50.2%)
	rgba(139, 92, 246, 1)	hsl(258.31, 89.53%, 66.27%)
	rgba(236, 72, 153, 1)	hsl(330.37, 81.19%, 60.39%)

เกี่ยวกับ RGBA และ HSL

RGBA คือ RGB ที่เพิ่มช่องอัลฟาสำหรับความทึบ เขียนเป็น rgba(255, 87, 51, 0.5) อัลฟามีค่าตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบเต็มที่) ความทึบเดียวกันเขียนเป็น HEX 8 หลักได้ เช่น #ff573380

HSL บอกฮิวเป็นองศา ความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ อ่านง่าย แต่ความสว่างไม่สม่ำเสมอตามการมองเห็น: สีเหลืองที่ 50% ดูสว่างกว่าสีน้ำเงินที่ 50% มาก

การแปลงทำงานอย่างไร

เราอ่านค่า RGBA แปลงเป็น CIE XYZ ด้วยเมทริกซ์จากข้อกำหนด CSS Color 4 แล้วแปลงต่อเป็น HSL ค่าที่อยู่นอกขอบเขตสีปลายทางจะถูกปรับด้วยอัลกอริทึมของ CSS Color 4 ซึ่งคงความสว่างและฮิวไว้ แล้วลดความสดลง

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

แปลง RGBA เป็น HSL อย่างไร

วางหรือพิมพ์ค่า RGBA ลงในช่องด้านบน PickShade จะแปลงด้วยสูตร CSS Color 4 ทันทีที่พิมพ์ และคลิกเดียวก็คัดลอกค่า HSL ได้

การแปลง RGBA เป็น HSL แม่นยำหรือไม่

การคำนวณแม่นยำ ผลลัพธ์ถูกปัดเศษเฉพาะตอนแสดงผล โดยเหลือทศนิยมพอที่จะแปลงกลับเป็นสีเดิมได้ หากสีไม่อยู่ในขอบเขตสีปลายทาง PickShade จะเตือนและแสดงสีที่ใกล้ที่สุดที่อยู่ในขอบเขต

ได้รูปแบบอื่นพร้อมกันด้วยไหม

ได้ รูปแบบอื่นทั้งหมด รวมถึง OKLCH, Display P3, Tailwind, SwiftUI, Flutter และ Android แสดงอยู่ใต้ผลลัพธ์ และคัดลอกได้ในคลิกเดียว

ตัวแปลงนี้ใช้ฟรีไหม

ฟรี ไม่ต้องสมัคร และทำงานในเบราว์เซอร์ของคุณทั้งหมด