หมวดหมู่
ดูเครื่องมือทั้งหมด
🛠️ เครื่องมือในเบราว์เซอร์

คลังไล่ระดับสี (Color Gradient) ยอดนิยม

สำรวจคอลเลกชันไล่ระดับสีสวยงามกว่า 100 แบบที่คัดสรรมาอย่างดีของเรา คลิกที่ตัวอย่างไล่ระดับสีเพื่อดูสีแต่ละสี คัดลอกโค้ด CSS ได้ทันที และค้นหาการผสมผสานสีไล่ระดับที่สมบูรณ์แบบสำหรับการออกแบบของคุณ

กำลังโหลดเครื่องมือ...

เครื่องมือที่เกี่ยวข้อง

สี Tools

View All →

คลังสีที่นิยม

เรียกดูคลังสีที่ครอบคลุมของเราที่มีชื่อสีนิยมกว่า 500 สี จัดเรียงเป็น 20 หมวดหมู่ ค้นหาสีตามชื่อหรือรหัส HEX คัดลอกค่าได้ทันที และสำรวจกลุ่มสีตั้งแต่พื้นฐานจนถึงสไตล์วินเทจ

คลังสีพาลเล็ตยอดนิยม

เลือกดูชุดสีพาลเล็ตกว่า 200 ชุดที่คัดสรรมาอย่างมืออาชีพและจัดหมวดหมู่ไว้อย่างเป็นระเบียบ คัดลอกสีได้ทันที, บันทึกชุดสีโปรด, ส่งออกเป็น CSS, JSON, PNG หรือ PDF เหมาะสำหรับนักออกแบบและนักพัฒนา

เครื่องมือตรวจสอบความต่างสี

ตรวจสอบอัตราส่วนความต่างสีเพื่อให้สอดคล้องกับการเข้าถึงเว็บไซต์ ทดสอบการผสมผสานสีข้อความและพื้นหลังตามหลักเกณฑ์ WCAG พร้อมการแสดงตัวอย่างแบบเรียลไทม์ การให้คะแนนการเข้าถึง และคำแนะนำในการปรับปรุง

เครื่องมือแปลงสี HSV เป็น Pantone ฟรี

แปลงสี HSV (Hue, Saturation, Value) ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดได้ทันที ค้นหาสี Pantone ที่สมบูรณ์แบบด้วยเครื่องมือจับคู่สีที่ครอบคลุมของเรา ซึ่งมีการเปรียบเทียบด้วยภาพและวิทยาศาสตร์สีที่แม่นยำ

เครื่องมือแปลงสี RGB เป็น Pantone ฟรี

แปลงสี RGB ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดด้วยอัลกอริทึมจับคู่สีขั้นสูงของเรา เลือกดูสี Pantone ที่คัดสรรมาอย่างดี เปรียบเทียบความแตกต่างของสี และรับรหัสสีที่แม่นยำสำหรับโครงการออกแบบของคุณ

เครื่องมือเลือกสีจากรูปภาพออนไลน์

ดึงสีจากรูปภาพใดๆ ทางออนไลน์ได้ฟรี อัปโหลดรูปภาพ คลิกเพื่อเลือกสี และรับค่า HEX, RGB, HSL และ CMYK สร้างและส่งออกจานสีได้

View 8 more tools

วิธีการใช้งานคลังไล่ระดับสี

1

เรียกดูคอลเลกชันไล่ระดับสี

เลื่อนดูตารางตัวอย่างไล่ระดับสีเพื่อสำรวจการผสมผสานสีและสไตล์ต่างๆ ไล่ระดับสีแต่ละแบบจะแสดงชื่อและโค้ดสีของตัวเอง

2

ดูสีแต่ละสี

คลิกที่ครึ่งซ้ายของไล่ระดับสีเพื่อดูสีเริ่มต้น หรือคลิกครึ่งขวาเพื่อดูสีสิ้นสุด โค้ด HEX จะแสดงบนตัวอย่างสีเป็นเวลา 2 วินาที

3

คัดลอก CSS ไล่ระดับสี

คลิกปุ่ม 'คลิกเพื่อคัดลอกไล่ระดับสี' ด้านล่างไล่ระดับสีใดๆ เพื่อคัดลอกคุณสมบัติพื้นหลัง CSS ทั้งหมดไปยังคลิปบอร์ดของคุณ

4

นำไปใช้ในโปรเจกต์ของคุณ

วางโค้ด CSS ที่คัดลอกไว้ใน stylesheet หรือ inline styles ของคุณ ไล่ระดับสีพร้อมใช้งานในรูปแบบ linear-gradient

คุณสมบัติหลัก

ไล่ระดับสีกว่า 100 แบบที่คัดสรรมา

เข้าถึงคอลเลกชันการผสมผสานสีไล่ระดับที่สวยงามกว่า 100 แบบที่คัดสรรมาอย่างดี จัดเรียงตามสไตล์และธีมสีเพื่อให้ง่ายต่อการเรียกดู

ดูตัวอย่างสีแบบโต้ตอบ

คลิกที่ครึ่งซ้ายหรือขวาของตัวอย่างไล่ระดับสีใดๆ เพื่อดูสีเริ่มต้นและสีสิ้นสุดแต่ละสี พร้อมแสดงโค้ด HEX ของสีนั้นๆ

คัดลอก CSS เพียงคลิกเดียว

คัดลอกโค้ด CSS linear-gradient ที่พร้อมใช้งานไปยังคลิปบอร์ดของคุณได้ทันทีด้วยการคลิกปุ่มคัดลอกเพียงครั้งเดียว

ตารางไล่ระดับสีที่ดูง่าย

เรียกดูไล่ระดับสีในรูปแบบตารางที่สะอาดตาและทันสมัย พร้อมแสดงชื่อไล่ระดับสีและโค้ดสีอย่างชัดเจนเพื่อการอ้างอิงที่รวดเร็ว

ไล่ระดับสี (Color Gradients) คืออะไร?

ไล่ระดับสี (Color Gradients) คือการเปลี่ยนผ่านที่ราบรื่นระหว่างสองสีหรือมากกว่านั้น ซึ่งสร้างการผสมผสานที่ดึงดูดสายตา ในการออกแบบเว็บ CSS linear gradients ช่วยให้คุณสร้างการเปลี่ยนผ่านของสีเหล่านี้ที่ไหลไปในทิศทางที่กำหนด คลังของเรามีการผสมผสานไล่ระดับสีที่คัดสรรมาอย่างมืออาชีพซึ่งเข้ากันได้ดี ช่วยคุณประหยัดเวลาในการค้นหาการเปลี่ยนผ่านของสีที่กลมกลืนสำหรับพื้นหลัง ปุ่ม การ์ด และองค์ประกอบการออกแบบอื่นๆ

ทำไมต้องใช้คลังไล่ระดับสีของเรา?

1

คัดสรรโดยผู้เชี่ยวชาญ

ไล่ระดับสีทุกแบบในคอลเลกชันของเราได้รับการคัดเลือกมาอย่างพิถีพิถันเพื่อความสวยงามและความหลากหลายในการออกแบบ เพื่อให้มั่นใจได้ถึงการผสมผสานสีที่มีคุณภาพสูง

2

โค้ด CSS พร้อมใช้งาน

รับโค้ด CSS พร้อมใช้งานได้ทันที ไม่จำเป็นต้องเขียนไวยากรณ์ไล่ระดับสีด้วยตนเอง หรือทดลองค่าสีต่างๆ

3

ตรวจสอบสีแบบโต้ตอบ

ดูสีไล่ระดับสีแต่ละสีได้โดยการคลิกที่ส่วนต่างๆ ของตัวอย่าง ทำให้ง่ายต่อการเข้าใจสีที่ใช้ได้อย่างแม่นยำ

4

เครื่องมือออกแบบที่ช่วยประหยัดเวลา

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

คำถามที่พบบ่อย

มีไล่ระดับสีในคลังนี้กี่แบบ?

คลังนี้มีชุดไล่ระดับสีที่คัดสรรมาอย่างดีกว่า 100 แบบ โดยมีสไตล์ที่หลากหลาย ตั้งแต่การเปลี่ยนผ่านที่ละเอียดอ่อนไปจนถึงการผสมผสานที่โดดเด่นและสดใส ซึ่งเหมาะสำหรับความต้องการด้านการออกแบบที่แตกต่างกัน

ฉันจะดูสีแต่ละสีในไล่ระดับสีได้อย่างไร?

คลิกที่ครึ่งซ้ายของตัวอย่างไล่ระดับสีเพื่อดูสีเริ่มต้น หรือคลิกที่ครึ่งขวาเพื่อดูสีสิ้นสุด โค้ด HEX จะแสดงบนตัวอย่างสีเป็นเวลา 2 วินาที

รูปแบบ CSS ที่คัดลอกคืออะไร?

เครื่องมือนี้จะคัดลอกคุณสมบัติพื้นหลัง CSS ที่สมบูรณ์แบบพร้อม linear-gradient ที่ไล่ระดับจากซ้ายไปขวา (ทิศทาง to right) ตัวอย่างเช่น: background: linear-gradient(to right, #FF6B6B, #4ECDC4);

ฉันสามารถใช้ไล่ระดับสีเหล่านี้ในเชิงพาณิชย์ได้หรือไม่?

ได้ ไล่ระดับสีทั้งหมดในคลังนี้ใช้งานได้ฟรีในโครงการส่วนตัวและเชิงพาณิชย์โดยไม่มีข้อจำกัด ไล่ระดับสีไม่สามารถมีลิขสิทธิ์ได้

ฉันจะนำไล่ระดับสีไปใช้กับเว็บไซต์ของฉันได้อย่างไร?

หลังจากคัดลอกโค้ด CSS แล้ว ให้นำไปวางใน stylesheet หรือเป็น inline style คุณสามารถนำไปใช้กับพื้นหลังขององค์ประกอบใดๆ เช่น div, section, button หรือ card

ฉันสามารถเปลี่ยนทิศทางของไล่ระดับสีได้หรือไม่?

ได้ หลังจากคัดลอก CSS แล้ว คุณสามารถเปลี่ยนทิศทางได้โดยการแก้ไขส่วน 'to right' เป็นค่าอื่นๆ เช่น 'to bottom', 'to top', '45deg' หรือมุมใดๆ ที่คุณต้องการ

คลังไล่ระดับสี (Color Gradient) ยอดนิยม - รวมกว่า 100 การผสมผสานสีไล่ระดับที่สวยงาม