CSS Custom Properties Generator: สร้าง Design Tokens ให้ Design System ของคุณในไม่กี่คลิก

การจะสร้าง design system ที่ดีสักชุดหนึ่ง ไม่ได้เริ่มจาก component library สุดอัลงการ แต่เริ่มจากสิ่งเล็ก ๆ ที่เรียกว่า "ค่า" — ค่าสี ค่าขนาดฟอนต์ ค่าระยะห่าง และค่ารัศมีมุม ถ้าค่าเหล่านี้ถูกเขียนซ้ำเป็น hardcode กระจายอยู่ทั่วไฟล์ CSS การเปลี่ยนธีมแต่ละครั้งก็กลายเป็นงานมหาศาลที่ต้องไล่หา #2563eb ทีละบรรทัด CSS Custom Properties (หรือที่เรียกกันติดปากว่า CSS Variables) คือคำตอบของปัญหานี้ เพราะมันช่วยให้ค่าทุกอย่างเป็น "ตัวแปร" ที่นิยามครั้งเดียวแล้วอ้างอิงได้ทั้งโปรเจกต์

แต่การจะนั่งเขียนตัวแปรเหล่านี้ด้วยตัวเองให้ครบทุก step สี ทุกขนาดตัวอักษร ก็เป็นเรื่องเสียเวลาและผิดพลาดง่าย เครื่องมือ CSS Custom Properties Generator จึงถูกสร้างขึ้นมาเพื่อช่วยคุณ generate design tokens แบบครบชุด ทั้ง color palette แบบ 11 step, type scale แบบ modular, spacing scale หน่วย rem และ border radius — ทั้งหมดทำงานบน browser ของคุณโดยตรง (client-side) ไม่ต้องติดตั้งอะไรเพิ่ม ได้ผลลัพธ์ทันทีและเป็นส่วนตัว

ในคู่มือนี้ เราจะพาไปดูว่าทำไม่ CSS Custom Properties ถึงสำคัญ ฟีเจอร์หลักของเครื่องมือมีอะไรบ้าง ใช้งานอย่างไรทีละขั้นตอน พร้อมเจาะลึกแนวคิด design tokens และ best practices ที่นำไปใช้ได้จริงในโปรเจกต์ของคุณ

ทำไม่ต้องใช้ CSS Custom Properties?

• จัดการค่าจากจุดเดียว (Single Source of Truth): เปลี่ยนค่าสี primary ครั้งเดียวใน :root ทุก component ที่อ้างอิง --primary-600 ก็อัปเดตตามทันที ไม่ต้องไล่แก้ทีละไฟล์
• ทำ theming และ dark mode ได้ง่าย: แค่สลับค่าตัวแปรภายใต้ selector ใหม่ เช่น [data-theme="dark"] ก็จะได้ธีมใหม่ทั้งชุดโดยไม่ต้องเขียน CSS ซ้ำ
• โค้ดอ่านง่ายและสื่อความหมาย: color: var(--primary-600) สื่อความหมายชัดเจนกว่า color: #2563eb มาก ทำให้คนใหม่ในทีมอ่านโค้ดเข้าใจเร็วขึ้น
• เปลี่ยนค่าได้ตอน runtime: ต่างจาก preprocessor variables (เช่น Sass) ที่ compile เสร็จแล้วตายตัว CSS Custom Properties เปลี่ยนค่าได้ด้วย JavaScript หรือ media query แบบ real-time
• browser สมัยใหม่รองรับทั้งหมด: ทุก browser หลักในปัจจุบันรองรับ var() และ custom properties อย่างสมบูรณ์ ใช้ใน production ได้สบาย
• ต่อยอดได้ไกล: ตัวแปรเหล่านี้คือ foundation ของ design tokens ที่สามารถ export ไปใช้กับเครื่องมืออื่น เช่น Style Dictionary, Tailwind CSS หรือ Figma tokens ได้ในอนาคต

ฟีเจอรหลัก

• Color ramp 11 ขั้นอัตโนมัติ: จากสีฐานที่คุณเลือก เครื่องมือจะสร้าง tint (ผสมเข้าหาสีขาว) สำหรับ step อ่อน ๆ อย่าง 50–400 และ shade (ผสมเข้าหาสีดำ) สำหรับ step เข้ม ๆ อย่าง 600–950 ทำให้คุณมีสีครบทุกระดับการใช้งานตั้งแต่ background ยัน text โดยไม่ต้องผสมสีเอง
• Type scale แบบ modular: ค่าเริ่มต้นคือ base 16px กับ ratio 1.250 (Major Third) ซึ่งเป็นสัดส่วนยอดนิยมในงาน typography ทำให้ขนาดตัวอักษรแต่ละขั้นสัมพันธ์กันอย่างกลมกลืน
• Spacing หน่วย rem: ค่าเริ่มต้นคือ base 4px คูณด้วย scale มาตรฐาน 1, 2, 3, 4, 6, 8, 12, 16 แล้วแปลงเป็น rem ซึ่งเคารพการตั้งค่า font size ของผู้ใช้ ดีต่อ accessibility
• ทำงาน client-side ทั้งหมด: ไม่มีข้อมูลส่งไป server ใด ๆ ทั้งสิ้น ปลอดภัย รวดเร็ว และใช้ได้แม้เน็ตช้า

วิธีใช้งาน

1. เปิดเครื่องมือ: เข้าไปที่หน้า CSS Custom Properties Generator คุณจะเห็นแผงควบคุมและ live preview ทันที
2. เลือกสี primary และ secondary: คลิกเลือกสีฐานทั้งสองชุด เครื่องมือจะ generate ramp 11 ขั้น (50, 100, 200 ... 900, 950) ให้ดูเป็น swatch สีแบบ real-time
3. ปรับ typography: กำหนด base font size (ค่าเริ่มต้น 16px) แล้วเลือก modular scale ratio ที่ต้องการ เช่น 1.250 Major Third เครื่องมือจะคำนวณ --text-xs ถึง --text-4xl ให้เอง
4. ตั้ง spacing และ border radius: กำหนด base spacing unit (ค่าเริ่มต้น 4px) และรัศมีมุมที่ต้องการ ระบบจะสร้าง --spacing-1 ถึง --spacing-16 และ --border-radius พร้อม variant sm/lg
5. ตรวจ preview แล้ว copy ไปใช้: เช็คความเรียบร้อยของ swatch และค่าทั้งหมด กดปุ่มคัดลอกหนึ่งครั้ง แล้วนำไปวางในไฟล์ CSS ของคุณภายใต้ :root เป็นอันเสร็จ

เข้าใจ Design Tokens

Color Ramp 50–950 คืออะไร?

ระบบเลข step สีแบบ 50–950 เป็น convention ที่นิยมใช้ใน design system สมัยใหม่ (เช่น Tailwind CSS) โดยเลขยิ่งน้อยสียิ่งอ่อน เลขยิ่งมากสียิ่งเข้ม เครื่องมือนี้สร้างให้ 11 ขั้นต่อหนึ่งสีฐาน:

• 50–100: สีอ่อนมาก เหมาะกับ background, hover state แบบ subtle
• 200–400: สีระดับกลาง เหมาะกับ border, illustration, element รอง
• 500–600: สีหลัก เหมาะกับปุ่ม, link, element ที่ต้องการความเด่น
• 700–950: สีเข้ม เหมาะกับ text, heading และ dark mode background

ตัวอย่าง output ที่เครื่องมือสร้างให้ (สมมติสีฐานโทนน้ำเงิน):

:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;
}

Modular Type Scale และ Ratio อย่าง Major Third 1.250

Modular type scale คือการคำนวณขนาดตัวอักษรด้วยการคูณ base size ด้วย ratio เดิมซ้ำ ๆ ทำให้สัดส่วนระหว่างขนาดแต่ละขั้นสม่ำเสมอและดูเป็นดนตรี ตัวอย่างเช่น base 16px กับ ratio 1.250 (Major Third):

:root {
  --font-base-size: 16px;
  --font-scale-ratio: 1.25;

  --text-xs: 0.64rem; /* ≈ 10.24px */
  --text-sm: 0.8rem; /* ≈ 12.8px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.563rem; /* 25px */
  --text-2xl: 1.953rem; /* ≈ 31.25px */
  --text-3xl: 2.441rem; /* ≈ 39.06px */
  --text-4xl: 3.052rem; /* ≈ 48.83px */
}

Ratio แต่ละตัวให้อารมณ์ต่างกัน: 1.200 (Minor Third) ให้ขนาดที่กระชับ เหมาะกับ UI ที่ข้อมูลหนาแน่น ส่วน 1.333 (Perfect Fourth) ให้ contrast ที่ชัดเจน เหมาะกับงาน editorial ที่มี heading เด่น ๆ

Spacing Scale แบบ rem

เครื่องมือใช้ base spacing unit (เริ่มต้น 4px) คูณด้วย standard scale 1, 2, 3, 4, 6, 8, 12, 16 แล้วแปลงเป็น rem:

:root {
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
}

เหตุผลที่ใช้ rem แทน px คือ rem อ้างอิงจาก font size ตั้งต้นของ browser ถ้าผู้ใช้ตั้งค่า font ใหญ่ขึ้นเพื่อช่วยการมองเห็น ระยะห่างทั้งหมดก็จะขยายตามไปด้วยโดยอัตโนมัติ ซึ่งเป็นหัวใจสำคัญของ accessible design

ทำไม่ Single Source of Truth ถึงสำคัญ?

ปัญหาคลาสสิกของทีมที่มี designer และ developer หลายสิบคนคือ "ค่าเพี้ยน" — ดีไซน์กำหนดสีหนึ่ง แต่โค้ดใช้อีกสีที่ใกล้เคียงกัน เพราะต่างคนต่างจำค่าเอง การรวมค่าทุกอย่างไว้ใน token file เดียวทำให้ทุกคนอ้างอิงแหล่งเดียวกัน เมื่อมีการปรับ brand color หรือปรับ scale ก็แก้ที่เดียวแล้ว sync ไปทุกที่ ลดความคลาดเคลื่อนและทำให้การ review ง่ายขึ้นมาก เพราะดูแค่ไฟล์ tokens ก็รู้ว่าระบบทั้งหมดใช้ค่าอะไรอยู่

กรณีใช่งานจริง

สร้าง Design System ของบริษัท

สมมติทีมคุณเริ่มทำ design system ใหม่ ให้เปิดเครื่องมือ เลือกสีแบรนด์เป็น primary และ secondary ปรับ type scale ให้เข้ากับบุคลิกของแบรนด์ แล้ว copy CSS ที่ได้ไปวางในไฟล์ tokens.css เป็นไฟล์แรกที่ทุก component import เท่านี้ปุ่ม, card, form ทุกตัวก็ใช้ค่าชุดเดียวกันตั้งแต่วันแรก

/* tokens.css — สร้างจากเครื่องมือ */
:root {
  --primary-600: #2563eb;
  --text-base: 1rem;
  --spacing-4: 1rem;
  --border-radius: 0.5rem;
}

/* Button.css — อ้างอิง tokens */
.button {
  background: var(--primary-600);
  font-size: var(--text-base);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--border-radius);
}

ทำ Dark Mode ในไม่กี่นาที

เพราะค่าทั้งหมดเป็นตัวแปร การทำ dark mode จึงแค่ override ค่าสีภายใต้ selector ใหม่ โดยที่ CSS ของ component ไม่ต้องแก้เลยสักบรรทัด:

[data-theme='dark'] {
  --primary-500: #60a5fa; /* สว่างขึ้นเพื่ออ่านบนพื้นเข้ม */
  --surface: var(--primary-950);
  --text-main: var(--primary-50);
}

ผลิตภัณฑ์แบบ Multi-brand / White-label

ถ้าคุณทำ SaaS ที่ต้องขายให้หลายลูกค้า แต่ละแบรนด์ต้องการสีของตัวเอง แค่ generate token ชุดใหม่ด้วยสีแบรนด์ของแต่ละลูกค้า แล้วสลับไฟล์ tokens ตอน build หรือตอน runtime ก็เปลี่ยนโฉมทั้งแอปได้โดยไม่ต้องแตะโค้ด component

Prototyping งานใหม่ให้เร็ว

ตอนเริ่มโปรเจกต์ใหม่ สิ่งที่ต้องตัดสินใจเยอะคือ "ใช้สีอะไร ไซส์ไหน ระยะห่างเท่าไร" เครื่องมือนี้ช่วยคุณลองผิดลองถูกได้ทันที ปรับสีฐาน เปลี่ยน ratio ดู live preview จนกว่าจะเจอชุดที่ลงตัว แล้วค่อย copy ไปใช้จริง ประหยัดเวลาได้หลายชั่วโมงเมื่อเทียบกับการนั่งจูนค่าเองทีละตัว

Best Practices

• ตั้งชื่อให้เป็นระบบ: ใช้ convention เดียวกันทั้งชุด เช่น --{category}-{value} (--primary-600, --spacing-4, --text-xl) เพื่อให้ค้นหาและเดาทางได้ง่าย
• ใช้ rem สำหรับขนาดฟอนต์และระยะห่าง: เพื่อให้เคารพการตั้งค่าของผู้ใช้และดีต่อ accessibility เสมอ
• อย่าสร้างตัวแปรเยอะเกินจำเป็น: เริ่มจาก tokens ที่ใช้จริงก่อน แล้วค่อยเพิ่มเมื่อมี use case ชัดเจน ตัวแปรที่ไม่มีคนใช้คือหนี้ทางเทคนิค
• ทดสอบ contrast ทุก step สี: ตรวจสอบว่า step ที่ใช้เป็น text กับ background ผ่านเกณฑ์ WCAG (อย่างน้อย 4.5:1 สำหรับ body text) โดยเฉพาะคู่สี 50 กับ 900
• แยกไฟล์ tokens โดยเฉพาะ: เก็บ design tokens ไว้ในไฟล์เดียว เช่น tokens.css และ version controlมันเหมือนโค้ด เพื่อให้ติดตามการเปลี่ยนแปลงได้ง่าย
• ทำ documentation ประกอบ tokens: ระบุว่าแต่ละตัวแปรมีไว้ใช้ทำอะไร เช่น --primary-600 สำหรับ interactive element หลัก เพื่อป้องกันการใช้ผิดความหมายในทีม

เริ่มสร้าง Design Tokens ของคุณวันนี้

Design system ที่ดีเริ่มจาก tokens ที่ถูกออกแบบมาอย่างดี และคุณไม่จำเป็นต้องเป็น expert ด้านสีหรือ typography ก็สร้างชุดที่ใช้งานได้ทันที CSS Custom Properties Generator ช่วยคุณ generate color palette, type scale, spacing scale และ border radius ครบชุดในหน้าเดียว ฟรี ไม่ต้องสมัคร ไม่ต้องติดตั้ง ทำงานบน browser ของคุณโดยตรง ลองเปิดเครื่องมือ เลือกสีแบรนด์ของคุณ แล้วดู design tokens ชุดแรกเกิดขึ้นตรงหน้าภายในไม่ถึงนาที — design system ของคุณเริ่มได้เลยตอนนี้

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

• Color Palette Generator — สร้าง color palette ที่กลมกลืนจากสีเดียวหรือหลายสี เหมาะสำหรับหาชุดสีตั้งต้นก่อนนำไป generate เป็น CSS variables ต่อ
• CSS Clamp Generator — สร้างค่า clamp() สำหรับ responsive typography และ spacing ที่ย่อขยายตามขนาดจอโดยอัตโนมัติ เข้ากันได้ดีกับ type scale จากเครื่องมือนี้
• CSS to Tailwind Converter — แปลง CSS ที่มีอยู่เป็น Tailwind utility classes เหมาะกับทีมที่ต้องการย้ายจาก custom CSS ไปใช้ Tailwind โดยยังคง design tokens เดิมไว้

ขอให้สนุกกับการทำ design tokens!