ตัวแปลงรหัสสี
แปลงสีระหว่างรหัส HEX, RGB, HSL และ OKLCH ได้ทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG ของสองสีเพื่อตรวจการเข้าถึง ใช้ฟรีในเบราว์เซอร์
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)ปรับ HSL
อัตราส่วนคอนทราสต์ (WCAG)
สีเปรียบเทียบ:
샘플 텍스트
อัตราส่วนคอนทราสต์: 3.68:1
WCAG: AA Large
ฝัง
อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี
ตัวแปลงรหัสสี คืออะไร?
แปลงสีระหว่างรหัส HEX, RGB, HSL และ OKLCH ได้ทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG ของสองสีเพื่อตรวจการเข้าถึง ใช้ฟรีในเบราว์เซอร์
วิธีใช้งาน
- 1ป้อนสี— ใช้ตัวเลือกสีหรือป้อนข้อความ รองรับรูปแบบ HEX, rgb(), hsl()
- 2ดูรูปแบบ— รูปแบบ HEX, RGB, HSL และ OKLCH แสดงพร้อมกัน
- 3คัดลอกค่า— ใช้ปุ่มคัดลอกของแต่ละรูปแบบเพื่อคัดลอกค่า CSS
- 4ตรวจสอบอัตราส่วนคอนทราสต์— ตั้งค่าสีเปรียบเทียบเพื่อตรวจสอบอัตราส่วนคอนทราสต์ WCAG
เครื่องมือที่เกี่ยวข้อง
ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์
ตัวสร้าง CSS Box Shadowเครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที
อ้างอิงหน่วย CSSคู่มืออ้างอิงหน่วย CSS px, em, rem, %, vw, vh, vmin, vmax และ ch จัดตามหมวด พร้อมอธิบายว่าควรใช้หน่วยสัมบูรณ์และสัมพัทธ์เมื่อใด ใช้ฟรี
ตัวแปลง PX-REMแปลงหน่วย px กับ rem ของ CSS ได้สองทางตามขนาดฟอนต์รากที่กำหนดเอง รองรับทศนิยม พร้อมตารางอ้างอิงและสไนปเพ็ต CSS ให้คัดลอก ใช้ฟรี
คำถามที่พบบ่อย
OKLCH คือการแสดงรูปทรงกระบอกของปริภูมิสี Oklab ซึ่งเป็นปริภูมิสีที่สม่ำเสมอที่สุดในการรับรู้ รองรับใน CSS Color Level 4
วัดความแตกต่างของความสว่างระหว่างข้อความและสีพื้นหลัง AA ต้องการอย่างน้อย 4.5:1 AAA ต้องการ 7:1
ปัจจุบันรองรับเฉพาะสีทึบ (RGB, HEX 6 หลัก) RGBA และ HSLA จะเพิ่มในอนาคต
ได้ คุณสามารถวางผลลัพธ์ของแต่ละรูปแบบลงใน CSS ได้โดยตรง
ไม่ การแปลงสีทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ