เครื่องมือสร้าง Gradient CSS
สร้างชุดสีที่ไล่ระดับได้ตามต้องการ ดูตัวอย่างทุกขั้นสีที่สร้าง และคัดลอกลำดับ HEX ที่แน่น…
เริ่มใช้งาน
เครื่องมือนี้ช่วยอะไรคุณได้บ้าง
สร้างชุดสีที่ไล่ระดับได้ตามต้องการ ดูตัวอย่างทุกขั้นสีที่สร้าง และคัดลอกลำดับ HEX ที่แน่นอนสำหรับ CSS แผนภูมิ หรือดีไซน์โทเคน
ตัวอย่างการใช้งาน
ข้อมูลนำเข้า
#2563EB → #EC4899, 5 สี
ผลลัพธ์
#2563EB, #584EC0, #8A39A2, #BB2585, #EC4899
ผลลัพธ์ถูกสร้างอย่างไร
แต่ละสีขั้นกลางถูกสร้างโดยการประมาณค่าเชิงเส้นของช่องสีแดง เขียว และน้ำเงิน จุดปลายทั้งสองถูกรักษาไว้ และสีที่เหลือถูกวางในช่วงห่างเท่ากัน
เวิร์กโฟลว์ที่มีประโยชน์
- สร้างสีแผนภูมิแบบเรียงลำดับหรือชุดสีสำหรับฮีตแมป
- สร้างสีสำหรับสถานะ hover และสถานะอื่นๆ ระหว่างดีไซน์โทเคนสองค่า
- สร้างพาเล็ตขนาดกะทัดรัดสำหรับพื้นหลังแบบไล่ระดับ
ข้อจำกัดที่สำคัญ
- การประมาณค่า RGB อาจทำให้สีดูเข้มหรือหม่นระหว่างสีคู่ตรงข้ามบางคู่
- พาเล็ตที่ดูเนียนไม่ได้หมายความว่าจะเข้าถึงได้สำหรับผู้ตาบอดสีโดยอัตโนมัติ
- เครื่องมือนี้สร้างสี RGB ที่มีระยะห่างเท่ากัน ไม่ได้อ้างว่ามีความสม่ำเสมอทางการรับรู้
คำถามที่พบบ่อย
ทำไมจุดกึ่งกลางถึงดูเทาหรือหม่น?
ช่อง RGB ที่ตรงข้ามกันอาจเฉลี่ยไปทางสีกลาง การเพิ่มสีกลางที่เหมาะสมในเวิร์กโฟลว์ CSS แบบหลายจุดหยุดจะช่วยได้เมื่อต้องการความสดใส
ควรสร้างกี่สี?
ใช้จำนวนน้อยที่สุดที่ตรงกับสถานะหรือช่วงข้อมูลที่คุณต้องการ พื้นหลังแบบต่อเนื่องสามารถใช้ขั้นได้มากขึ้น
การประมวลผลเกิดขึ้นภายในเบราว์เซอร์ของคุณ