Utils365

เครื่องมือแปลงรหัสสี

วางสีในรูปแบบ CSS ใดก็ได้ แล้วรับทุกรูปแบบอื่นพร้อมค่าคอนทราสต์

วาง HEX, rgb(), hsl(), hwb() หรือชื่อสี CSS หรือเลือกสี

#3a5bd9

เฉดอ่อนและเฉดเข้ม

ค่า

HEX
#3a5bd9
RGB
rgb(58, 91, 217)
HSL
hsl(227.5, 67.7%, 53.9%)
HSV / HSB
hsv(227.5, 73.3%, 85.1%)
HWB
hwb(227.5 22.7% 14.9%)
CMYK
cmyk(73%, 58%, 0%, 15%)
เป็นค่าประมาณ สีที่พิมพ์ออกมาขึ้นอยู่กับหมึกและกระดาษ จึงควรสอบถามค่าที่แน่นอนจากโรงพิมพ์
OKLCH
oklch(52.35% 0.1965 267.75)
ชื่อ CSS ที่ใกล้เคียงที่สุด
royalblue

คอนทราสต์ (WCAG)

ข้อความสีนี้บนพื้นหลังแต่ละแบบ ข้อความปกติต้องได้ 4.5:1 สำหรับ AA และ 7:1 สำหรับ AAA ส่วนข้อความขนาดใหญ่ (18pt หรือตัวหนา 14pt) ต้องได้ 3:1 และ 4.5:1

บนสีขาว

ข้อความขนาดใหญ่

เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน

5.71:1

  • AA ปกติ ผ่าน
  • AAA ปกติ ไม่ผ่าน
  • AA ขนาดใหญ่ ผ่าน
  • AAA ขนาดใหญ่ ผ่าน

บนสีดำ

ข้อความขนาดใหญ่

เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน

3.68:1

  • AA ปกติ ไม่ผ่าน
  • AAA ปกติ ไม่ผ่าน
  • AA ขนาดใหญ่ ผ่าน
  • AAA ขนาดใหญ่ ไม่ผ่าน

บน #ffffff

ข้อความขนาดใหญ่

เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน

5.71:1

  • AA ปกติ ผ่าน
  • AAA ปกติ ไม่ผ่าน
  • AA ขนาดใหญ่ ผ่าน
  • AAA ขนาดใหญ่ ผ่าน

ถัดไป: ทำพื้นหลังโปร่งใส · สร้างแผนภูมิ

แจ้งปัญหาเกี่ยวกับเครื่องมือนี้

วิธีใช้งาน แปลงรหัสสี

  1. ป้อนสี

    วางรหัส HEX, rgb(), hsl(), hwb() หรือชื่ออย่าง tomato หรือเลือกด้วยตัวเลือกสี

  2. คัดลอกรูปแบบที่ต้องการ

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

  3. ตรวจคอนทราสต์

    ดูอัตราส่วนคอนทราสต์ WCAG บนสีขาว สีดำ และพื้นหลังที่คุณเลือก พร้อมผล AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่

ทำไมต้องใช้ Utils365

  • อ่านสี CSS ได้ทุกแบบ

    HEX 3, 4, 6 และ 8 หลัก, rgb() และ hsl() ทั้งไวยากรณ์แบบจุลภาคเดิมและแบบเว้นวรรคใหม่, hwb(), เปอร์เซ็นต์, หน่วยของ hue และชื่อสีทั้ง 148 ชื่อ

  • รูปแบบสมัยใหม่ก็มี

    รับ OKLCH สำหรับดีไซน์ซิสเต็มและ CSS แบบ wide-gamut, HWB และ HSV สำหรับตัวเลือกสี และ HEX พร้อมอัลฟาสำหรับสีโปร่งแสง

  • ตรวจการเข้าถึงได้ในตัว

    อัตราส่วนคอนทราสต์เป็นไปตาม WCAG 2 อย่างเคร่งครัด และไม่ปัดขึ้นให้ผ่าน 4.49:1 จึงไม่ผ่านเป็น 4.5:1

  • เฉดอ่อนและเฉดเข้ม

    มีสีที่อ่อนลง 5 ระดับและเข้มขึ้น 5 ระดับอยู่ใต้ตัวอย่างสี คลิกเพื่อใช้เป็นสีปัจจุบัน

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

HEX กับ RGB ต่างกันอย่างไร

ตัวสีไม่ต่างกัน ทั้งคู่ระบุแดง เขียว และน้ำเงินตั้งแต่ 0 ถึง 255 HEX เขียนแต่ละค่าเป็นเลขฐานสิบหก 2 หลัก rgb(58, 91, 217) จึงเป็น #3a5bd9 HEX สั้นกว่า ส่วน rgb() อ่านและปรับด้วยมือได้ง่ายกว่า

HSL คืออะไร

Hue, Saturation และ Lightness โดย Hue คือตำแหน่งบนวงล้อสีเป็นองศา (0 คือแดง 120 คือเขียว 240 คือน้ำเงิน) Saturation คือความสด และ Lightness ไล่จากดำที่ 0% ถึงขาวที่ 100% ทำให้เขียนสีเดิมในเวอร์ชันที่อ่อนลง เข้มขึ้น หรือหม่นลงได้ง่าย

ทำไม CMYK ไม่ตรงกับสีที่พิมพ์ออกมา

หน้าจอผสมแสง ส่วนเครื่องพิมพ์ผสมหมึก และผลลัพธ์ขึ้นอยู่กับหมึก กระดาษ และโปรไฟล์ของเครื่องพิมพ์ CMYK ที่แสดงใช้สูตรมาตรฐานแบบง่าย จึงควรใช้เป็นจุดเริ่มต้นและสอบถามค่าที่แน่นอนจากโรงพิมพ์

อัตราส่วนคอนทราสต์ WCAG คืออะไร

ค่าที่วัดว่าสองสีต่างกันในด้านความสว่างมากแค่ไหน ตั้งแต่ 1:1 (เหมือนกัน) ถึง 21:1 (ดำบนขาว) WCAG AA กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA กำหนด 7:1 และ 4.5:1

OKLCH คืออะไร

วิธีเขียนสีใน CSS แบบใหม่ด้วยความสว่าง โครมา และ hue โดยอิงจากการมองเห็นสีของคน การเปลี่ยนความสว่างยังคงให้ hue ดูเหมือนเดิม จึงเป็นที่นิยมในดีไซน์ซิสเต็มและสเกลสี

ชื่อสีทำงานอย่างไร

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

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

ทำพื้นหลังโปร่งใสเปลี่ยนสีหนึ่งสีให้โปร่งใสเพิ่มกรอบรูปใส่กรอบให้ภาพด้วยสีใดก็ได้สร้าง QR codeสร้าง QR code แบบกำหนดเอง ไม่มีวันหมดอายุสร้างแผนภูมิแผนภูมิแท่ง เส้น และวงกลมเป็นรูปภาพ