สตูดิโอสี
จานสี การไล่ระดับ วงล้อ และทุกวิธีในการค้นหาสีที่สมบูรณ์แบบ
เครื่องสร้างจานสี AI
บรรยายอารมณ์แล้วรับจานสีที่เข้ากัน — ขับเคลื่อนด้วยโครงข่ายประสาทเทียมจริงที่ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีเซิร์ฟเวอร์ ไม่ต้องรอ ข้อมูลไม่ออกจากอุปกรณ์
AI · นิวรัลคู่มือสไตล์ AI
บรรยายแบรนด์ของคุณและรับระบบดีไซน์ครบชุด — จานสี คู่ฟอนต์ สเกลตัวอักษร ระยะห่าง ความโค้ง และเงา — จับคู่โดยโครงข่ายประสาทเทียมและประกอบเป็นบล็อก CSS พร้อมคัดลอก
AI · ระบบดีไซน์ตัวแปลงสี
แปลงระหว่าง HEX, RGB, HSL, CMYK และ OKLCH ด้วยการแปลงแบบสองทิศทางทันที
ตัวแปลง · ทุกรูปแบบชุดสีกลมกลืน
สร้างจานสีแบบคู่ตรงข้าม สามเหลี่ยม คล้ายคลึง และคู่ตรงข้ามแยกจากสีพื้นฐานใดก็ได้ คลิกชิปสีเพื่อคัดลอกรหัส hex
สี · ทฤษฎีตั้งชื่อสี AI
ป้อนค่าสีใดก็ได้แล้วค้นหาชื่อสีที่ใกล้เคียงที่สุด — สีมาตรฐาน CSS สีจีนโบราณ วะไงโระญี่ปุ่น และอีก 12 วัฒนธรรม ศาสตร์สีเชิงการรับรู้ค้นหาค่าที่ตรงที่สุด และโมเดล AI แนะนำธีมจานสีที่เกี่ยวข้อง
AI · ศาสตร์สีวงล้อสี
วงล้อสีแบบโต้ตอบเพื่อสำรวจเฉดสี ความอิ่มตัว และความสัมพันธ์ของสี คลิกเพื่อเลือกและล็อคสี
แบบโต้ตอบ · ภาพเครื่องสร้างเกรเดียนต์
ออกแบบการไล่ระดับสีเชิงเส้นและแนวรัศมีที่สวยงามพร้อมการแสดงตัวอย่าง Canvas แบบเรียลไทม์ คัดลอกโค้ด CSS ทันที
การไล่ระดับสี · การส่งออก CSSค่าที่ตั้งล่วงหน้าการไล่สี
เรียกดูและคัดลอกค่าที่ตั้งล่วงหน้าการไล่สีที่สวยงาม 15 รายการ
ค่าที่ตั้งล่วงหน้า·คลิกเดียวจานสีจากรูปภาพ
แยกชุดสีที่สวยงามออกจากภาพใดๆ โดยใช้การวัดปริมาณสีอัจฉริยะ
การสกัด · อัจฉริยะเครื่องสร้างจานสี
สร้างโทนสีที่กลมกลืนกันด้วยโหมดสีเดียว สีเสริม สีอะนาล็อก และสีสามสี ดูตัวอย่างแบบเรียลไทม์ด้วยการส่งออก CSS
สี·แบบโต้ตอบเครื่องมือสร้างเฉดสี
สร้างสเกลเฉดสีอ่อน-เข้มครบชุดจากสีใดก็ได้ — 20 ระดับ พร้อมส่งออก HEX และ SCSS
เฉดสีอ่อนเข้ม, สเกลสีเอฟเฟกต์และความลึก
เงา กระจก และรัศมี — รายละเอียดละเอียดอ่อนที่ทำให้ UI รู้สึกสมจริง
เครื่องสร้างรูปบล็อบ
สร้างรูปทรงออร์แกนิกนุ่มนวลสำหรับพื้นหลัง อวตาร และตัวแบ่งส่วน สุ่มด้วยคลิกเดียว ปรับความโค้ง และคัดลอกโค้ด border-radius หรือ SVG
CSS · ออร์แกนิกเครื่องสร้างมุมโค้ง
โปรแกรมแก้ไขรัศมีเส้นขอบภาพพร้อมการแสดงตัวอย่างแบบเรียลไทม์ คัดลอกโค้ด CSS ด้วยการควบคุมแต่ละมุม
CSS · โปรแกรมแก้ไขภาพเครื่องสร้างเงา
เครื่องมือสร้างเงากล่องแบบโต้ตอบพร้อมการแสดงตัวอย่าง Canvas แบบเรียลไทม์หลายชั้นและเอาต์พุต CSS
CSS · แบบเลเยอร์เครื่องมือสร้างปุ่ม CSS
ออกแบบปุ่มสวย ๆ ในไม่กี่วินาที — 6 สไตล์ สีกำหนดเอง มุมโค้ง และช่องว่าง พร้อม CSS ให้คัดลอก
สร้างปุ่ม, ปุ่ม CSS, ออกแบบปุ่มเครื่องสร้างฟิลเตอร์ CSS
สร้างเอฟเฟกต์ภาพด้วย CSS filter() — เบลอ ความสว่าง คอนทราสต์ หมุนเฉดสี ซีเปีย และอีกมาก ดูตัวอย่างสดบนภาพตัวอย่าง คัดลอกชุดฟิลเตอร์ทั้งหมดได้ทันที
CSS · เอฟเฟกต์ภาพเครื่องสร้าง Glassmorphism
สร้างการ์ดกระจกฝ้าพร้อมเบลอพื้นหลัง ความโปร่งใส และเส้นขอบละเอียด ดูตัวอย่างแบบเรียลไทม์และคัดลอก CSS
UI · กระจกฝ้าเครื่องมือสร้างข้อความไล่สี
ทำให้ข้อความโดดเด่นด้วยการไล่สีและแอนิเมชัน — ปรับมุมและสี คัดลอก CSS ได้ทันที
ข้อความไล่สีเครื่องสร้างเงาข้อความ
ออกแบบเงาข้อความหลายชั้นพร้อมดูตัวอย่างแบบเรียลไทม์ ปรับออฟเซ็ต เบลอ สี และความทึบ — คัดลอก CSS ได้ทันที
CSS · ตัวพิมพ์ชุดเครื่องมือใช้งานจริง
การตรวจสอบ การแปลง และระบบที่ทำให้การออกแบบของคุณเข้าถึงได้และสม่ำเสมอ
โค้ด CSS AI
บรรยายเอฟเฟกต์ที่ต้องการ — ปุ่มเรืองแสง สปินเนอร์โหลด การ์ดกระจก — แล้วโครงข่ายประสาทเทียมจะค้นหาโค้ด CSS ที่เข้ากัน ดูการแสดงผลสดและคัดลอกโค้ดพร้อมใช้
AI · คลังโค้ดเครื่องจำลองตาบอดสี
จำลองว่าสีปรากฏต่อผู้ใช้ตาบอดสีอย่างไร
การเข้าถึง·การจำลองเครื่องตรวจสอบความคมชัด
ตรวจสอบการปฏิบัติตาม WCAG AA/AAA สำหรับสีข้อความและพื้นหลัง รับคะแนนการเข้าถึงได้ทันที
การเข้าถึง · AA/AAAเครื่องสร้าง Cubic Bezier
ออกแบบเส้นโค้ง easing ของ CSS เองพร้อมตัวอย่างสดและแอนิเมชัน ลากจุดควบคุม เลือกจากค่าที่ตั้งไว้ และคัดลอกฟังก์ชัน cubic-bezier() ได้ทันที
CSS · การเคลื่อนไหวตัวแปลง PX เป็น REM
แปลงพิกเซลเป็น REM และย้อนกลับได้ทันที พร้อมขนาดฟอนต์ฐานที่ปรับได้และตารางแปลงครบถ้วน จำเป็นสำหรับ CSS ที่เข้าถึงได้และปรับขนาดได้
CSS · หน่วยเครื่องสร้าง CSS Transform
สร้างภาพและสร้าง CSS Transform — หมุน ย่อ/ขยาย เลื่อน และเอียง พร้อมตัวอย่างแบบโต้ตอบสด คัดลอกคุณสมบัติ transform ทั้งหมดได้ทันที
CSS · แอนิเมชันระบบสี UI
สร้างชุดโทเค็นการออกแบบที่สมบูรณ์จากสีเมล็ดเดียว ส่งออกเป็น Tailwind, CSS หรือ SCSS
โทเค็นการออกแบบ · Tailwindเลย์เอาต์และกริด
กริดและสัดส่วน — กระดูกสันหลังเชิงโครงสร้างของทุกอินเทอร์เฟซ
เครื่องคำนวณอัตราส่วนภาพ
คำนวณและปรับขนาดอัตราส่วนภาพใดก็ได้ — 16:9, 4:3, 1:1, 9:16 และแบบกำหนดเอง ปรับขนาดมิติโดยรักษาสัดส่วน พร้อมค่าที่ตั้งล่วงหน้าความละเอียดทั่วไป
ยูทิลิตี้ · อัตราส่วนเครื่องสร้าง CSS Grid
สร้างเค้าโครง CSS Grid ด้วยภาพพร้อมการแสดงตัวอย่างแบบเรียลไทม์
CSS·โปรแกรมแก้ไขภาพเครื่องคำนวณอัตราส่วนทองคำ
คำนวณขนาดอัตราส่วนทองคำ (1:1.618) สำหรับเลย์เอาต์ ตัวพิมพ์ และโลโก้ รับค่าทองคำทั้งขนาดใหญ่และเล็กทันที พร้อมตัวอย่างภาพ
เลย์เอาต์ · สัดส่วนเครื่องมือสร้างคลื่น SVG
สร้างเส้นแบ่งคลื่น SVG นุ่มนวลสำหรับเว็บไซต์ — ปรับความสูง ความยาวคลื่น และชั้น คัดลอก SVG
คลื่น SVG, เส้นแบ่งคลื่นเวิร์กชอปตัวพิมพ์
การจับคู่ฟอนต์และสเกล — เสียงของการออกแบบของคุณ
จับคู่ฟอนต์ AI
บรรยายโปรเจกต์ของคุณและรับคู่ฟอนต์ Google ระดับมืออาชีพที่จับคู่โดยโครงข่ายประสาทเทียมจริงในเบราว์เซอร์ ดูการแสดงผลสดและคัดลอก CSS พร้อมใช้
AI · ฟอนต์เครื่องคำนวณ Clamp
สร้างตัวพิมพ์ลื่นไหลด้วย CSS clamp() กำหนดขนาดต่ำสุด ที่ต้องการ และสูงสุด — รับสูตร clamp() ที่สมบูรณ์แบบพร้อมตัวอย่างสเกลภาพ
CSS · ตัวพิมพ์ลื่นไหลการจับคู่ฟอนต์
ค้นพบการจับคู่แบบอักษรที่กลมกลืนกันสำหรับส่วนหัวและข้อความเนื้อหาจากคอลเลกชันที่รวบรวมไว้
การพิมพ์ · แบบอักษรมากกว่า 300 แบบเครื่องสร้างสเกลตัวพิมพ์
สร้างสเกลตัวพิมพ์แบบโมดูลาร์ที่กลมกลืนด้วยอัตราส่วนทองคำ เมเจอร์เทิร์ด และอัตราส่วนคลาสสิกอื่นๆ ดูตัวอย่างขนาดด้วยภาพและคัดลอก CSS ทั้งหมด
ตัวพิมพ์ · สเกล14 ภาษา
ทุกเครื่องมือ ทุกฉลาก ทุกคำแนะนำ — แปลโดยสมบูรณ์
การเข้าถึงก่อน
ทุกจานสีมีคะแนนคอนทราสต์ WCAG ออกแบบอย่างครอบคลุมตั้งแต่เริ่มต้น
การส่งออกที่เป็นมิตรกับ Dev
CSS, Tailwind, SCSS, JSON — คัดลอกรูปแบบที่โปรเจ็กต์ของคุณต้องการ