ตัวแปลงรหัสสี

พิมพ์สีในรูปแบบที่คุ้นเคยแบบใดก็ได้ เช่น #1f5fd6, 1f5fd6, #1f5 หรือ rgb(31, 95, 214) แล้วรูปแบบอื่นทั้งหมดจะปรากฏพร้อมกัน พร้อมค่าคอนทราสต์ที่คุณต้องใช้เพื่อให้ตัวหนังสืออ่านออก

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

คอนทราสต์:

วิธีใช้

  1. พิมพ์หรือวางรหัสสี หรือเลือกสีจากช่องเลือกสี
  2. อ่านค่า HEX, RGB และ HSL ที่วางเรียงข้างกัน
  3. คัดลอกรูปแบบที่ไฟล์ของคุณต้องใช้

สิ่งที่ควรรู้

สามรูปแบบสำหรับสีเดียวกัน

HEX สั้นกระชับและใช้ได้ทั่วไปใน CSS ส่วน RGB ระบุชื่อช่องสีตรง ๆ ซึ่งสำคัญเมื่อค่าถูกคำนวณขึ้นแทนที่จะพิมพ์เอง ขณะที่ HSL อธิบายเนื้อสี ความอิ่มตัว และความสว่าง จึงเป็นรูปแบบที่ควรหยิบใช้เมื่ออยากได้สีเดิมแต่อ่อนลงหนึ่งระดับ เพราะคุณแก้ตัวเลขตัวเดียวแทนที่จะเดาสามตัว

คอนทราสต์ไม่ใช่ของประดับ

ตามมาตรฐาน WCAG ตัวหนังสือเนื้อความต้องมีอัตราส่วนอย่างน้อย 4.5:1 เทียบกับพื้นหลัง ส่วนตัวหนังสือขนาดใหญ่ต้องมีอย่างน้อย 3:1 ตัวเลขสองค่าที่แสดงไว้ตรงนี้บอกได้ทันทีว่าสีนี้รองรับตัวหนังสือสีขาว สีดำ หรือไม่รองรับทั้งสองอย่าง ตั้งแต่ก่อนที่งานออกแบบจะส่งถึงมือนักพัฒนา

แหล่งข้อมูล

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

รองรับรูปแบบใดบ้าง

HEX แบบสาม สี่ หก และแปดหลัก จะใส่เครื่องหมาย # หรือไม่ก็ได้ รวมถึง rgb() และ rgba() ที่คั่นด้วยจุลภาคหรือช่องว่าง ค่าอัลฟาจะถูกเก็บไว้และแสดงในค่า HEX

ทำไมบางครั้ง HSL ถึงแสดงสีที่ต่างไปเล็กน้อย

ค่า HSL ถูกปัดเป็นจำนวนเต็มเพื่อให้อ่านง่าย การแปลงไปกลับจึงอาจคลาดเคลื่อนหนึ่งหน่วยในช่องสีใดช่องหนึ่ง ส่วนค่า HEX และ RGB นั้นตรงเป๊ะ

มีข้อมูลถูกส่งไปเซิร์ฟเวอร์ไหม

ไม่มี ทุกอย่างคำนวณอยู่ในหน้านี้ สีประจำแบรนด์จากงานออกแบบที่ยังไม่เปิดตัวจึงอยู่ในเครื่องของคุณ

เครื่องมือที่เกี่ยวข้อง