ตัวแปลงรหัสสี
พิมพ์สีในรูปแบบที่คุ้นเคยแบบใดก็ได้ เช่น #1f5fd6, 1f5fd6, #1f5 หรือ rgb(31, 95, 214) แล้วรูปแบบอื่นทั้งหมดจะปรากฏพร้อมกัน พร้อมค่าคอนทราสต์ที่คุณต้องใช้เพื่อให้ตัวหนังสืออ่านออก
- #1f5fd6 HEX
- rgb(31, 95, 214) RGB
- hsl(219, 75%, 48%) HSL
คอนทราสต์:
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- พิมพ์หรือวางรหัสสี หรือเลือกสีจากช่องเลือกสี
- อ่านค่า HEX, RGB และ HSL ที่วางเรียงข้างกัน
- คัดลอกรูปแบบที่ไฟล์ของคุณต้องใช้
สิ่งที่ควรรู้
สามรูปแบบสำหรับสีเดียวกัน
HEX สั้นกระชับและใช้ได้ทั่วไปใน CSS ส่วน RGB ระบุชื่อช่องสีตรง ๆ ซึ่งสำคัญเมื่อค่าถูกคำนวณขึ้นแทนที่จะพิมพ์เอง ขณะที่ HSL อธิบายเนื้อสี ความอิ่มตัว และความสว่าง จึงเป็นรูปแบบที่ควรหยิบใช้เมื่ออยากได้สีเดิมแต่อ่อนลงหนึ่งระดับ เพราะคุณแก้ตัวเลขตัวเดียวแทนที่จะเดาสามตัว
คอนทราสต์ไม่ใช่ของประดับ
ตามมาตรฐาน WCAG ตัวหนังสือเนื้อความต้องมีอัตราส่วนอย่างน้อย 4.5:1 เทียบกับพื้นหลัง ส่วนตัวหนังสือขนาดใหญ่ต้องมีอย่างน้อย 3:1 ตัวเลขสองค่าที่แสดงไว้ตรงนี้บอกได้ทันทีว่าสีนี้รองรับตัวหนังสือสีขาว สีดำ หรือไม่รองรับทั้งสองอย่าง ตั้งแต่ก่อนที่งานออกแบบจะส่งถึงมือนักพัฒนา
แหล่งข้อมูล
คำถามที่พบบ่อย
รองรับรูปแบบใดบ้าง
HEX แบบสาม สี่ หก และแปดหลัก จะใส่เครื่องหมาย # หรือไม่ก็ได้ รวมถึง rgb() และ rgba() ที่คั่นด้วยจุลภาคหรือช่องว่าง ค่าอัลฟาจะถูกเก็บไว้และแสดงในค่า HEX
ทำไมบางครั้ง HSL ถึงแสดงสีที่ต่างไปเล็กน้อย
ค่า HSL ถูกปัดเป็นจำนวนเต็มเพื่อให้อ่านง่าย การแปลงไปกลับจึงอาจคลาดเคลื่อนหนึ่งหน่วยในช่องสีใดช่องหนึ่ง ส่วนค่า HEX และ RGB นั้นตรงเป๊ะ
มีข้อมูลถูกส่งไปเซิร์ฟเวอร์ไหม
ไม่มี ทุกอย่างคำนวณอยู่ในหน้านี้ สีประจำแบรนด์จากงานออกแบบที่ยังไม่เปิดตัวจึงอยู่ในเครื่องของคุณ
เครื่องมือที่เกี่ยวข้อง
- HEX เป็น RGB วางรหัส HEX ลงไปแล้วอ่านค่าช่องสี RGB ได้เลย #1f5fd6 จะกลายเป็น rgb(31, 95, 214) และถ้ารหัสนั้น…
- แปลง RGB เป็น HEX วางค่า rgb(31, 95, 214) ลงไป จะคั่นด้วยจุลภาคหรือเว้นวรรคก็ได้ แล้วรับค่า #1f5fd6 ที่พร้อมใช้ใน…
- เครื่องสร้างรหัสผ่าน รหัสผ่านใหม่ถูกสร้างทันทีที่หน้านี้โหลดเสร็จ โดยใช้ตัวสร้างเลขสุ่มเชิงรหัสลับของเบราว์เซอร์คุณ…
- เครื่องมือสร้าง QR code พิมพ์ลิงก์หรือข้อความใด ๆ แล้วโค้ดจะปรากฏขึ้นทันทีระหว่างที่พิมพ์ ดาวน์โหลดเป็น PNG สำหรับหน้าจ…
- ตัวสร้างพาเลตสี เลือกสีตั้งต้นหนึ่งสี แล้วเครื่องมือจะคำนวณสีที่เหลือให้ตามวงล้อสี คลิกที่ช่องสีใดก็ได้เพื่อคัด…
- สร้างไล่สี CSS ลากแถบเลื่อนแล้วดูแผงด้านบนเปลี่ยนตาม พอได้หน้าตาที่ต้องการ ก็คัดลอกบรรทัดนั้นไปวางในสไตล์ชีตขอ…
- ตัวสร้างเงา CSS เลื่อนแถบปรับแล้วตัวอย่างจะเปลี่ยนตาม ซ้อนหลายชั้นได้เมื่อเงาชั้นเดียวไม่พอ นั่นคือวิธีสร้างควา…
- ตัวเลือกสี เลื่อนไปบนช่องสี่เหลี่ยมเพื่อเลือกสี หรือจะหยิบสีที่มีอยู่แล้วก็ได้ ทั้งจากรูปภาพด้วยหลอดดูดสี…