แปลง HEX เป็น HSL Hexadecimal ↔ Hue Saturation Lightness ฟรี ออนไลน์ ปลอดภัย
พิมพ์ค่าเป็น HEX แล้วอ่านค่าเป็น HSL ได้ทันที การคำนวณทำในเบราว์เซอร์ ไม่มีอะไรถูกส่งไปที่ใด และสิ่งที่การแปลงนี้ขึ้นอยู่กับก็เขียนไว้ด้านล่าง ไม่ได้สันนิษฐานเอาเอง
ไม่มีการอัปโหลด
ที่มาของระบบสีเหล่านี้
Hex กับ RGB คือสิ่งเดียวกันที่เขียนสองแบบ สีบนหน้าจอคือตัวเลขสามค่า ได้แก่ปริมาณแสงสีแดง เขียว และน้ำเงินที่ต้องปล่อยออกมา แต่ละค่าอยู่ระหว่าง 0 ถึง 255 ซึ่งเท่ากับหนึ่งไบต์ ส่วน hex เป็นเพียงการเขียนไบต์เหล่านั้นในเลขฐานสิบหก ดังนั้น #FF8800 กับ rgb(255, 136, 0) จึงเป็นคำสั่งเดียวกันถึงพิกเซลเดียวกัน HSL ถูกคิดขึ้นเพราะทั้งสองแบบแรกมนุษย์อ่านเข้าใจยาก โดยระบุเฉดสีเป็นมุมรอบวงล้อสี ส่วนความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ นักออกแบบจึงทำให้สีสว่างขึ้นได้โดยไม่ต้องคำนวณตัวเลขสามค่าใหม่ CMYK เป็นของอีกโลกหนึ่งโดยสิ้นเชิง คือโลกของหมึกไม่ใช่แสง เป็นระบบแบบลบสี สร้างจากแม่พิมพ์สี่แผ่น และแสดงสีได้ไม่ครบเท่าที่หน้าจอแสดงได้ เพราะหน้าจอเปล่งแสง ขณะที่กระดาษทำได้เพียงสะท้อนแสง
ที่คุณจะพบระบบสีเหล่านี้
Hex คือสิ่งที่คุณพิมพ์ลงในสไตล์ชีต และเป็นสิ่งที่เครื่องมือออกแบบส่งให้คุณ RGB ปรากฏทุกที่ที่สีต้องใช้การคำนวณ เช่น การไล่สี ความโปร่งใส และโค้ดที่คำนวณเฉดสี HSL คือสิ่งที่คุณเลือกใช้เมื่อปรับชุดสีด้วยมือ เพราะการเปลี่ยนแปลงที่คุณต้องการมักเป็นการเปลี่ยนตัวเลขหนึ่งในสามค่านั้น CMYK คือสิ่งที่โรงพิมพ์ขอ และการแปลงเป็น CMYK คือช่วงเวลาที่งานออกแบบเลิกเป็นแสงแล้วกลายเป็นหมึก
คำถามที่คนมักถาม
ทำไมผล CMYK ที่ได้จึงต่างจากที่โรงพิมพ์ให้มา
เพราะไม่มีการแปลงที่ถูกต้องเพียงแบบเดียว การคำนวณในหน้านี้เป็นแบบง่ายที่ไม่ขึ้นกับอุปกรณ์ ซึ่งเป็นคำตอบที่เหมาะเมื่อคุณต้องการจุดเริ่มต้นหรือค่าที่ใกล้เคียงคร่าว ๆ ส่วนโรงพิมพ์จะแปลงผ่านโปรไฟล์สีที่คำนึงถึงหมึก กระดาษ และเครื่องพิมพ์เฉพาะแต่ละงาน และสี RGB เดียวกันจะให้ค่า CMYK ต่างกันบนกระดาษเคลือบมันกับกระดาษไม่เคลือบ สำหรับงานที่ต้องตรงกันเป๊ะ ให้ขอโปรไฟล์จากโรงพิมพ์แทนที่จะเชื่อสูตร
ทำไมสีบางสีบนหน้าจอจึงพิมพ์ออกมาไม่ได้
เพราะทั้งสองระบบแสดงสีได้ไม่เท่ากัน หน้าจอสร้างสีโดยการเพิ่มแสงและแสดงสีฟ้าอมเขียวหรือสีเขียวที่สดและอิ่มตัวได้ ซึ่งหมึกทำให้เหมือนไม่ได้ ส่วนกระดาษสร้างสีโดยการดูดกลืนแสง และสว่างได้มากที่สุดเพียงเท่าสีขาวของกระดาษ ชุดสีที่แต่ละระบบแสดงได้เรียกว่าขอบเขตสี (gamut) และในส่วนที่ไม่ทับซ้อนกัน การแปลงต้องเลือกสีที่ใกล้เคียงที่สุดเท่าที่มี นี่จึงเป็นเหตุผลที่สีสว่างบนหน้าจอมักดูหม่นลงเล็กน้อยเมื่อพิมพ์
คำตอบแม่นยำหรือไม่?
ถ้าหน่วยทั้งสองกำหนดค่าอิงกันด้วยจำนวนเต็ม คำตอบก็แม่นยำ — หน้านี้บอกไว้เหนือตัวเลข และการปัดเศษมีเพียงในจำนวนหลักที่แสดง แต่ถ้าอัตราส่วนไม่เป็นทศนิยมจำกัด หน้านี้จะแสดง 12 หลักนัยสำคัญ และบอกว่าความสัมพันธ์นั้นเป็นค่าประมาณ แทนที่จะแสร้งว่าแม่นยำ
สิ่งที่ฉันพิมพ์จะออกจากอุปกรณ์ของฉันหรือไม่?
ไม่ การคำนวณทำในเบราว์เซอร์ของคุณ ไม่มีอะไรถูกอัปโหลด และก็ไม่มีเซิร์ฟเวอร์ให้อัปโหลดไปด้วย โหลดหน้านี้เพียงครั้งเดียว แล้วจะใช้งานต่อได้แม้ปิดเครือข่าย
ทำไมคุณจึงแปลง HEX เป็น HSL
โค้ดเฮกซ์อย่าง #5A4632 เป็นวิธีที่ดีในการเก็บสี แต่เป็นวิธีที่แย่ในการคิดถึงสี ไม่มีสิ่งใดในตัวเลขที่บอกคุณว่าสีนี้เป็นสีน้ำตาล สว่างเพียงใด หรือเวอร์ชันที่จางลงเล็กน้อยจะหน้าตาเป็นอย่างไร HSL ถูกคิดค้นขึ้นเพื่อแก้ปัญหานั้น มันอธิบายสีในแบบที่ผู้คนมักพูดถึง คือเป็นเฉดสีอะไร สดเพียงใด และสว่างเพียงใด การแปลง HEX เป็น HSL คือการแปลสีจากรูปแบบที่เครื่องมือออกแบบให้คุณเป็นรูปแบบที่คุณใช้เหตุผลได้: hsl(30, 29%, 28%) คือสีน้ำตาลส้มเข้มและหม่น และคุณเห็นได้ทันทีว่าการเพิ่มตัวเลขสุดท้ายจะทำให้สีจางลง
นั่นคือเหตุผลที่แท้จริงที่นักออกแบบและนักพัฒนาฟรอนต์เอนด์ใช้การแปลงนี้ พวกเขามีสีแบรนด์เป็นเฮกซ์และต้องการชุดสีที่เกี่ยวข้องกัน: สีที่สว่างกว่าสำหรับสถานะเมื่อวางเมาส์ สีที่เข้มกว่าสำหรับปุ่มที่ถูกกด สีจางมากสำหรับพื้นหลัง สีที่ลดความอิ่มตัวสำหรับตัวควบคุมที่ปิดใช้งาน ในเฮกซ์ แต่ละสีเป็นการไล่หาเลขสามคู่ใหม่ ใน HSL แต่ละสีเป็นการเปลี่ยนตัวเลขเพียงตัวเดียว สีเป็นสีเดิม เพียงแต่มองผ่านเลนส์ที่มีประโยชน์กว่า
หน้านี้แปลงในเบราว์เซอร์ของคุณ และไม่มีสิ่งใดถูกอัปโหลด ด้านล่างคุณจะพบว่าตัวเลขสามตัวของ HSL คำนวณจากตัวเลขเฮกซ์อย่างไร สิ่งที่การแปลงเก็บไว้และที่ใดที่ปัดเศษ เฉดสี ความอิ่มตัว และความสว่างมีความหมายอย่างไรในทางปฏิบัติ นักออกแบบใช้ HSL สร้างชุดสีและสถานะอย่างไร และกับดักที่ดักคนที่แปลง HEX เป็น HSL เป็นครั้งแรก
HSL อธิบายอะไร
เฉดสี: ตำแหน่งบนวงล้อสี
เฉดสีคือมุมตั้งแต่ 0 ถึง 360 องศารอบวงล้อสี สีแดงอยู่ที่ 0 เหลืองที่ 60 เขียวที่ 120 ฟ้าอมเขียวที่ 180 น้ำเงินที่ 240 และม่วงแดงที่ 300 ที่ 360 คุณกลับมาที่สีแดง เฉดสี 30 อยู่ระหว่างแดงกับเหลือง ซึ่งคือสีส้ม ตัวเลขบอกว่าคุณอยู่ในตระกูลสีใด และไม่บอกอะไรเกี่ยวกับความสว่างหรือความจาง
ความอิ่มตัว: สดเพียงใด
ความอิ่มตัวเป็นเปอร์เซ็นต์ ที่ 100% สีบริสุทธิ์เท่าที่เฉดสีอนุญาต ที่ 0% สีสูญเสียสีทั้งหมดและเป็นสีเทา ความอิ่มตัว 29% อย่างในสีน้ำตาลตัวอย่างของเราเป็นสีหม่นและเป็นสีดิน การลดความอิ่มตัวเป็นวิธีที่เร็วที่สุดในการทำให้สีฉูดฉาดสงบลงโดยไม่เปลี่ยนลักษณะของมัน
ความสว่าง: จางหรือเข้มเพียงใด
ความสว่างก็เป็นเปอร์เซ็นต์เช่นกัน ที่ 0% สีเป็นสีดำไม่ว่าเฉดสีและความอิ่มตัวจะเป็นอย่างไร ที่ 100% เป็นสีขาว ที่ 50% เป็นสีเต็มตามปกติ สีน้ำตาลของเราที่ 28% อยู่ด้านเข้ม การเพิ่มตัวเลขให้เวอร์ชันที่จางกว่าของสีเดียวกัน และการลดให้เวอร์ชันที่เข้มกว่า ซึ่งเป็นการเปลี่ยนแปลงที่นักออกแบบต้องการบ่อยที่สุด
ทำไมจึงง่ายกว่าเฮกซ์
ในเฮกซ์ การทำให้สีจางลงหมายถึงการเพิ่มทั้งสามคู่ด้วยปริมาณที่ต่างกันเพื่อไม่ให้เฉดสีเลื่อน ซึ่งแทบเป็นไปไม่ได้ที่จะทำด้วยสายตา ใน HSL หมายถึงการเปลี่ยนตัวเลขเพียงตัวเดียวและปล่อยอีกสองตัวไว้
การแปลงทำงานอย่างไร
จากสามไบต์เป็นมุมและเปอร์เซ็นต์สองค่า
ตัวแปลงอ่านตัวเลขเฮกซ์เป็นค่าสีแดง เขียว และน้ำเงินก่อน แต่ละค่าตั้งแต่ 0 ถึง 255 และปรับสัดส่วนให้อยู่ระหว่าง 0 ถึง 1 จากนั้นหาค่ามากที่สุดและน้อยที่สุดในสามค่า ความสว่างคือค่าเฉลี่ยของสองค่านั้น ความอิ่มตัวขึ้นอยู่กับว่าสองค่าห่างกันเพียงใดเมื่อเทียบกับความสว่าง เฉดสีขึ้นอยู่กับว่าช่องใดมีค่ามากที่สุดและอีกสองช่องเปรียบเทียบกันอย่างไร หากทั้งสามเท่ากัน สีเป็นสีเทา ความอิ่มตัวเป็นศูนย์ และเฉดสีไม่มีความหมาย ตัวแปลงจึงแสดง 0 สำหรับเฉดสีนั้น
ตัวอย่าง
สำหรับ #5A4632 ไบต์คือ 90, 70 และ 50 สีแดงมากที่สุดที่ 0.353 สีน้ำเงินน้อยที่สุดที่ 0.196 ความสว่างคือครึ่งหนึ่งของผลรวม 0.275 หรือประมาณ 28% ช่วงห่างคือ 0.157 ดังนั้นความอิ่มตัวคือ 0.157 หารด้วยผลรวม 0.549 หรือประมาณ 29% สีแดงเป็นช่องที่มากที่สุดและสีเขียวอยู่ตรงกลาง ซึ่งทำให้เฉดสีอยู่ที่ 30 องศา ผลลัพธ์คือ hsl(30, 29%, 28%)
จำนวนเต็ม
ตัวเลขทั้งสามถูกปัดเป็นองศาจำนวนเต็มและเปอร์เซ็นต์จำนวนเต็มเมื่อเขียนลงไป นั่นคือรูปแบบที่ผู้คนใช้และที่ CSS คาดหวังในงานประจำวัน แต่หมายความว่าข้อมูลบางส่วนถูกทิ้งที่หลักสุดท้าย ดังที่ส่วนถัดไปอธิบาย
สิ่งที่การแปลงเก็บไว้และสิ่งที่ทำไม่ได้
เก็บสีตามที่ตาจัดประเภท
ผลลัพธ์คือสีตามที่ตาจัดประเภท: เฉดสีบนวงล้อ ความอิ่มตัวเพียงใด ความสว่างเพียงใด นั่นคือเหตุผลที่ HSL คุ้มค่าที่จะมี คุณทำให้สีจางลงหรือเข้มขึ้นหนึ่งระดับได้โดยเปลี่ยนตัวเลขตัวเดียว ซึ่งแทบเป็นไปไม่ได้ในเฮกซ์
ไม่อาจสัญญาว่าจะได้ไบต์เดิมกลับมา
ทั้งสองอธิบายสีเดียวกัน แต่ HSL ไปถึงสีเหล่านั้นผ่านรูปทรงเรขาคณิตที่ต่างออกไป และตัวเลขสามตัวของมันถูกปัดเป็นองศาจำนวนเต็มและเปอร์เซ็นต์จำนวนเต็มเมื่อเขียนลงไป สีที่แปลงเป็น HSL แล้วกลับมาจึงอาจคลาดเคลื่อนไปหนึ่งหรือสองขั้นจากจุดเริ่มต้น: ดูเหมือนกันด้วยตา แต่ไม่ใช่ไบต์ต่อไบต์ หากคุณต้องการไบต์ที่แน่นอนกลับมา ให้เก็บเฮกซ์ไว้ แปลง HEX เป็น HSL เพื่อทำงานกับสี และเก็บเฮกซ์ไว้เป็นต้นแบบ
สีเทาไม่มีเฉดสี
เมื่อสามไบต์เท่ากัน ไม่มีอะไรจะพูดเกี่ยวกับเฉดสี ตัวแปลงให้เฉดสี 0 และความอิ่มตัว 0% และความสว่างเพียงอย่างเดียวอธิบายสีเทา อย่าตีความอะไรจาก 0
การใช้ HSL ในทางปฏิบัติ
การสร้างชุดเฉดสี
ใช้สีฐาน hsl(30, 29%, 28%) เฉดที่สว่างกว่าสำหรับตอนวางเมาส์คือ hsl(30, 29%, 34%) สีจางมากสำหรับพื้นหลังคือ hsl(30, 29%, 94%) เฉดที่เข้มกว่าสำหรับสถานะที่ถูกกดคือ hsl(30, 29%, 22%) เฉดสีและความอิ่มตัวอยู่กับที่ สีเหล่านี้จึงเห็นได้ชัดว่าอยู่ด้วยกัน การทำเช่นเดียวกันในเฮกซ์ต้องลองหลายครั้งและยังดูแปลกไปเล็กน้อย
ธีมและโหมดมืด
ธีมมักต้องการชุดสีเดียวกันในเวอร์ชันสว่างและเวอร์ชันมืด ด้วย HSL คุณเก็บเฉดสีไว้และปรับความสว่างและความอิ่มตัว: ทำให้พื้นหลังสว่างขึ้นและข้อความเข้มขึ้นสำหรับธีมสว่าง และกลับกันสำหรับธีมมืด การกำหนดเฉดสีเป็นคุณสมบัติแบบกำหนดเองและเปลี่ยนเฉพาะความสว่างเป็นวิธีที่พบบ่อยและเป็นระเบียบ
การสร้างชุดสี
เพื่อหาสีที่เข้ากับสีฐาน ให้หมุนเฉดสี สามสิบองศาไปด้านใดด้านหนึ่งให้สีข้างเคียง 180 ให้สีตรงข้าม และ 120 หรือ 240 ให้สีสามเหลี่ยม กำหนดความอิ่มตัวและความสว่างไว้ เปลี่ยนเฉดสี และสีจะมีความรู้สึกสม่ำเสมอ เป็นวิธีที่รวดเร็วในการเริ่มชุดสีที่ไม่ดูสุ่ม
ความเปรียบต่างที่เข้าถึงได้
ความสว่างเป็นตัวควบคุมหลักของความเปรียบต่าง หากข้อความอ่านยากบนพื้นหลังสี วิธีแก้มักเป็นการเพิ่มความต่างของความสว่างระหว่างทั้งสอง และ HSL ทำให้เป็นเรื่องของการปรับตัวเลขหนึ่งตัวในแต่ละด้าน
วิธีแปลง HEX เป็น HSL ที่นี่
พิมพ์หรือวางโค้ดเฮกซ์
ป้อนสีในช่องแรก จะมีหรือไม่มีเครื่องหมายแฮชก็ได้ รับทั้งรูปแบบสามหลักและหกหลัก และอ่านรูปแบบแปดหลักที่มีความโปร่งใสด้วย
อ่านค่า hsl
คำตอบปรากฏทันที เช่น #5A4632 = hsl(30, 29%, 28%) ตัวเลขสามตัวคือเฉดสีเป็นองศา และความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์
คัดลอกไปใส่ในสไตล์ชีตของคุณ
ใช้ผลลัพธ์ตามที่เป็นในกฎอย่าง color: hsl(30, 29%, 28%) หากต้องการปรับสี ให้เปลี่ยนตัวเลขสุดท้าย เครื่องมือสำหรับทิศทางตรงข้ามคือ HSL เป็น HEX
รูปแบบการเขียนเหล่านี้มาจากไหน
เฮกซ์และ RGB คือสิ่งเดียวกันที่เขียนสองครั้ง
สีบนหน้าจอคือตัวเลขสามตัว คือจะเปล่งแสงสีแดง เขียว และน้ำเงินเท่าใด แต่ละตัวตั้งแต่ 0 ถึง 255 ซึ่งคือหนึ่งไบต์ เฮกซ์เพียงเขียนไบต์เหล่านั้นเป็นเลขฐานสิบหก หากต้องการดูตัวเลข ให้ แปลง HEX เป็น RGB
HSL และ CMYK
HSL ถูกคิดค้นขึ้นเพราะทั้งสองแบบมนุษย์อ่านไม่สะดวก: ให้เฉดสีเป็นมุมรอบวงล้อสี พร้อมความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ นักออกแบบจึงทำให้บางสิ่งสว่างขึ้นได้โดยไม่ต้องคำนวณตัวเลขสามตัวใหม่ CMYK อยู่ในโลกที่ต่างออกไปโดยสิ้นเชิง คือหมึกแทนที่จะเป็นแสง เป็นแบบลบ สร้างจากแม่พิมพ์สี่แผ่น และไม่สามารถไปถึงทุกสีที่หน้าจอทำได้ เพราะหน้าจอเปล่งแสงในขณะที่กระดาษเพียงสะท้อน
กับดักเมื่อคุณแปลง HEX เป็น HSL
คาดหวังการแปลงไปกลับที่สมบูรณ์แบบ
เพราะการปัดเศษ การแปลงกลับอาจให้โค้ดที่ห่างจากต้นฉบับหนึ่งหรือสองขั้น สำหรับสีเดียวมองไม่เห็น สำหรับระบบการออกแบบที่แปลงสีจำนวนมากไปมา อาจสะสม ให้เก็บเฮกซ์ไว้เป็นแหล่งที่มา
สันนิษฐานว่าความสว่างเท่ากันหมายถึงความจ้าเท่ากัน
สองสีที่มีความสว่าง HSL เท่ากันอาจดูต่างกันมากในความจ้า: สีเหลืองที่ 50% ดูจ้ากว่าสีน้ำเงินที่ 50% มาก ความสว่าง HSL เป็นตัวเลขที่สะดวก ไม่ใช่การวัดความจ้าที่รับรู้ สำหรับการตรวจความเปรียบต่าง ให้ใช้เครื่องมือตรวจความเปรียบต่างที่เหมาะสม
ลืมเครื่องหมายเปอร์เซ็นต์
ใน CSS ความอิ่มตัวและความสว่างใน hsl() มีเครื่องหมายเปอร์เซ็นต์ และเฉดสีเป็นตัวเลขธรรมดาหรือตัวเลขที่มี deg การละเครื่องหมายเป็นข้อผิดพลาดแบบคลาสสิก
ตีความสีเทามากเกินไป
สีเทาไม่มีเฉดสี หากตัวแปลงแสดง 0 สำหรับสีเทา ไม่ได้หมายความว่ามันออกแดง
คำถามที่ผู้คนถามก่อนแปลง
#FF0000 ใน HSL คืออะไร
hsl(0, 100%, 50%) สีแดงบริสุทธิ์
#FFFFFF ใน HSL คืออะไร
hsl(0, 0%, 100%) สีขาว เฉดสีไม่มีความหมายสำหรับสีขาว และตัวแปลงแสดง 0
HSL ได้รับการรองรับทุกที่หรือไม่
เบราว์เซอร์ปัจจุบันทั้งหมดเข้าใจ hsl() และ hsla() อยู่ใน CSS มาหลายปีแล้ว
การแปลงแน่นอนหรือไม่
แน่นอนในแง่ของการอธิบายสีเดียวกัน แต่ตัวเลขถูกปัดเป็นองศาและเปอร์เซ็นต์จำนวนเต็ม การแปลงกลับจึงอาจคลาดเคลื่อนไปหนึ่งขั้น
สีของฉันถูกอัปโหลดหรือไม่
ไม่ การคำนวณทำงานในเบราว์เซอร์ของคุณ และไม่มีสิ่งใดถูกส่งไปที่ใด
ฉันจะแปลงกลับได้อย่างไร
ด้วย HSL เป็น HEX
เลือกอย่างชาญฉลาดเมื่อคุณแปลง HEX เป็น HSL
ใช้ HSL เพื่อทำงาน ใช้เฮกซ์เพื่อเก็บ
เก็บชุดสีต้นแบบไว้ในเฮกซ์ ซึ่งไม่คลุมเครือ และใช้ HSL เมื่อคุณต้องการสร้างรูปแบบต่าง ๆ การแปลงไปกลับสูญเสียเล็กน้อย ต้นแบบไม่สูญเสีย
พิจารณาปริภูมิสีที่ใหม่กว่า
ปัจจุบัน CSS มี oklch() และรูปแบบการเขียนที่คล้ายกัน ซึ่งความสว่างเท่ากันดูเท่ากันจริง ๆ คุ้มค่าที่จะเรียนรู้สำหรับระบบการออกแบบใหม่ HSL ยังคงเป็นรูปแบบที่เกือบทุกคนเข้าใจและทุกเครื่องมือรองรับ
ใช้คุณสมบัติแบบกำหนดเอง
กำหนด --hue, --sat และ --light และสร้างสีจากสิ่งเหล่านั้น: hsl(var(--hue) var(--sat) var(--light)) ธีมจึงเปลี่ยนได้โดยแก้ตัวเลขไม่กี่ตัว
การอ่านและเขียน HSL อย่างมั่นใจ
จุดสังเกตบางอย่างที่ควรจำ
ตัวเลขไม่กี่ตัวทำให้ HSL อ่านง่ายขึ้น เฉดสีที่เป็นพหุคูณของ 60 คือสีบริสุทธิ์: 0 แดง 60 เหลือง 120 เขียว 180 ฟ้าอมเขียว 240 น้ำเงิน 300 ม่วงแดง ความสว่าง 50 กับความอิ่มตัว 100 ให้เวอร์ชันที่บริสุทธิ์ที่สุดของเฉดสีใด ๆ และความสว่าง 95 ขึ้นไปเป็นสีจางที่จางพอจะใช้เป็นพื้นหลัง เมื่อคุณแปลง HEX เป็น HSL และเห็นเฉดสีใกล้จุดสังเกตเหล่านี้ คุณบอกตระกูลสีได้ในพริบตา
การเคลื่อนไปมาระหว่างตระกูลสี
การบวก 180 เข้ากับเฉดสีให้สีตรงข้ามบนวงล้อ ซึ่งคือสีเสริมและมักให้ความเปรียบต่างที่แรงที่สุด การบวกหรือลบ 30 ให้สีข้างเคียงที่อยู่ข้างสีเดิมได้อย่างลงตัว นักออกแบบใช้ขั้นตอนเหล่านี้เลือกสีเน้นที่เข้ากับสีแบรนด์โดยไม่ต้องเดา
จดบันทึกค่าที่แปลงแล้ว
เมื่อคุณแปลง HEX เป็น HSL สำหรับชุดสี ให้เขียนผลลัพธ์ในตารางพร้อมเฮกซ์ต้นฉบับข้าง ๆ ตารางแสดงว่าสีสัมพันธ์กันอย่างไร และหากเฉดสีหรือความสว่างใดแตกต่างจากตัวอื่น ความผิดปกติก็เห็นได้ทันที และยังให้ทีมของคุณมีข้อมูลอ้างอิงร่วมกัน
ทดสอบบนหน้าจอจริง
สีที่ดูสมดุลบนจอภาพที่ปรับเทียบแล้วอาจดูต่างออกไปบนโทรศัพท์ท่ามกลางแสงแดดหรือบนแล็ปท็อปราคาถูก ตรวจชุดสีที่เสร็จแล้วบนอุปกรณ์อย่างน้อยสองเครื่อง และปรับความสว่างเล็กน้อยหากสีจางหายไปบนเครื่องใดเครื่องหนึ่ง
ตัวแปลงที่เกี่ยวข้อง
เครื่องมือในกลุ่มเดียวกันครอบคลุมการแปลงที่อยู่ใกล้เคียงกัน หากต้องการแปลงกลับ ให้ใช้ HSL เป็น HEX สำหรับตัวเลขที่อยู่เบื้องหลังโค้ด มี HEX เป็น RGB และ RGB เป็น HEX และสำหรับงานพิมพ์ มี HEX เป็น CMYK และ CMYK เป็น HEX สำหรับขนาดในสไตล์ชีตเดียวกัน px เป็น rem และ px เป็น em ทำสำหรับความยาวเหมือนที่หน้านี้ทำสำหรับสี
ตัวอย่างการใช้งานจริง
สมมติว่าสีแบรนด์ของคุณคือ #1E7A5C คุณแปลง HEX เป็น HSL และอ่านได้ hsl(160, 61%, 30%) สำหรับสถานะวางเมาส์ คุณเขียน hsl(160, 61%, 36%) สว่างขึ้นเล็กน้อย สำหรับสถานะถูกกด hsl(160, 61%, 24%) สำหรับพื้นหลังจางมากหลังประกาศ hsl(160, 40%, 95%) สำหรับปุ่มที่ปิดใช้งาน hsl(160, 12%, 60%) เฉดสีเดียวกันที่เอาสีส่วนใหญ่ออก ห้าสี หนึ่งเฉดสี เขียนเสร็จในหนึ่งนาที และทุกสีดูเหมือนอยู่ด้วยกัน เมื่อสีแบรนด์เปลี่ยน คุณเปลี่ยนตัวเลขเฉดสีเพียงครั้งเดียว
รายการตรวจสอบสั้น ๆ
ก่อนแปลง
ตัดสินใจว่าคุณต้องการทำอะไรกับสี: สร้างรูปแบบต่าง ๆ ทำธีม หรือเพียงอ่านค่า
ระหว่างแปลง
วางเฮกซ์ อ่านค่า hsl และจดตัวเลขสามตัว
หลังแปลง
สร้างรูปแบบต่าง ๆ โดยเปลี่ยนทีละตัวเลข และดูบนพื้นหลังจริง
ข้อผิดพลาดที่พบบ่อย
ถือว่าตัวเลขที่ปัดแล้วเป็นค่าแน่นอน
เป็นจำนวนเต็ม ให้เก็บเฮกซ์ไว้เป็นต้นแบบ
เทียบความสว่างกับความจ้า
สองสีที่ความสว่างเท่ากันอาจต่างกันมากในความจ้าที่ดูเหมือน
ละเครื่องหมายเปอร์เซ็นต์
ความอิ่มตัวและความสว่างต้องมีใน CSS
สีของคุณอยู่บนอุปกรณ์ของคุณ
การคำนวณเกิดขึ้นในเครื่อง ค่าของคุณถูกใช้โดยเบราว์เซอร์ของคุณเอง และไม่มีสิ่งใดถูกส่งไปที่ใด ไม่มีสิ่งใดต้องลบภายหลังและไม่ต้องสร้างบัญชี นั่นคือวิธีง่าย ๆ ในการแปลง HEX เป็น HSL
สรุป
หากต้องการแปลง HEX เป็น HSL ที่นี่ ให้พิมพ์หรือวางโค้ดเฮกซ์แล้วอ่านค่า hsl ได้ทันที การแปลงเก็บสีตามที่ตาจัดประเภท: เฉดสีบนวงล้อ ความอิ่มตัวเพียงใด ความสว่างเพียงใด นั่นคือเหตุผลที่ HSL คุ้มค่าที่จะมี เพราะคุณทำให้สีจางลงหรือเข้มขึ้นหนึ่งระดับได้โดยเปลี่ยนตัวเลขตัวเดียว ซึ่งแทบเป็นไปไม่ได้ในเฮกซ์ ทั้งสองอธิบายสีเดียวกัน แต่ HSL ไปถึงสีเหล่านั้นผ่านรูปทรงเรขาคณิตที่ต่างออกไป และตัวเลขสามตัวของมันถูกปัดเป็นองศาจำนวนเต็มและเปอร์เซ็นต์จำนวนเต็ม สีที่แปลงเป็น HSL แล้วกลับมาจึงอาจคลาดเคลื่อนไปหนึ่งหรือสองขั้นจากจุดเริ่มต้น หากคุณต้องการไบต์ที่แน่นอนกลับมา ให้เก็บเฮกซ์ไว้ ไม่มีสิ่งใดถูกอัปโหลด