CSS Developer Tools: สร้าง Gradient, Shadow, แปลงหน่วย และตรวจสอบ Accessibility

CSS เป็นทั้งส่วนที่ visual ที่สุดและน่าเบื่อที่สุดในการพัฒนา front-end ในเวลาเดียวกัน การสร้าง gradient ด้วยการปรับค่า hex และองศาทีละนิดนั้นช้ามาก การคำนวณ WCAG contrast ratio ระหว่างสองสีต้องอาศัยคณิตศาสตร์ การแปลงค่า px เป็น rem ต้องรู้ขนาด root font งานเหล่านี้ควรใช้เวลาเพียงไม่กี่วินาที — และด้วยเครื่องมือที่ใช่ มันทำได้จริง

ต่อไปนี้คือ CSS tools บนเบราว์เซอร์ที่ช่วยขจัดการเดาสุ่มออกไป

1. CSS Gradient Generator

การเขียน gradient CSS ด้วยมือนั้นยุ่งยากมาก linear-gradient(135deg, #667eea 0%, #764ba2 100%) อาจเข้าใจได้เมื่อคุณรู้ syntax แล้ว แต่การปรับแต่งมุม, color stop และตำแหน่งแบบ visual นั้นเร็วกว่าการใช้ generator มาก

CSS Gradient Generator ของเรารองรับ:

• Linear gradient — ตั้งมุม เพิ่ม color stop ที่ตำแหน่งใดก็ได้
• Radial gradient — แบบวงกลมหรือวงรี พร้อมกำหนดตำแหน่งศูนย์กลาง
• Color stop หลายจุด — เพิ่มจุดได้ตามต้องการ
• Live preview — preview แบบเต็มความกว้างอัปเดตทันทีเมื่อเปลี่ยนค่า

ตัวอย่าง output:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

เคล็ดลับ:

• ใช้ color stop ที่มี opacity ต่ำ (พร้อม alpha) เพื่อสร้างเอฟเฟกต์แก้วฝ้า
• ตั้งมุม gradient ให้ตรงกับแนวเฉียงของ layout เพื่อลุคที่ทันสมัย
• สำหรับพื้นหลังที่ subtle ให้ค่า saturation ของ color stop ต่ำและ lightness สูง

---

2. CSS Box Shadow Generator

Box shadow ยากต่อการทำความเข้าใจมากกว่า gradient syntax คือ offset-x offset-y blur spread color inset — และการซ้อนหลาย shadow เพื่อสร้างเอฟเฟกต์ความลึกที่สมจริงต้องประสานค่าพารามิเตอร์ทั้งหมดพร้อมกัน

CSS Box Shadow Generator ของเราช่วยให้คุณ:

• เพิ่ม shadow layer หลายชั้น — ซ้อนกันแบบ visual
• ดู live preview บน card element จริง
• สลับ inset แต่ละ layer เพื่อเอฟเฟกต์กดหรือแกะสลัก
• ปรับ blur, spread, offset และสีแยกกันต่อ layer

รูปแบบ shadow ยอดนิยม:

/* Soft, elevated card */
box-shadow:
  0 1px 3px rgba(0,0,0,.12),
  0 4px 12px rgba(0,0,0,.08);

/* Deep elevation (modal) */
box-shadow:
  0 4px 6px rgba(0,0,0,.05),
  0 10px 15px rgba(0,0,0,.1),
  0 20px 25px rgba(0,0,0,.06);

/* Colored glow (buttons) */
box-shadow: 0 4px 15px rgba(99,102,241,.4);

/* Inset (pressed state) */
box-shadow: inset 0 2px 4px rgba(0,0,0,.15);

การใช้หลาย layer คือความลับของ shadow ที่สมจริง — layer เดียวดูแบนและดิบ ขณะที่สองหรือสาม layer ในขนาดต่างกันสร้างความลึกที่เป็นธรรมชาติ

---

3. CSS Unit Converter: px ↔ rem ↔ em ↔ vw

CSS มีหน่วยที่หลากหลายจนสับสน การเข้าใจว่าควรใช้หน่วยไหนเมื่อไหร่ — และการแปลงระหว่างหน่วย — เป็นงานประจำวันของนักพัฒนา front-end

CSS Unit Converter ของเราแปลงระหว่าง:

หน่วย	สิ่งที่อ้างอิง
px	Pixel แบบ absolute
rem	Root font size (ค่าเริ่มต้น 16px)
em	Font size ของ parent element
pt	Print point (1pt = 1.33px)
cm / mm	การวัดทางกายภาพ
vw / vh	ความกว้าง / ความสูงของ viewport
%	ขนาดของ parent element

พารามิเตอร์ที่ปรับได้:

• Root font size — เปลี่ยนจาก 16px ให้ตรงกับการตั้งค่า html { font-size } ของคุณ
• Parent font size — สำหรับการคำนวณ em
• Viewport size — สำหรับการคำนวณ vw/vh

ควรใช้หน่วยไหนเมื่อไหร่:

• rem สำหรับ font size — scale ตามการตั้งค่า accessibility ของเบราว์เซอร์ผู้ใช้
• px สำหรับ border, shadow และรายละเอียดเล็กๆ ที่ไม่ควร scale
• em สำหรับ padding/margin ที่ควร scale ตาม text size ของ component นั้นๆ
• vw/vh สำหรับ layout แบบ full-screen และ hero section
• % สำหรับความกว้างแบบ responsive ภายใน container

---

4. Color Contrast Checker: WCAG Accessibility

การเลือกสีที่ดูดีบนจอของคุณอาจยังไม่ผ่านมาตรฐาน WCAG accessibility — ซึ่งหมายความว่าผู้ใช้ที่มีสายตาพร่ามัว, ตาบอดสี หรือจอเก่าอาจอ่านเนื้อหาของคุณไม่ออก

Color Contrast Checker ของเราคำนวณ contrast ratio ระหว่างสีตัวหนังสือและสีพื้นหลัง พร้อมแสดงสถานะผ่าน/ไม่ผ่านสำหรับแต่ละระดับ WCAG:

ระดับ	อัตราส่วนที่ต้องการ	สำหรับ
AA (ตัวหนังสือปกติ)	4.5:1	ตัวหนังสือทั่วไป, ย่อหน้า
AA (ตัวหนังสือขนาดใหญ่)	3:1	ขนาด 18px+ หรือ 14px+ bold
AAA (ตัวหนังสือปกติ)	7:1	Accessibility ระดับสูง
AAA (ตัวหนังสือขนาดใหญ่)	4.5:1	ระดับสูง, ตัวหนังสือใหญ่

การผสมสีที่มักมีปัญหา:

ตัวหนังสือเทาอ่อนบนพื้นขาว: #999 บน #fff → ratio 2.85:1 ❌ ไม่ผ่าน AA
เทากลางบนขาว:               #767 บน #fff → ratio 4.48:1 ⚠ เกือบไม่ผ่าน
เทาเข้มบนขาว:               #595 บน #fff → ratio 5.74:1 ✅ ผ่าน AA

ตัวตรวจสอบแสดง live preview ของข้อความบนพื้นหลังเพื่อให้คุณเห็นสิ่งที่ผู้ใช้จะเห็นจริงๆ — ไม่ใช่แค่ตัวเลข

วิธีแก้ไขด่วนสำหรับการผสมสีที่ไม่ผ่าน:

• ทำสีตัวหนังสือให้เข้มขึ้น (ไม่ใช่ทำพื้นหลังให้อ่อนลง — นั่นลด contrast)
• เพิ่มขนาด font เพื่อให้เข้าเกณฑ์ "ตัวหนังสือขนาดใหญ่" (threshold ต่ำกว่า)
• เพิ่ม overlay มืดแบบกึ่งโปร่งใสบนรูปภาพที่มีข้อความซ้อนทับ

---

5. Color Palette Generator

การออกแบบระบบสีที่สอดคล้องกันจากสีแบรนด์เพียงสีเดียวต้องอาศัยความเข้าใจทฤษฎีสี Color Palette Generator ของเราสร้าง palette 4 แบบที่กลมกลืนกันจากสีพื้นฐานใดก็ได้:

Complementary: สีตรงข้ามบน color wheel สร้างคู่สีที่ vibrant และ contrast สูง เหมาะสำหรับ CTA

Analogous: สามสีที่อยู่ติดกันบน color wheel สร้าง palette ที่เข้ากันและไม่ตึงเครียด เหมาะสำหรับพื้นหลังและพื้นที่เนื้อหา

Triadic: สามสีที่เว้นระยะเท่ากัน สร้าง palette ที่ dynamic และสมดุล เหมาะสำหรับ data visualization

Monochromatic: tint และ shade ของสีเดียว สร้าง palette ที่เรียบร้อยและมืออาชีพ เหมาะสำหรับ dark mode / light mode

แต่ละ palette แสดงพร้อม hex code, RGB value และชื่อ CSS custom property ที่พร้อม copy

---

6. Color Format Converter: HEX ↔ RGB ↔ HSL

Design tool ส่งออกสีเป็น HEX แต่ CSS บางครั้งต้องการ RGB สำหรับ rgba() และ designer บางคนทำงานกับ HSL Color Format Converter ของเราแปลงระหว่างทุกรูปแบบทันที:

#6366f1
↕
rgb(99, 102, 241)
↕
hsl(239, 84%, 67%)
↕
hsb(239, 59%, 95%)  ← Photoshop/Figma HSB

ทำไม HSL จึงมักเป็นรูปแบบที่ใช้งานได้มากที่สุด:

• hsl(H, S%, L%) แยก hue, saturation และ lightness ออกจากกัน
• ต้องการสีที่อ่อนกว่า: เพิ่ม L%
• ต้องการสีที่เข้มกว่า: ลด L%
• ต้องการลด saturation: ลด S%
• สร้าง tint และ shade แบบ programmatic ได้ง่ายมาก

---

7. Tailwind CSS Converter: CSS ↔ Tailwind

หากคุณกำลังย้าย project มาใช้ Tailwind หรือทำงานกับ designer ที่เขียน CSS และต้องแปลเป็น utility class Tailwind CSS Converter ของเรารองรับทั้งสองทิศทาง

CSS → Tailwind:

/* Input */
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

<!-- Output -->
<div class="flex flex-col p-4 rounded-lg bg-white shadow-sm">

Tailwind → CSS: ทิศทางตรงข้าม — มีประโยชน์เมื่อต้องการทำความเข้าใจว่า Tailwind class ทำอะไรจริงๆ หรือเมื่อต้องการนำ style ออกไปใส่ใน component stylesheet

---

8. Color Picker: รับค่า HEX, RGB และ HSL จากสีใดก็ได้

สำหรับการเลือกสีเฉพาะและรับค่าในทุกรูปแบบพร้อมกัน Color Picker ของเรามี color wheel แบบสมบูรณ์พร้อม saturation/lightness selector พร้อม output แบบ real-time

ต่างจาก color picker ใน browser devtools ที่ใช้งานได้เฉพาะภายใน devtools เท่านั้น อันนี้พร้อมใช้งานตลอดเวลาและ copy ค่าในรูปแบบที่ต้องการได้เลย

---

รวมทุกอย่างเข้าด้วยกัน: CSS Workflow

ต่อไปนี้คือ workflow ทั่วไปจาก design สู่โค้ดโดยใช้ tools เหล่านี้:

1. เลือกสีแบรนด์ ด้วย Color Picker
2. สร้าง palette สมบูรณ์ ด้วย Color Palette Generator — รับ variant แบบ complementary และ monochromatic
3. ตรวจสอบทุกคู่ข้อความ/พื้นหลัง ว่าเป็นไปตาม WCAG ด้วย Color Contrast Checker
4. แปลงระหว่าง HEX/RGB/HSL ตามต้องการด้วย Color Format Converter
5. สร้างพื้นหลัง component ด้วย CSS Gradient Generator
6. เพิ่มความลึกให้ card และ modal ด้วย CSS Box Shadow Generator
7. แปลงหน่วย จาก design spec (px) เป็น CSS ที่ accessible (rem) ด้วย CSS Unit Converter
8. แปลเป็น Tailwind หาก project ใช้ utility class ด้วย Tailwind Converter

แต่ละขั้นตอนใช้เวลาไม่ถึงหนึ่งนาที ทั้ง workflow — ตั้งแต่สีแบรนด์ไปจนถึง CSS ที่พร้อม production — ใช้เวลาน้อยกว่าการค้นหาบน Stack Overflow เพียงครั้งเดียว