ตัวแปร CSS

ส่งออกสีเป็น CSS custom properties ใช้ ตัวแปร CSS ออนไลน์ฟรี ไม่ต้องสมัคร พร้อมผลลัพธ์รวดเร็วและการประมวลผลที่ปลอดภัยในเบราว์เซอร์

ชื่อ

ค่า

ชื่อ

ค่า

ชื่อ

ค่า

ชื่อ

ค่า

ชื่อ

ค่า

--primary

--secondary

--accent

--background

--foreground

:root {
  --primary: #6366f1;
  --secondary: #ec4899;
  --accent: #f59e0b;
  --background: #ffffff;
  --foreground: #1f2937;
}

ตัวแปร CSS ช่วยให้คุณทำงานกับสีได้โดยตรงในเบราว์เซอร์

เครื่องมือนี้ออกแบบมาสำหรับนักออกแบบ นักพัฒนา และครีเอเตอร์ที่ต้องการผลลัพธ์รวดเร็วและเชื่อถือได้

Supported formats

CSS

HEX

RGB

HSL

How it works

Step 1

เปิด ตัวแปร CSS

Step 2

ป้อนหรือนำเข้าสีของคุณ

Step 3

คัดลอก ส่งออก หรือใช้ผลลัพธ์ซ้ำ

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

การลืมตรวจสอบคอนทราสต์อาจทำให้อ่านยากขึ้น
การใช้สีมากเกินไปอาจทำให้พาเลตนำไปใช้ยาก

เคล็ดลับจากมือโปร

เก็บสีหลักเป็นตัวแปร CSS
ทดสอบพาเลตในโหมดสว่างและมืดก่อนเผยแพร่

Privacy guaranteed: everything is processed locally in your browser.

เมื่อเป็นไปได้ การประมวลผลจะเกิดขึ้นภายในเบราว์เซอร์ ไม่ต้องมีบัญชี

ตัวแปร CSS สำหรับโปรเจกต์สีของคุณ

ส่งออกสีเป็น CSS custom properties

ตัวแปร CSS โดยไม่สูญเสียความแม่นยำ

การแปลงทำงานด้วยค่าที่แม่นยำ (HEX, RGB, HSL, OKLCH) ไม่มีการประมาณภาพ — คุณได้สีที่ตรงกับเจตนาการออกแบบ

ตัวแปร CSS ฟรีออนไลน์

ไม่ต้องลงทะเบียน ไม่ต้องดาวน์โหลดซอฟต์แวร์ ตัวแปร CSS ฟรี 100% และทำงานบนเบราว์เซอร์ใดก็ได้ แพ็กเกจฟรีรวม 10 ครั้งต่อวัน

ตัวแปร CSS รวดเร็วและปลอดภัย

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

ตัวแปร CSS สำหรับการแชร์และทำงานร่วมกัน

ส่งออกผลลัพธ์เป็น HEX, RGB, HSL, CSS, JSON หรือคัดลอกได้ในคลิกเดียว เหมาะสำหรับแชร์คู่มือสีกับทีม

ค้นพบเครื่องมือสีทั้งหมด

สกัด แปลง สร้างพาเลต ไล่เฉดสี และคอนทราสต์ WCAG ในไม่กี่คลิก

ดูเครื่องมือทั้งหมด

Related tools

คู่มือและบทช่วยสอน

เรียนรู้วิธีการใช้งานเครื่องมือของเราด้วยคู่มือแบบละเอียด

css-variables: คู่มือใช้งาน developer

คู่มือภาษาไทยสำหรับใช้ css-variables เข้าใจแนวทาง developer และหลีกเลี่ยงข้อผิดพลาดทั่วไป

css-variables: คู่มือใช้งาน developer

Frequently asked questions

ใช่ เครื่องมือนี้ใช้งานออนไลน์ได้ฟรี

เมื่อเป็นไปได้ การประมวลผลจะเกิดขึ้นในเบราว์เซอร์เพื่อปกป้องข้อมูลของคุณ

โฆษณา

เราใช้คุกกี้

ตัวแปร CSS

Supported formats

How it works

Step 1

Step 2

Step 3

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

เคล็ดลับจากมือโปร

Privacy guaranteed: everything is processed locally in your browser.

ตัวแปร CSS สำหรับโปรเจกต์สีของคุณ

ตัวแปร CSS โดยไม่สูญเสียความแม่นยำ

ตัวแปร CSS ฟรีออนไลน์

ตัวแปร CSS รวดเร็วและปลอดภัย

ตัวแปร CSS สำหรับการแชร์และทำงานร่วมกัน

ค้นพบเครื่องมือสีทั้งหมด

Related tools

คู่มือและบทช่วยสอน

css-variables: คู่มือใช้งาน developer

css-variables: คู่มือใช้งาน developer

css-variables: คู่มือใช้งาน developer

Frequently asked questions

ตัวแปร CSS ฟรีหรือไม่?

ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?