เครื่องแปลงสี
แปลงสีระหว่าง HEX, RGB และ HSL พร้อมตัวอย่างแบบเรียลไทม์
เครื่องมือที่เกี่ยวข้อง
วิธีใช้ แปลงสี
- 01
ป้อนสีเป็น HEX เช่น #ff8800
- 02
ดูการแปลงเป็น RGB และ HSL ทันที
- 03
คัดลอกรูปแบบที่คุณต้องการ
มันทำอะไร
นี่คือตัวแปลงสีสำหรับงานเว็บและงานออกแบบที่แปลสีระหว่างสามรูปแบบที่คุณใช้บ่อยที่สุด: HEX, RGB และ HSL พร้อมตัวอย่างสดเพื่อให้คุณเห็นได้อย่างชัดเจนว่าคุณกำลังทำอะไรอยู่
นี่คือสิ่งที่เชื่อมโยงระหว่างการออกแบบและโค้ดในชีวิตประจำวัน: การจับคู่สีของแบรนด์จากการจำลองไปจนถึงตัวแปร CSS, การแปลงค่าที่นักออกแบบมอบให้คุณในรูปแบบเดียวเป็นรูปแบบที่เฟรมเวิร์กของคุณต้องการ หรือค้นหาเฉดสีที่อ่อนกว่าเล็กน้อยสำหรับสถานะโฮเวอร์
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นจึงเกิดขึ้นได้ทันทีและไม่มีอะไรที่คุณป้อนจะถูกส่งไปทุกที่
รูปแบบแตกต่างกันอย่างไร
แต่ละรูปแบบอธิบายสีเดียวกันแตกต่างกัน HEX (เช่น #ff8800) เป็นรูปแบบย่อที่ใช้ใน CSS และ HTML RGB ระบุช่องสีแดง เขียว และน้ำเงินโดยตรง ซึ่งเป็นวิธีที่หน้าจอและโค้ด เช่น แคนวาส คิดเกี่ยวกับสี HSL อธิบายเฉดสี ความอิ่มตัวของสี และความสว่าง ซึ่งเข้าใจง่ายกว่ามากเมื่อคุณต้องการเขยิบสี: เปลี่ยนสีเพื่อเลื่อนไปรอบๆ วงล้อ หรือความสว่างเพื่อทำให้สีเข้มขึ้นโดยไม่ต้องเลือกรหัสใหม่ด้วยมือ
การแปลงทำงานอย่างไร
ป้อนค่า HEX และการอัปเดตเทียบเท่า RGB และ HSL ทันที เพื่อให้คุณสามารถคว้าเครื่องมือหรือโค้ดเบสรูปแบบใดก็ได้ที่อยู่ตรงหน้าคุณ
สิ่งที่ยังไม่ครอบคลุม
ในตอนนี้เครื่องมือจะเน้นที่สีทึบใน HEX, RGB และ HSL; ยังไม่รวมการสนับสนุนอัลฟ่า (ความทึบ)
คำถามที่พบบ่อย
รองรับรูปแบบใดบ้าง?
HEX (#rgb หรือ #rrggbb), RGB และ HSL ป้อนค่า HEX แล้วค่าอื่นจะอัปเดตสด
รองรับอัลฟา / ความทึบหรือไม่?
ยังไม่รองรับ เครื่องมือนี้เน้น HEX, RGB และ HSL แบบทึบ สามารถเพิ่มการรองรับอัลฟาภายหลังได้