วางหรือนำเข้าชุดสีและส่งออกทันทีเป็น CSS variables, SCSS, Tailwind config, JSON หรือ SVG swatches — ขั้นตอนสุดท้ายสำหรับทุกพาเลต

วางค่า HEX (หนึ่งบรรทัดต่อสี หรือคั่นด้วยลูกน้ำ/ช่องว่าง) รับ rgb() และ hsl() ด้วย

พาเลต

ไม่พบสีที่ถูกต้อง — ตรวจสอบข้อมูลที่ป้อน

รูปแบบส่งออก
โค้ดส่งออก

							

ทุกอย่างทำงานในเบราว์เซอร์ — วางพาเลตและคัดลอกโค้ดพร้อมใช้งานในรูปแบบใดก็ได้ ไม่ต้องสมัคร ฟรีทั้งหมด


เกี่ยวกับ ส่งออกพาเลต

Palette Exporter คือขั้นตอนสุดท้ายสำหรับชุดสีใดก็ตาม วางชุดสีเข้าไปแล้วรับโค้ดที่พร้อมใช้งานจริงในรูปแบบที่โปรเจกต์ของคุณต้องการ รองรับค่า HEX บรรทัดละหนึ่งค่าหรือคั่นด้วยจุลภาคและช่องว่าง และเข้าใจสัญกรณ์ rgb() และ hsl() ด้วย

มีรูปแบบผลลัพธ์หกแบบที่สร้างแบบเรียลไทม์ ได้แก่ CSS custom properties, ตัวแปร SCSS, บล็อกสี Tailwind config, JSON, สวอตช์ SVG และรายการ HEX ธรรมดา คำนำหน้าตัวแปรที่ปรับได้ช่วยให้ชื่อที่สร้างขึ้นสอดคล้องกับโค้ดของคุณ และแต่ละรูปแบบสามารถคัดลอกไปยังคลิปบอร์ดหรือดาวน์โหลดเป็นไฟล์ได้

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

วิธีใช้ ส่งออกพาเลต

  1. วางสีของคุณลงในช่องป้อนข้อมูล ไม่ว่าจะเป็น HEX, rgb() หรือ hsl() บรรทัดละหนึ่งค่าหรือคั่นด้วยจุลภาค
  2. คลิก "Update colors" เพื่อแปลงเป็นชุดสี หรือโหลดตัวอย่างเพื่อทดลองใช้
  3. เลือกรูปแบบส่งออก: CSS variables, SCSS, Tailwind config, JSON, สวอตช์ SVG หรือ HEX ธรรมดา
  4. ปรับคำนำหน้าตัวแปรหากต้องการตั้งชื่อเอง
  5. คัดลอกโค้ดที่สร้างขึ้นหรือดาวน์โหลดเป็นไฟล์

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

รองรับค่า HEX (มีหรือไม่มีเครื่องหมาย #) รวมถึงสัญกรณ์ rgb() และ hsl() คุณผสมหลายรูปแบบและคั่นสีด้วยการขึ้นบรรทัดใหม่ จุลภาค หรือช่องว่างได้ ตัวแปลงจะดึงสีที่ถูกต้องทุกสีออกมาและข้ามส่วนที่เหลือ

ใช่ การแปลงค่าและสร้างโค้ดเกิดขึ้นในเบราว์เซอร์ของคุณทั้งหมด เครื่องมือนี้จึงฟรี ไม่มีบัญชี ไม่มีเครดิต และไม่จำกัดจำนวนชุดสีหรือการส่งออก

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

ไม่ สีจะอยู่ในแท็บเบราว์เซอร์ของคุณ ไม่มีคำขอไปยังเซิร์ฟเวอร์ในระหว่างการแปลงหรือส่งออก และไม่มีการบันทึกใด ๆ เมื่อคุณออกจากหน้า

สร้างไฟล์ SVG ขนาดเล็กที่แสดงสีแต่ละสีในชุดสีเป็นสวอตช์ที่มีป้ายกำกับ มีประโยชน์สำหรับฝังภาพอ้างอิงชุดสีในเอกสาร ไฟล์ README หรือหน้าส่งมอบงานออกแบบ โดยไม่ต้องแคปหน้าจอ

แชร์สิ่งนี้

การค้นหายอดนิยม
เครื่องส่งออกพาเลต ส่งออกสีเป็น css พาเลตเป็น scss การตั้งค่าสี tailwind ส่งออกพาเลต json ตัวอย่างสี svg
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง