ตัวเลือกสีของ Morph ช่วยให้คุณเลือกสีได้แบบเห็นภาพ และอ่านโค้ดได้ทันทีในรูปแบบที่คุณใช้จริง: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`), และ HSL (`hsl(214, 64%, 53%)`) ลากผ่านพื้นที่สี ปรับละเอียดด้วยสไลเดอร์โทนสี และคัดลอกค่าตรงไปยัง CSS, ไฟล์ออกแบบ หรือที่ใดก็ได้ที่คุณต้องการ
โค้ดทั้งสามนี้อธิบายสีเดียวกัน — แค่เขียนแตกต่างกัน และแต่ละแบบมีงานเฉพาะ:
เปลี่ยนสีได้ตามต้องการ โค้ดทั้งสามจะปรับตามกัน คุณจับค่าที่ต้องการสำหรับโปรเจกต์ได้ทันที
นักออกแบบใช้เพื่อจับโทนสีให้แน่น คัดลอกค่าไปยังไฟล์ออกแบบหรือคู่มือสไตล์ นักพัฒนา Front-end ใช้เพื่อคัดลอก HEX สำหรับปุ่ม หรือแปลง RGB จากนักออกแบบเป็น HSL เพื่อสร้างสถานะ Hover ทุกคนที่ปรับแต่งธีม สีกราฟิก หรือเทมเพลตอีเมลสามารถเลือกสีที่แม่นยำและคัดลอกได้ในคลิกเดียว เนื่องจาก HSL อยู่ติดกับ HEX การสร้างเฉดสีที่สว่างขึ้นหรือมืดลงจากสีต้นแบบทำได้ง่ายกว่าการเดาตัวเลข_HEX
ตัวเลือกสีเป็นโค้ดเบราว์เซอร์บริสุทธิ์ — คณิตศาสตร์สีและอินเทอร์เฟซทำงานบนอุปกรณ์ของคุณทั้งหมด ไม่มีการอัปโหลด ไม่มีบัญชี และไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ มันโหลดเร็ว ทำงานได้แม้ไม่เชื่อมต่ออินเทอร์เน็ตหลังจากเปิดหน้าเว็บ เพราะการเลือกสีและคำนวณโค้ดไม่ต้องใช้การเชื่อมต่อเครือข่าย
เมื่อคัดลอกค่า HEX มันพร้อมวางลงใน CSS ได้ทันที หากต้องการสีมีความโปร่งใส แปลงเป็น RGB และเพิ่มช่อง alpha (`rgba(...)`) ในโค้ดของคุณ เพื่อสร้างโทนสีที่สอดคล้องกัน เลือกสีต้นแบบหนึ่ง และใช้ค่า HSL ของมัน ปรับความสว่างขึ้นหรือลงโดยคงโทนและสีสันคงที่ เพื่อสร้างเฉดสีและสีมืดที่รู้สึกเป็นชุด แทนที่จะเป็นชุดสุ่ม
แสดงค่า HEX, RGB และ HSL สำหรับทุกสีที่เลือก ค่าทั้งสามซิงค์กันเสมอ คุณคัดลอกได้ตามรูปแบบที่โปรเจกต์ต้องการ
HSL ช่วยปรับสีได้ง่ายด้วยการเพิ่มความสว่างสำหรับโทนสว่าง ลดความสว่างสำหรับโทนมืด หรือเลื่อนโทนสี โดยไม่ต้องเดาตัวเลข_HEX
เลือกสี คัดลอกค่า RGB แล้วเพิ่มช่องแอลฟาในโค้ดเป็น rgba(...) เพื่อกำหนดระดับโปร่งใส
ไม่ ตัวเลือกสีทำงานบนเบราว์เซอร์ทั้งหมด ไม่มีการอัปโหลด และไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ — แม้ทำงานออฟไลน์ได้หลังโหลดแล้ว
เลือกสีพื้นฐาน ใช้ค่า HSL จากนั้นปรับความสว่างขึ้นหรือลง ขณะคงโทนและความอิ่มตัว เพื่อสร้างโทนสว่างและมืดที่รู้สึกเหมือนชุดเดียวกัน