CSS Academy · บทเรียน

ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL

เรียนรู้รูปแบบสีของ CSS ทั้งหมด ได้แก่ สีที่มีชื่อ รหัสฐานสิบหก ฟังก์ชัน rgb() และ hsl()

บทเรียน 1 จาก 413 ขั้นตอน

ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

รูปแบบสีของ CSS

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

สีที่มีชื่อเรียก

CSS กำหนด สีที่มีชื่อเรียกมากกว่า 140 สี เช่น red tomato และ cornflowerblue สีเหล่านี้เหมาะสำหรับการสร้างต้นแบบอย่างรวดเร็ว แต่มีความแม่นยำในการกำหนดสีจำกัด

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

สีแบบเลขฐานสิบหก

สีแบบ เลขฐานสิบหกใช้เครื่องหมาย # ตามด้วยเลขฐานสิบหก 6 หลัก หรือ 3 หลักเมื่อเขียนแบบย่อ เลขแต่ละคู่แทนค่าสีแดง สีเขียว และสีน้ำเงิน โดยมีค่าตั้งแต่ 0–255

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

สีแบบเลขฐานสิบหกพร้อมอัลฟา

เพิ่มเลขฐานสิบหกอีก 1 คู่ หรือเพิ่มอีก 1 หลักเมื่อเขียนแบบย่อ เพื่อกำหนด ความโปร่งใสด้วยค่าอัลฟา:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

สีแบบ RGB

ฟังก์ชันสี RGB รับจำนวนเต็มสามค่า ตั้งแต่ 0–255 สำหรับช่องสีแดง สีเขียว และสีน้ำเงิน รูปแบบนี้อ่านได้ง่ายมากและสะดวกต่อการทำความเข้าใจเมื่อนำไปจัดการด้วยโปรแกรม

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

สีแบบ RGBA

เพิ่มพารามิเตอร์ตัวที่สี่ ซึ่งมีค่าตั้งแต่ 0–1 ให้กับ rgb() เพื่อกำหนดความโปร่งใสด้วยค่าอัลฟา รูปแบบนี้เทียบเท่ากับ rgb() รุ่นใหม่ที่ใช้ไวยากรณ์เครื่องหมายทับ

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

สีแบบ HSL

ฟังก์ชัน HSL กำหนดสีด้วยค่าสีสัน ตั้งแต่ 0–360° ความอิ่มตัว ตั้งแต่ 0–100% และความสว่าง ตั้งแต่ 0–100% จึงเข้าใจได้ง่ายกว่ามากเมื่อต้องสร้างชุดสีและรูปแบบสีต่าง ๆ

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

สีแบบ HSLA

เช่นเดียวกับ rgba() ฟังก์ชัน hsla() จะเพิ่มช่องอัลฟาให้กับสี CSS สมัยใหม่อนุญาตให้ใช้เครื่องหมายทับคั่นแทนได้:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

การสร้างรูปแบบสีด้วย HSL

HSL เหมาะอย่างยิ่งสำหรับการสร้างสีอ่อนและสีเข้ม ให้คงค่าสีสันและความอิ่มตัวไว้ แล้วเปลี่ยนค่าความสว่าง:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

คีย์เวิร์ด currentColor

currentColor เป็นค่าแบบไดนามิกที่เท่ากับค่าคุณสมบัติ color ปัจจุบันขององค์ประกอบ ให้ใช้ค่านี้เพื่อให้เส้นขอบ เงา หรือสีเติมของ SVG รับช่วงสีข้อความโดยอัตโนมัติ

<a href="#">Link with currentColor border</a>

คีย์เวิร์ดความโปร่งใส

คีย์เวิร์ด transparent มีค่าเท่ากับ rgba(0,0,0,0) ซึ่งโปร่งใสทั้งหมด เหมาะสำหรับเอฟเฟกต์เมื่อวางตัวชี้ เช่น การเปลี่ยนจากโปร่งใสไปเป็นสีหนึ่งอย่างต่อเนื่อง

<button>Transparent background</button>

ตรวจสอบความเข้าใจ

รูปแบบสีใดทำให้การสร้างเฉดสีอ่อนและสีเข้มของสีสันเดียวกันทำได้ง่ายที่สุด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

CSS มีรูปแบบสีแบบมีชื่อเรียก แบบเลขฐานสิบหก แบบ RGB และแบบ HSL โดย HSL เหมาะสำหรับการปรับแต่งสีด้วยโปรแกรม ทุกรูปแบบรองรับช่องอัลฟาเพื่อกำหนดความโปร่งใส ส่วน currentColor และ transparent เป็นคีย์เวิร์ดพิเศษที่มีประโยชน์

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL”

เรียนรู้รูปแบบสีของ CSS ทั้งหมด ได้แก่ สีที่มีชื่อ รหัสฐานสิบหก ฟังก์ชัน rgb() และ hsl() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy