ให้รหัสสีอะไรบ้าง

HEX, RGB, HSL, HSV, CMYK และ OKLCH ของสีเดียวกัน พร้อมคัดลอก

เลือกสีจากหน้าจอของฉันได้ไหม

ได้ ด้วย เลือกจากหน้าจอ ในเบราว์เซอร์ที่ใช้ Chromium เช่น Chrome และ Edge หากเบราว์เซอร์ของคุณไม่รองรับ ปุ่มนี้จะถูกซ่อน

ตรวจไหมว่าข้อความอ่านออกบนสีนั้น

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

ฟรีจริงหรือ

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

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🎨

เลือกสีและสร้างชุดสี ฟรี

เลือกสี แปลง HEX/RGB/HSL และสร้างชุดสีที่กลมกลืน

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

ตัวเลือกสี

HEX

HSV

h217°

s76%

v96%

แสดงเท่านั้น

RGB

HSL

รูปแบบอื่นๆ

อัลฟา100%

HEX8#3b82f6ff

RGBrgb(59 130 246)

HWBhwb(217 23% 4%)

CMYKcmyk(76%, 47%, 0%, 4%)

OKLCHoklch(62.3% 0.188 259.8)

SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)

Android0xFF3B82F6

FlutterColor(0xFF3B82F6)

คอนทราสต์ WCAG

สีที่มีชื่อใกล้ที่สุด: dodgerblue · ตัวอักษรสีดำอ่านง่ายกว่าตรงนี้ (5.71:1)

ข้อความบนสีขาว3.68:1AA (ตัวอักษรใหญ่)

ข้อความบนสีดำ5.71:1AA

ข้อความบน #ffffff3.68:1AA (ตัวอักษรใหญ่)

เปรียบเทียบกับสีอื่น

เฉดสีเข้มและอ่อน (50–950)

ชื่อ

ชุดสี

เสริมกัน

#3b82f6

#f6af3c

ไตรแอดิก

#3b82f6

#f63c83

#83f63c

คล้ายคลึง

#3ce0f6

#3b82f6

#523cf6

โมโนโครเมติก

#073c92

#0a5adb

#3b82f6

#85b2f9

#cee0fd

การใช้งานทั่วไป

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

วิธีการทำงาน

ทุกอย่างทำงานในเบราว์เซอร์โดยตรงด้วยคณิตศาสตร์การแปลงที่เขียนขึ้นเอง — ไม่มีไลบรารีสี ไม่มีการเรียกเซิร์ฟเวอร์ไปกลับ คุณเลือกสีผ่านอินพุตสีเนทีฟของเบราว์เซอร์หรือ EyeDropper API แล้วเครื่องมือจะแปลงเป็นหกรูปแบบทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG และสร้างชุดสีกลมกลืน

1
รับสีผ่าน API เนทีฟ
คุณเลือกสีผ่านวิดเจ็ต <input type="color"> ในตัวของเบราว์เซอร์ หรือ — ในเบราว์เซอร์ที่ใช้ Chromium — EyeDropper API ให้คุณดูดสีพิกเซลใดก็ได้บนหน้าจอ ทั้งสองทางคืนค่าสตริง hex ซึ่งเป็นแหล่งข้อมูลหลักเพียงแหล่งเดียว
2
การแปลงรูปแบบที่เขียนขึ้นเอง
เครื่องมือแปลงค่า hex เป็น RGB, HSL, HSV, CMYK และ OKLCH ด้วยฟังก์ชันคณิตศาสตร์ของตัวเอง (ไม่มีไลบรารีภายนอก) การแปลง OKLCH ทำช่อง sRGB ให้เป็นเชิงเส้น ใช้เมทริกซ์รากที่สามของ OKLab แล้วหาค่า chroma และมุมเฉดสี — ตรงกับผลลัพธ์ของ CSS Color Level 4 สมัยใหม่
3
การคำนวณอัตราส่วนคอนทราสต์ WCAG
ความสว่างสัมพัทธ์คำนวณจากช่อง RGB เชิงเส้นด้วยสูตร WCAG 2.x จากนั้นเครื่องมือคำนวณอัตราส่วนคอนทราสต์เทียบกับสีขาวล้วนและสีดำล้วน และติดป้าย AA-large, AA, AAA หรือ Fail ตามเกณฑ์ WCAG (3:1, 4.5:1, 7:1)
4
การสร้างชุดสีกลมกลืนและบันทึกในเครื่อง
ตัวอย่างสีแบบสีเสริมกัน ไตรแอดิก สีคล้ายคลึง และสีเดียว ได้จากการหมุนหรือปรับค่าเฉดสีและความสว่าง HSL ทางคณิตศาสตร์ ชุดสีที่บันทึกจะถูกเขียนลง localStorage ในเบราว์เซอร์ — ไม่มีสิ่งใดออกจากอุปกรณ์