HSV ถึง HSL

แปลงค่าสี HSV เป็น HSL เพื่อการจัดการสีที่หลากหลายในระบบการออกแบบ

แปลงระหว่างโมเดลสีที่ใช้งานง่ายเพื่อความยืดหยุ่นในการออกแบบที่เพิ่มขึ้น

ตัวแปลงสี

HSL Output

hsl(0°, 100%, 50%)

HSL Values

เฉดสี 0°

0-360° color wheel position

ความอิ่มตัว 100%

0-100% color intensity

ความเบาสบาย 50%

0-100% brightness

hsl(0°, 100%, 50%)

รูปแบบเพิ่มเติม

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

การใช้งาน CSS

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

ข้อมูลเชิงลึกเกี่ยวกับการแปลง

สีแดงสดใสนี้รักษาความอิ่มตัวเต็มที่ในทั้งสองโมเดลสี แต่แสดงการวัดความสว่างที่แตกต่างกัน ซึ่งแสดงให้เห็นถึงความแตกต่างที่สำคัญระหว่างค่า (HSV) และความสว่าง (HSL)

ตัวอย่างการแปลง

สีแดงสดใส

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

ความแตกต่าง ความเบา = 50% ของค่า

ฟอเรสต์กรีน

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

ความแตกต่าง ปรับตามระดับความสว่าง

รอยัลบลู

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

ความแตกต่าง ความเบาที่สมดุลเพื่อการรับรู้

สีชมพูอ่อน

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

ความแตกต่าง ความอิ่มตัวเพิ่มขึ้นใน HSL

สีม่วงอ่อน

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

ความแตกต่าง ปรับความสว่างลง

โทนสีเทา

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

ความแตกต่าง เหมือนกับโทนสีเทา

เครื่องมือที่แนะนำ

HSL to HSV Converter

แปลงค่าสี HSL กลับเป็น HSV เพื่อการจัดการสีทางเลือก

เครื่องกำเนิดความสามัคคีสี

สร้างรูปแบบสีที่สมดุลโดยใช้ความสัมพันธ์สีตาม HSL

HSL Color Scales

สร้างเฉดสี อ่อน เข้ม และโทนสีใดๆ โดยใช้การปรับ HSL

เครื่องเปรียบเทียบโมเดลสี

แสดงภาพว่าสีปรากฏอย่างไรในโมเดล HSV, HSL, RGB และ CMYK

เกี่ยวกับเครื่องมือนี้

ตัวแปลง HSV เป็น HSL ช่วยให้การเปลี่ยนผ่านระหว่างโมเดลสีที่ใช้งานง่ายสองแบบราบรื่น โดยแต่ละแบบมีข้อดีที่แตกต่างกันสำหรับงานออกแบบและเวิร์กโฟลว์ที่แตกต่างกัน

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

แม้ว่าทั้งสองโมเดลจะมีองค์ประกอบ Hue และ Saturation ร่วมกัน แต่การจัดการความสว่าง (ค่าเทียบกับความสว่าง) ของโมเดลทั้งสองนี้สร้างพฤติกรรมที่แตกต่างกันอย่างสิ้นเชิง ตัวแปลงนี้ใช้อัลกอริทึมทางคณิตศาสตร์ที่แม่นยำเพื่อแปลงค่าระหว่างโมเดลทั้งสอง โดยยังคงรักษาความสอดคล้องของภาพไว้ ช่วยให้นักออกแบบสามารถใช้ประโยชน์จากจุดแข็งของแต่ละโมเดลได้ตลอดกระบวนการทำงาน