ข้ามไปยังเครื่องมือเลือกสี

แปลง SwiftUI เป็น HSL

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

อ่านเป็น โค้ด Swift

ค่า HSLhsl(10.58, 100%, 60%)
HSL เป็น SwiftUI

ปรับสี

11°
100%

68%
0.210
34°

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

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

สีSwiftUIHSL
Color(red: 1, green: 0, blue: 0)hsl(0, 100%, 50%)
Color(red: 0, green: 1, blue: 0)hsl(120, 100%, 50%)
Color(red: 0, green: 0, blue: 1)hsl(240, 100%, 50%)
Color(red: 1, green: 1, blue: 1)hsl(0, 0%, 100%)
Color(red: 0, green: 0, blue: 0)hsl(0, 0%, 0%)
Color(red: 0.502, green: 0.502, blue: 0.502)hsl(0, 0%, 50.2%)
Color(red: 1, green: 0.341, blue: 0.2)hsl(10.59, 100%, 60%)
Color(red: 0.231, green: 0.51, blue: 0.965)hsl(217.22, 91.22%, 59.8%)
Color(red: 0.063, green: 0.725, blue: 0.506)hsl(160.12, 84.08%, 39.41%)
Color(red: 0.961, green: 0.62, blue: 0.043)hsl(37.69, 92.13%, 50.2%)
Color(red: 0.545, green: 0.361, blue: 0.965)hsl(258.31, 89.53%, 66.27%)
Color(red: 0.925, green: 0.282, blue: 0.6)hsl(330.37, 81.19%, 60.39%)

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

SwiftUI กำหนดสีด้วยค่าแดง เขียว และน้ำเงินตั้งแต่ 0 ถึง 1 เขียนเป็น Color(red: 1, green: 0.341, blue: 0.2) ส่วนความทึบเพิ่มด้วยพารามิเตอร์ opacity

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

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

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

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

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

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

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

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

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

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

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

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