Entering AttentionFlow

🎨

ตัวเลือกสี HTML

ตัวเลือกสี HTML ขั้นสูงที่รองรับ HSL, RGB และ HEX

ตัวเลือกสีดีไซน์เนอร์ (Designer Color Picker) คืออะไร?

เครื่องมือระดับมืออาชีพสำหรับนักออกแบบเว็บและกราฟิก ช่วยให้คุณค้นหาและเลือกโทนสีที่สมบูรณ์แบบได้ในระดับพิกเซล ระบบรองรับการแปลงรหัสสีสากล (HEX, RGB, HSL) พร้อมฟีเจอร์การวิเคราะห์ 'ความคมชัดของข้อความ' (Contrast Ratio) เพื่อให้มั่นใจว่างานออกแบบของคุณจะอ่านง่ายและได้มาตรฐานการเข้าถึง (Accessibility)

Benefits

  • มีเมทริกซ์สีมากกว่า 400 เฉดสีให้เลือกใช้งานทันที พร้อมระบบคัดลอกรหัสสีด่วน (Quick Copy)
  • วิเคราะห์ความคมชัดระหว่างสีข้อความและสีพื้นหลัง ช่วยให้สีดีไซน์เนอร์ของคุณถูกใช้งานจริง
  • รองรับการป้อนค่าสีและแปลงรูปแบบกลับไปกลับมาได้อย่างลื่นไหลโดยไม่เสียความแม่นยำ
  • แสดงสีที่เกี่ยวข้องและสีที่แนะนำ (Contrast Insights) เพื่อช่วยให้คุณสร้างจานสีที่กลมกลืนได้ง่ายขึ้น

วิธีใช้งาน

1. ใช้แถบเลื่อนและเมทริกซ์สีเพื่อเลือกเฉดสีที่ต้องการ หรือป้อนรหัสสีลงในช่องค้นหา
2. ตรวจสอบส่วน 'ข้อมูลเชิงลึกด้านความคมชัด' เพื่อดูว่าสีที่คุณเลือกเหมาะกับข้อความสีขาวหรือดำ
3. คลิกที่รหัสสี (HEX/RGB/HSL) ในส่วน 'การแปลงสี' เพื่อคัดลอกไปใช้งานในโปรแกรมออกแบบของคุณ
4. ดูจานสีแนะนำที่ส่วนด้านล่างเพื่อหาแรงบันดาลใจในการจับคู่สีเพิ่มเติม
พาเลตภาพ
217°
100%
เมทริกซ์สี (400 สี)
เลื่อนซ้ายหรือขวาเพื่อดูสีทั้งหมด
การแปลงสี
คัดลอกด่วน
รูปแบบ
สีแบรนด์
Google
Netflix
Yahoo
iOS
Android
Facebook
Twitter
ข้อมูลเชิงลึกด้านความคมชัด

คำแนะนำโทนสีที่ไม่ซ้ำกัน 5 อันดับแรกสำหรับสีปัจจุบัน:

#000000Ratio: 5.7:1
#1E293BRatio: 4.0:1
#FFFFFFRatio: 3.7:1
#F8FAFCRatio: 3.5:1
#A3E635Ratio: 2.4:1
ข้อความตัวอย่าง over #3B82F5 (5.7:1)
ข้อความตัวอย่าง over #3B82F5 (4.0:1)
ข้อความตัวอย่าง over #3B82F5 (3.7:1)
ข้อความตัวอย่าง over #3B82F5 (3.5:1)
ข้อความตัวอย่าง over #3B82F5 (2.4:1)
ตัวแปลงรูปแบบ

ค่าสีมีไว้เพื่ออ้างอิงเท่านั้น การแสดงผลจริงอาจแตกต่างกันไปตามการปรับเทียบหน้าจอ

ดูเครื่องมือเพิ่มเติม