Typography & Colors

1. ระบบสีใน CSS คืออะไร

CSS กำหนดสีได้หลายรูปแบบ เช่น hex, rgb, rgba และ hsl ทุกรูปแบบสามารถใช้กับ property อย่าง color และ background-color ได้ เหตุผลที่มีหลายระบบสีเพราะแต่ละแบบถนัดคนละงาน hex สั้นและพบได้บ่อย rgb อ่านเป็นค่าสีแดง-เขียว-น้ำเงิน rgba เพิ่มความโปร่งใส ส่วน hsl คิดเป็น hue, saturation, lightness จึงปรับโทนสว่างมืดได้ง่าย

2. Mental model: ผสมสีคนละภาษา

ลองนึกว่าแต่ละ format คือภาษาที่อธิบายสีเดียวกัน hex เหมือนรหัสย่อ rgb เหมือนบอกปริมาณแม่สี 3 ตัว rgba คือ rgb ที่เพิ่มความโปร่งใส ส่วน hsl เหมือนบอกเฉดสี ความสด และความสว่าง ซึ่งมักคิดตามงานออกแบบได้ง่ายกว่า

• 1. ใช้ color เมื่ออยากเปลี่ยนสีข้อความ
• 2. ใช้ background-color เมื่ออยากเปลี่ยนสีพื้นหลัง
• 3. เลือก format สีตามสิ่งที่ต้องควบคุม เช่น opacity ให้ใช้ rgba

3. ตัวอย่าง syntax

.title {
  color: #2563eb;
}

.notice {
  background-color: rgba(37, 99, 235, 0.12);
}

.badge {
  background-color: hsl(217, 91%, 60%);
  color: white;
}

4. Recap

• hex กระชับและใช้บ่อย
• rgb อธิบายสีด้วย red, green, blue
• rgba เพิ่ม alpha เพื่อทำสีโปร่งใส
• hsl เหมาะกับการปรับ hue, saturation และ lightness
• color ใช้กับข้อความ ส่วน background-color ใช้กับพื้นหลัง

Lab 1: เปลี่ยนสีข้อความด้วย hex

เป้าหมาย: ใช้ hex กับ color โจทย์: 1. กำหนด .page-title ให้มี color: #2563eb

Lab 2: ใช้ rgb กับสีพื้นหลัง

เป้าหมาย: ใช้ rgb กับ background-color โจทย์: 1. กำหนด .note ให้มี background-color: rgb(219, 234, 254)

Lab 3: ทำพื้นหลังโปร่งใสด้วย rgba

เป้าหมาย: ใช้ rgba เพื่อเพิ่ม alpha หรือความโปร่งใส โจทย์: 1. กำหนด .soft-note ให้มี background-color: rgba(37, 99, 235, 0.14)

Lab 4: ใช้ hsl กับป้ายข้อความ

เป้าหมาย: ใช้ hsl เพื่อกำหนดสีจาก hue, saturation และ lightness โจทย์: 1. กำหนด .badge ให้มี background-color: hsl(217, 91%, 60%) 2. กำหนด .badge ให้มี color: white