HEX to HSL Converter

Convert HEX colors to HSL instantly

รองรับ HEX, RGB, HSL, HWB, Lab, LCH, Oklab, OKLCH, Display P3 และชื่อสี CSS

#5CCC7FFF
H139°
อัลฟา100%
ตัวอย่าง
บนพื้นสว่าง
บนพื้นมืด
hex
hsl
HSL → HEX
HSL

CSS HEX ใช้ RRGGBBAA ส่วน Android และ Flutter ใช้ AARRGGBB

HEX
RGB
OKLCH
HEX + AlphaRRGGBBAA
RGB + Alpha
HSL + Alpha
สีล่าสุด

สีที่แปลงแล้วจะแสดงที่นี่

ภาพรวม

แปลงสี HEX เป็น HSL โดยตรง พร้อมรักษาสี sRGB และอัลฟาเมื่อไวยากรณ์ปลายทางรองรับ หน้านี้เริ่มด้วยอินพุต HEX และแสดงผล HSL ก่อน

วิธีการทำงาน

ป้อน HEX เช่น #5CCC7F เอนจินในเบราว์เซอร์จะตรวจสอบช่องสี แปลงผ่านโมเดลสีกลาง แล้วอัปเดต HSL ตัวอย่าง คอนทราสต์ และรูปแบบนักพัฒนาอื่นทันที

ตัวอย่างและการใช้งาน

ใช้การแปลง HEX เป็น HSL เมื่อต้องย้ายสีระหว่าง CSS งานส่งต่อดีไซน์ โค้ดแอป หรือข้อกำหนดงานพิมพ์ โดยไม่มีการอัปโหลดค่าสี

กรณีขอบเขตและข้อจำกัด

HEX รองรับ 3, 4, 6 และ 8 หลัก โดยค่า CSS 8 หลักใช้ลำดับ RRGGBBAA Hue ของ HSL วนที่ 360 องศา ส่วน saturation และ lightness ต้องเป็นเปอร์เซ็นต์

การแปลงย้อนกลับ

หากต้องการทิศทางตรงข้าม ให้เปิดตัวแปลง HSL เป็น HEX ที่ลิงก์ไว้ URL หัวเรื่อง อินพุตเริ่มต้น และผลหลักจะเปลี่ยนตามกัน

CodingTool เปิดตัวอย่างเป็นทางการบน

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.toolsLaunchpadly Startup DirectoryCodingTool.dev — Featured on Smol Launch