เครื่องสร้างเฉดสี
สร้างพาเลตสีแบบครบถ้วนพร้อมโทน เฉดและคะแนนคอนทราสต์ WCAG
เครื่องสร้างเฉดสี
ตัวอย่างการใช้งาน
โทนอ่อน (50-200) เหมาะที่สุดสำหรับพื้นหลังและไฮไลท์แบบละเอียด
เฉดกลาง (400-600) เหมาะสำหรับปุ่ม ลิงก์ และองค์ประกอบหลัก
เฉดเข้ม (700-900) เหมาะสำหรับหัวข้อและข้อความคอนทราสต์สูง
ตรวจสอบคอนทราสต์ WCAG เสมอ — AA ต้องการ 4.5:1 สำหรับข้อความปกติ
คอนทราสต์
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA ใหญ่: 3:1 (Large text)
- AAA: 7:1 (Normal text)
คุณสมบัติ
พาเลต 50-900 เต็มรูปแบบ
สร้างพาเลตสไตล์ Tailwind ที่สมบูรณ์จากสีพื้นฐานใดๆ
คอนทราสต์ WCAG
ทุกเฉดแสดงคะแนนคอนทราสต์เทียบกับพื้นหลังสีขาวและดำ
รูปแบบการส่งออกหลายแบบ
คัดลอกเป็นตัวแปร CSS, SCSS, การกำหนดค่า Tailwind หรือ JSON
ส่วนตัวและออฟไลน์
ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์
วิธีใช้งาน
เลือกสีพื้นฐาน
เลือกสีโดยใช้ตัวเลือกหรือป้อนค่า HEX, RGB หรือ HSL
ตรวจสอบพาเลต
ดูเฉดที่สร้างขึ้นพร้อมตัวชี้วัดคอนทราสต์ WCAG เพื่อการเข้าถึง
ส่งออกหรือคัดลอก
คัดลอกสีเดี่ยวหรือส่งออกพาเลตทั้งหมดเป็น CSS, SCSS, Tailwind หรือ JSON
คำถามที่พบบ่อย
เครื่องสร้างเฉดสีคืออะไร?
เครื่องสร้างเฉดสีสร้างช่วงโทนและเฉดที่ครบถ้วนจากสีพื้นฐานเพียงสีเดียว แทนที่จะเดาว่าจะใช้รูปแบบที่อ่อนหรือเข้มกว่า คุณจะได้พาเลตที่สอดคล้องซึ่งทำงานผ่านปุ่ม พื้นหลัง เส้นขอบ และข้อความ เครื่องมือนี้สร้างสเกล 10 ระดับจาก 50 (สว่างที่สุด) ถึง 900 (เข้มที่สุด) สอดคล้องกับระบบสี Tailwind CSS ที่ได้รับความนิยม
วิธีการทำงาน
เครื่องสร้างจะแปลงสีพื้นฐานของคุณเป็น HSL และปรับค่าความสว่างเพื่อสร้าง 10 ระดับที่กระจายอย่างสม่ำเสมอ แต่ละเฉดจะถูกประเมินเทียบกับพื้นหลังสีขาวและดำโดยใช้สูตรคอนทราสต์ WCAG 2.1 ดังนั้นคุณจะทราบทันทีว่าสีใดเข้าถึงได้สำหรับข้อความ ทุกอย่างทำงานในเบราว์เซอร์ของคุณโดยไม่มีการสื่อสารกับเซิร์ฟเวอร์
กรณีการใช้งานทั่วไป
นักออกแบบใช้เครื่องสร้างเฉดเพื่อสร้างพาเลตแบรนด์ สร้างโทเค็นการออกแบบ และรักษาความสอดคล้องทางสายตาในผลิตภัณฑ์ นักพัฒนาชอบใช้สำหรับสร้างรายการการกำหนดค่า Tailwind หรือคุณสมบัติ CSS แบบกำหนดเอง นอกจากนี้ยังจำเป็นสำหรับการตรวจสอบการเข้าถึง ช่วยให้คุณเลือกคู่ข้อความและพื้นหลังที่ตรงตามข้อกำหนด WCAG AA หรือ AAA
ความเป็นส่วนตัวและความปลอดภัย
เครื่องสร้างเฉดสีนี้เป็น 100% ฝั่งไคลเอนต์ การคำนวณสีทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ JavaScript ไม่มีสี พาเลต หรือการส่งออกที่ส่งไปยังเซิร์ฟเวอร์ใดๆ ไม่มีคุกกี้ที่ติดตามตัวเลือกของคุณ และไม่มีสิ่งใดถูกเก็บไว้เกินเซสชันปัจจุบันของคุณ ปลอดภัยสำหรับการทำงานแบรนด์ที่เป็นความลับและระบบการออกแบบภายใน
ทฤษฎีสีสำหรับเว็บดีไซน์ - เฉดสีและ WCAG
เรียนรู้ทฤษฎีสี เฉดสี มาตรฐาน WCAG และวิธีสร้างพาเลตระบบดีไซน์