เครื่องมือสร้างพาเลตไล่สี RGB
สร้างสีไล่ระดับ RGB 2–100 สี ดูตัวอย่างและคัดลอกค่า HEX โดยไม่ส่งออก CSS
เริ่มใช้งาน
เครื่องมือสร้างพาเลตไล่สี RGB
สร้างชุดสีที่ไล่ระดับได้ตามต้องการ ดูตัวอย่างทุกขั้นสีที่สร้าง และคัดลอกลำดับ HEX ที่แน่นอนสำหรับ CSS แผนภูมิ หรือดีไซน์โทเคน
เครื่องมือนี้ช่วยอะไรคุณได้บ้าง
สร้างชุดสีที่ไล่ระดับได้ตามต้องการ ดูตัวอย่างทุกขั้นสีที่สร้าง และคัดลอกลำดับ HEX ที่แน่นอนสำหรับ CSS แผนภูมิ หรือดีไซน์โทเคน
ตัวอย่างการใช้งาน
#2563EB → #EC4899, 5 สี
#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899
ผลลัพธ์ถูกสร้างอย่างไร
แต่ละสีขั้นกลางถูกสร้างโดยการประมาณค่าเชิงเส้นของช่องสีแดง เขียว และน้ำเงิน จุดปลายทั้งสองถูกรักษาไว้ และสีที่เหลือถูกวางในช่วงห่างเท่ากัน
เวิร์กโฟลว์ที่มีประโยชน์
- สร้างสีแผนภูมิแบบเรียงลำดับหรือชุดสีสำหรับฮีตแมป
- สร้างสีสำหรับสถานะ hover และสถานะอื่นๆ ระหว่างดีไซน์โทเคนสองค่า
- สร้างพาเล็ตขนาดกะทัดรัดสำหรับพื้นหลังแบบไล่ระดับ
ข้อจำกัดที่สำคัญ
- การประมาณค่า RGB อาจทำให้สีดูเข้มหรือหม่นระหว่างสีคู่ตรงข้ามบางคู่
- พาเล็ตที่ดูเนียนไม่ได้หมายความว่าจะเข้าถึงได้สำหรับผู้ตาบอดสีโดยอัตโนมัติ
- เครื่องมือนี้สร้างสี RGB ที่มีระยะห่างเท่ากัน ไม่ได้อ้างว่ามีความสม่ำเสมอทางการรับรู้
คำถามที่พบบ่อย
ทำไมจุดกึ่งกลางถึงดูเทาหรือหม่น?
ช่อง RGB ที่ตรงข้ามกันอาจเฉลี่ยไปทางสีกลาง การเพิ่มสีกลางที่เหมาะสมในเวิร์กโฟลว์ CSS แบบหลายจุดหยุดจะช่วยได้เมื่อต้องการความสดใส
ควรสร้างกี่สี?
ใช้จำนวนน้อยที่สุดที่ตรงกับสถานะหรือช่วงข้อมูลที่คุณต้องการ พื้นหลังแบบต่อเนื่องสามารถใช้ขั้นได้มากขึ้น
จำนวนสีรวมสีปลายทั้งสองและมีค่าเริ่มต้น 10 ตัดส่วนทศนิยมแล้วจำกัดไว้ที่ 2–100 แก้ไขสีปลายได้ด้วย HEX, RGB, HSV และ HSL แต่การคำนวณใช้ช่อง RGB ที่เข้ารหัสเสมอและปัดเป็นจำนวนเต็ม ตัวอย่างไล่สีมีทิศทางคงที่ 90° ไม่มีจุดสีเพิ่มเติม ค่าอัลฟา หรือการเลือกปริภูมิสี ผลลัพธ์เป็นค่า HEX หนึ่งค่าต่อบรรทัด ไม่ใช่โค้ด CSS หรือภาพให้ดาวน์โหลด
การประมวลผลเกิดขึ้นภายในเบราว์เซอร์ของคุณ