รูปแบบสีอธิบายแล้ว: HEX, RGB และ HSL

การแนะนำ

สีบนเว็บระบุในรูปแบบหลักสามแบบ: HEX (base-16 แดง เขียว น้ำเงิน), RGB (ทศนิยม 0–255 ต่อช่อง) และ HSL (hue, saturation, lightness) ทั้งสามอธิบายพื้นที่สี sRGB เดียวกัน แต่เปิดเผื้องหาต่างกัน: HEX และ RGB อิงฮาร์ดแวร์ HSL อิงมนุษย์ CSS สมัยใหม่รองรับ alpha ผ่าน HEX8, rgba() และ hsla()

ทีละขั้นตอน

1. ทำความเข้าใจสัญลักษณ์ HEX

   HEX เขียนแต่ละช่องเป็นเลขฐาน 16 สองหลัก: #RRGGBB 00 ปิดอยู่ FF (255) เข้มข้นเต็มที่ #FF0000 คือสีแดงล้วน, #00FF00 สีเขียวล้วน, #0000FF สีฟ้าล้วน, #FFFFFF สีขาว, #000000 สีดำ ชวเลข 4 หลัก #RGB ขยายเป็น #RRGGBB และ #RRGGBBAA เพิ่มอัลฟ่า (เช่น #FF573380 คืออัลฟ่า 50%)

2. ทำความเข้าใจสัญลักษณ์ RGB

   RGB ใช้ทศนิยม 0—55 ต่อช่องสัญญาณ: rgb(255, 87, 51) เหมือนกับ #FF5733 ฟังก์ชัน rgba() เพิ่ม 0— alpha: rgba(255, 87, 51, 0.5) มีความทึบแสง 50% RGB เทียบเท่ากับ HEX — มันเป็นเพียงทศนิยมแทนที่จะเป็นฐาน 16

3. ทำความเข้าใจสัญลักษณ์ HSL

   HSL ใช้เฉดสี (0—60° บนวงล้อสี: 0=แดง, 120=เขียว, 240=น้ำเงิน), ความอิ่มตัวของสี (0% = สีเทา, 100% = สีเต็ม) และความสว่าง (0% = สีดำ, 50% = ปกติ, 100% = สีขาว) hsl(11, 100%, 60%) เป็นสีส้มสดใส HSL ทำให้การสร้างสีอ่อน (เพิ่มความสว่าง) และเฉดสี (ความสว่างต่ำ) ของเฉดสีเดียวกันเป็นเรื่องเล็กน้อย

4. แปลงระหว่างรูปแบบ

   HEX→RGB: แยกวิเคราะห์แต่ละคู่เป็นฐาน 16 RGB→HEX: แปลงแต่ละช่องให้เป็นฐาน 2 หลัก -16 RGB→HSL: คำนวณสูงสุด/นาทีของช่องสัญญาณปกติ ความเบา = (สูงสุด+นาที)/2 ความอิ่มตัวของสีขึ้นอยู่กับความสว่าง เฉดสีคือมุมของช่องสัญญาณที่โดดเด่น ใช้ Color Converter ของเราเพื่อทำทั้งหมดนี้ได้ทันที

5. เลือกรูปแบบที่เหมาะสมสำหรับงาน

   ใช้ HEX เพื่อความกะทัดรัดในโทเค็นการออกแบบและเนื้อหา ใช้ RGB/rgba() เมื่อคุณต้องการแก้ไขหรือทำให้ช่องเคลื่อนไหว ใช้ HSL/HSLA เมื่อสร้างชุดสี เฉดสี หรือรูปแบบต่างๆ ของธีม การปรับความสว่าง 10% นั้นง่ายกว่าการให้เหตุผลเกี่ยวกับเดลต้า RGB มาก

ตัวอย่าง

ปัญหาทั่วไป

• การผสมตัวเลข 3 หลักและ 6 หลัก HEX: #F00 และ #FF0000 มีสีเดียวกัน แต่ parser บางตัวยอมรับเพียงแบบฟอร์มเดียวเท่านั้น ปรับมาตรฐานให้เป็นรหัส 6 หลักเพื่อหลีกเลี่ยงเรื่องไม่คาดคิด
• ลืมไปว่า HSL ความสว่าง 50% ไม่ใช่ 'ความสว่างครึ่งหนึ่ง': ที่ความอิ่มตัว 100% ความสว่าง 50% จะเป็นเฉดสีที่บริสุทธิ์ หากเกิน 50% จะเปลี่ยนเป็นสีขาว ส่วนหากต่ำกว่า 50% จะเปลี่ยนเป็นสีดำ '50% สีเทา' คือ hsl(0, 0%, 50%)
• ความสับสนของช่องอัลฟ่า: #RRGGBBAA (HEX8) ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ แต่ไม่รองรับในเบราว์เซอร์รุ่นเก่า rgba()/hsla() มีการรองรับที่กว้างขึ้น ทดสอบสภาพแวดล้อมเป้าหมายเสมอ
• พื้นที่สีไม่ตรงกัน: HEX, RGB และ HSL ล้วนอธิบาย sRGB หากคุณแปลงเป็น/จาก P3 หรือ Lab/OKLCH (ใช้ในจอแสดงผลสมัยใหม่) การคัดลอกช่องสัญญาณที่ไร้เดียงสาจะสร้างสีที่ไม่ถูกต้อง — ให้ใช้ไลบรารีสีที่เหมาะสม

เคล็ดลับ

• ใช้ HSL เมื่อออกแบบจานสี: เลือกเฉดสีหนึ่งสี จากนั้นเปลี่ยนความสว่าง (เช่น 30/50/70%) และความอิ่มตัวของสี (เช่น 60/80/100%) เพื่อสร้างเฉดสีและสีอ่อนที่สอดคล้องกัน
• สำหรับการเข้าถึง ให้ตรวจสอบอัตราส่วนคอนทราสต์กับพื้นหลัง —WCAG AA ต้องใช้ 4.5:1 สำหรับข้อความปกติ AAA 7:1 ใช้โปรแกรมแปลงสีของเราเพื่อคำนวณความสว่างและคอนทราสต์สัมพัทธ์
• ชอบ CSS color-mix() หรือ oklch() สมัยใหม่สำหรับการแก้ไขที่สม่ำเสมอในการรับรู้ —RGB การแก้ไขสามารถผ่านสีเทาโคลนเมื่อผสมสีคู่ตรงข้าม
• เมื่อสร้างการไล่ระดับสี ให้แปลงจุดสิ้นสุดเป็นรูปแบบเดียวกันก่อน โดยการผสม HEX และ HSL ในการประกาศการไล่ระดับสีเดียวอาจทำให้เกิดจุดกึ่งกลางที่ไม่คาดคิดได้

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

• Color ตัวแปลง — แปลง colors between HEX, RGB and HSL ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
• CSS Gradient Generator — Create beautiful CSS linear and radial gradients with a visual preview. Copy the CSS code instantly.
• CSS Box Shadow Generator — Design CSS box shadows visually with live preview. Adjust offset, blur, spread, color and inset.
• Image ตัวปรับขนาด — ปรับขนาด images ในเบราว์เซอร์ของคุณ. Set custom dimensions or maintain aspect ratio. Download the resized image.
• Base64 Image ตัวแปลง — แปลง between Base64 and image ในเบราว์เซอร์ของคุณ. Free, online, ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด bidirectional conversion with preview.
• Case ตัวแปลง — แปลง text between UPPERCASE, lowercase, Title Case, camelCase, PascalCase, snake_case and kebab-case.
• Add Watermark to Image ออนไลน์ฟรี — ออนไลน์ฟรี add watermark to image ออนไลน์ฟรี. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
• App icono ตัวสร้าง — App icono ตัวสร้าง ออนไลน์ฟรี. ประมวลผลข้อมูลทันทีในเบราว์เซอร์ของคุณ. ไม่อัปโหลด ไม่ต้องสมัครสมาชิก เป็นส่วนตัวทั้งหมด.

คำแนะนำที่เกี่ยวข้อง

• Markdown เทียบกับ HTML: ควรใช้แบบใดสำหรับเนื้อหา?

อ้างอิง

• MDN Web Docs —CSS color values — CSS color formats reference
• W3C —CSS Color Module Level 4 — Specification for color(), oklch(), and modern color functions
• WCAG 2.1 —Contrast (Minimum) — Accessibility contrast ratio requirements