ตัวสร้างไล่สี

ออกแบบไล่สีแบบเส้นตรง วงกลม และกรวย แล้วส่งออกเป็น CSS หรือรูปภาพ

ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
ทำงานในเบราว์เซอร์
ฟรี ไม่ต้องสมัคร ไม่มีลายน้ำ

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

วิธีใช้ ตัวสร้างไล่สี

สร้างไล่สีแบบเส้นตรง วงกลม และกรวย โดยมีจุดสีได้ตามต้องการ ผสมใน sRGB, OKLab หรือ OKLCH คัดลอกผลเป็น CSS คลาส Tailwind หรือ SVG หรือดาวน์โหลดเป็นรูป PNG, JPG หรือ WebP สูงสุด 8192 px ต่อด้าน

1
เลือกประเภท (เส้นตรง วงกลม หรือกรวย) แล้วตั้งมุม รูปทรง หรือจุดศูนย์ สำหรับวงกลมและกรวย คุณลากบนตัวอย่างเพื่อย้ายจุดศูนย์ได้
2
แก้จุดสี: คลิกแถบเพื่อเพิ่มจุด ลากมือจับเพื่อย้าย และเปลี่ยนสีกับตำแหน่งของแต่ละจุดในรายการ
3
เลือกวิธีผสมสี (sRGB, OKLab หรือ OKLCH) หรือเริ่มจากหนึ่งในค่าที่ตั้งไว้ หรือสุ่ม
4
คัดลอกโค้ดจากแท็บ CSS, Tailwind หรือ SVG
5
สำหรับรูป ตั้งความกว้างและความสูงหรือเลือกขนาด เลือก PNG, JPG หรือ WebP แล้วคลิกดาวน์โหลด

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

การผสมแบบ sRGB, OKLab และ OKLCH ต่างกันอย่างไร?

sRGB คือการผสม CSS แบบคลาสสิก ซึ่งสีคู่ตรงข้ามอาจกลายเป็นเทาตรงกลาง OKLab สม่ำเสมอตามการรับรู้ ไม่มีจุดกลางที่ขุ่น OKLCH คงความสดของสีโดยเคลื่อนไปตามวงล้อฮิว

ไล่สี OKLab และ OKLCH ใช้ในเบราว์เซอร์เก่าได้หรือไม่?

ผลลัพธ์ CSS เริ่มด้วยบรรทัดสำรองที่ใช้จุดที่คำนวณไว้ล่วงหน้า สำหรับเบราว์เซอร์ที่ไม่รองรับ “in oklab” หรือ “in oklch” โค้ด SVG และรูปที่ดาวน์โหลดใช้จุดที่คำนวณไว้ล่วงหน้าเช่นกัน ดังนั้นดูเหมือนกันทุกที่

ทำไมแท็บ SVG ถึงถูกปิดสำหรับไล่สีแบบกรวย?

SVG ไม่มีไล่สีแบบกรวย ให้ดาวน์โหลดรูป PNG, JPG หรือ WebP แทน

ใช้จุดโปร่งใสได้หรือไม่?

ได้ สีที่มีแอลฟาเช่น rgba() หรือ #rrggbbaa ใช้ได้ ดาวน์โหลด PNG หรือ WebP เพื่อคงความโปร่งใส เพราะ JPG ไม่มีช่องแอลฟา

รูปถูกสร้างบนเซิร์ฟเวอร์หรือไม่?

ไม่ได้ รูปถูกวาดบน canvas ในเบราว์เซอร์และบันทึกตรง ๆ ขนาดใดก็ได้ตั้งแต่ 1 ถึง 8192 px ต่อด้าน

ปรับจุดด้วยแป้นพิมพ์อย่างละเอียดได้อย่างไร?

โฟกัสมือจับจุดแล้วใช้ปุ่มลูกศรเลื่อนทีละ 1% (Shift สำหรับ 10%) Home หรือ End เพื่อกระโดดไปปลาย และ Delete เพื่อลบ ไล่สีเก็บจุดไว้อย่างน้อยสองจุดเสมอ