สี & หน่วยวัด

สองสิ่งที่เราใช้ในเกือบทุก CSS rule คือ สี และ หน่วยวัด CSS มีวิธีเขียนหลายรูปแบบสำหรับทั้งคู่ บทเรียนนี้จะแมปแต่ละรูปแบบกับเครื่องมือที่คุณรู้จักอยู่แล้วจาก Figma เพื่อให้เลือกใช้ได้ถูกต้องโดยไม่ต้องเดา

สี (Colors)

Named colors — สีมีชื่อ

CSS รู้จักชื่อสีเป็นภาษาอังกฤษหลายร้อยชื่อ เช่น red, white, black, coral, tomato, steelblue พิมพ์ได้เร็วที่สุดและอ่านเข้าใจได้ทันที

ข้อจำกัดคือต้องใช้ชื่อที่ CSS กำหนดไว้เท่านั้น ซึ่งมีน้อยกว่าสเปกตรัม 16 ล้านสีอย่างมาก เหมาะสำหรับ prototype หรือสีพื้นฐานทั่วไป

color: coral;
background-color: white;

Hex — รูปแบบเดียวกับ Figma

#7C3AED คือรูปแบบเดียวกับที่แสดงใน color picker ของ Figma เลย! สีแบบ hex ขึ้นต้นด้วย # ตามด้วยตัวเลข 6 ตัว โดยแต่ละคู่เก็บค่าสีหนึ่งช่อง: สองตัวแรกคือ แดง สองตัวกลางคือ เขียว สองตัวสุดท้ายคือ น้ำเงิน — ในระบบเลขฐาน 16

คุณไม่จำเป็นต้องเข้าใจเลขฐาน 16 เพียงแค่ copy ค่าจาก Figma แล้ว paste ลงใน CSS ได้เลย

background-color: #7C3AED;   /* ม่วง */
color: #ffffff;              /* ขาว */
border-color: #e2e8f0;       /* เทาอ่อน */

RGB — ตรงกับ slider ใน Figma

rgb(124, 58, 237) ตรงกับช่องตัวเลข R / G / B ใน Figma โดยตรง แต่ละค่าอยู่ในช่วง 0–255: 0 คือไม่มีสีนั้นเลย 255 คือเต็มที่

background-color: rgb(124, 58, 237);
color: rgb(255, 255, 255);   /* ขาว */

เพิ่มช่อง alpha (ความโปร่งใส) ด้วย RGBA ค่าที่สี่อยู่ระหว่าง 0 (โปร่งใสสนิท) ถึง 1 (ทึบสนิท) — เหมือน opacity ใน Figma หารด้วย 100

background-color: rgba(124, 58, 237, 0.15);   /* opacity 15% */

HSL — วิธีที่ดีไซเนอร์คิดถึงสี

hsl(263, 70%, 46%) คือรูปแบบสีที่ใกล้เคียงกับวิธีคิดของดีไซเนอร์มากที่สุด:

H — Hue (0–360): ตำแหน่งบนวงล้อสี 0 = แดง, 120 = เขียว, 240 = น้ำเงิน, 360 = แดงอีกครั้ง
S — Saturation (0–100%): ความสดของสี 0% คือเทา 100% คือสดเต็มที่
L — Lightness (0–100%): ความสว่าง 0% คือดำ 50% คือสีจริง 100% คือขาว

อยากได้สีอ่อนกว่าเดิม? เพิ่ม L อยากให้หม่นลง? ลด S — ง่ายกว่าการเดาค่า hex มาก

เพิ่ม HSLA สำหรับความโปร่งใสแบบเดียวกับ RGBA:

background-color: hsl(263, 70%, 46%);
color: hsla(263, 70%, 46%, 0.2);   /* opacity 20% */

หน่วยวัด (Units)

px — pixel แบบแน่นอน

1px คือหนึ่ง device-independent pixel ไม่เปลี่ยนแปลงตามสิ่งใด — คงที่เหมือนค่า pixel ใน property panel ของ Figma

ใช้ px สำหรับสิ่งที่ไม่ควรปรับขนาด เช่น border, box shadow, รายละเอียดเล็กๆ

border: 1px solid #e2e8f0;
border-radius: 4px;

หลีกเลี่ยง px สำหรับ font size และ spacing เพราะไม่สนใจการตั้งค่า font ของ browser ผู้ใช้ ซึ่งกระทบ accessibility

rem — สัมพันธ์กับ root font size

rem ย่อมาจาก root em มีค่าสัมพันธ์กับ font size ที่ตั้งไว้ใน <html> element — โดยทั่วไปคือ 16px ใน browser ทุกตัว ดังนั้น:

1rem = 16px
1.5rem = 24px
0.75rem = 12px

ข้อดีสำคัญ: ถ้าผู้ใช้ตั้ง font size ใน browser ของตัวเองเป็น 20px เพื่อความสะดวกในการอ่าน 1rem จะกลายเป็น 20px โดยอัตโนมัติ

ใช้ rem สำหรับ font size และ vertical spacing เป็น default ที่ดีที่สุดสำหรับ typography และ padding/margin

font-size: 1rem;       /* 16px ที่ค่าเริ่มต้น */
margin-bottom: 1.5rem;
padding: 1rem 1.5rem;

% — เปอร์เซ็นต์ของ element แม่

50% คือครึ่งหนึ่งของขนาด property เดียวกันของ element แม่ 100% คือเต็มความกว้างของ container

เหมาะมากสำหรับ width ใน responsive layout — card ที่กำหนด width: 100% จะเต็ม container บนทุกหน้าจอ

width: 100%;
max-width: 640px;

em — สัมพันธ์กับ font size ของ element นั้นเอง

em มีค่าสัมพันธ์กับ font size ของ element ปัจจุบัน (ไม่ใช่ root) ถ้า element มี font-size: 20px แล้ว 1em = 20px สำหรับ element นั้น

em มีประโยชน์สำหรับ padding และ margin ที่ต้องการให้สเกลตามขนาดตัวอักษร เช่น ปุ่มที่ padding ซ้ายขวาควรสัมพันธ์กับขนาดข้อความบนปุ่ม

font-size: 1.25rem;
padding: 0.5em 1em;   /* สเกลตาม font-size ของ element นี้ */

สรุปง่ายๆ

สิ่งที่กำลังกำหนดขนาด	หน่วยที่แนะนำ
Font size	`rem`
Spacing แนวตั้ง (padding, margin)	`rem`
ความกว้าง (width)	`%`
Border, shadow, รายละเอียดเล็ก	`px`
Padding ที่ต้องสัมพันธ์กับตัวอักษร	`em`

<div class="palette-page">
  <h2>Color Formats</h2>
  <div class="swatches">
    <div class="swatch named">
      <div class="color-block"></div>
      <span class="label">named</span>
      <code>coral</code>
    </div>
    <div class="swatch hex">
      <div class="color-block"></div>
      <span class="label">hex</span>
      <code>#7C3AED</code>
    </div>
    <div class="swatch rgb">
      <div class="color-block"></div>
      <span class="label">rgb</span>
      <code>rgb(14,165,233)</code>
    </div>
    <div class="swatch hsl">
      <div class="color-block"></div>
      <span class="label">hsl</span>
      <code>hsl(142,71%,45%)</code>
    </div>
    <div class="swatch alpha">
      <div class="color-block"></div>
      <span class="label">rgba</span>
      <code>rgba(124,58,237,0.3)</code>
    </div>
  </div>

  <h2>Units in Action</h2>
  <div class="units-demo">
    <div class="unit-box px-box">px<br/><small>border: 2px</small></div>
    <div class="unit-box rem-box">rem<br/><small>font-size: 1.25rem</small></div>
    <div class="unit-box pct-box">%<br/><small>width: 60%</small></div>
    <div class="unit-box em-box">em<br/><small>padding: 0.5em 1em</small></div>
  </div>
</div>

แผง CSS แก้ไขได้โดยตรง ลองทดสอบดู:

เปลี่ยน .hex .color-block { background: #7C3AED; } เป็นสี hex ใดๆ จาก Figma
ปรับค่า lightness ใน hsl — ลอง hsl(142, 71%, 70%) เพื่อดูสีพาสเทล
เปลี่ยน .pct-box { width: 60%; } เป็น 100% หรือ 30% แล้วดูว่า box ปรับขนาดอย่างไร

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใช้ px ทุกที่แม้แต่ font-size ทั้งที่ควรใช้ rem เพื่อรองรับ user ที่ปรับขนาด font ของ browser
ใส่สีจาก Figma เป็น RGB โดยไม่เผื่อ opacity/alpha
ไม่ตรวจสอบว่าสีเดียวกัน render ต่างกันบนจอแต่ละแบบ

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ค่าสีและตัวเลข” ตายตัว แต่ developer ต้องเลือกหน่วย (px/rem/%/vw) ที่เหมาะกับแต่ละ property เพื่อให้ responsive ทำงานถูกต้อง

💡 ตัวอย่างจากของจริง

Tailwind CSS (ที่ทีมอย่าง Airbnb และ Linear ใช้ภายใน) กำหนด spacing และ color scale เป็นชุดค่าคงที่ที่ตรงกับ design token ใน Figma