ฟังก์ชันสี CSS สมัยใหม่: rgba(), hsl(), oklch() และอื่นๆ

ฟังก์ชันสี CSS สมัยใหม่: rgba(), hsl(), oklch() และอื่นๆ

ฟังก์ชันสี CSS ได้พัฒนาไปอย่างมาก สิ่งที่เคยเป็นตัวเลือกระหว่าง hex, rgb() และ hsl() ได้กลายเป็นระบบนิเวศที่สมบูรณ์ของปริภูมิสีและฟังก์ชันการจัดการที่ให้นักพัฒนาควบคุมการแสดงสี การประมาณค่าในช่วง และการช่วยการเข้าถึงได้อย่างที่ไม่เคยมีมาก่อน

คู่มือนี้ครอบคลุมทุกฟังก์ชันสี CSS หลักที่มีให้ใช้งานในปี 2026 ตั้งแต่ที่คุ้นเคยไปจนถึงล้ำสมัย

RGB และ RGBA: ม้าศึก

ฟังก์ชัน rgb() กำหนดสีโดยใช้โมเดลสีแบบบวก แดง-เขียว-น้ำเงิน (red-green-blue) มีอยู่ใน CSS ตั้งแต่ CSS1 และรองรับในทุกเบราว์เซอร์ที่เคยสร้างมา

/* ไวยากรณ์เดิมที่คั่นด้วยคอมมา */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* ไวยากรณ์สมัยใหม่ที่คั่นด้วยช่องว่าง (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* ค่าเปอร์เซ็นต์ */
color: rgb(100% 0% 0%);

การเปลี่ยนแปลงสำคัญใน RGB สมัยใหม่

CSS Color Level 4 แนะนำการปรับปรุงที่สำคัญสองประการ:

1. คั่นด้วยช่องว่างแทนคอมมา — ฟังก์ชัน rgb() ตอนนี้รับค่าที่คั่นด้วยช่องว่างหรือเครื่องหมายทับ
2. ไวยากรณ์อัลฟาที่รวมเป็นหนึ่ง — นามแฝง rgba() ถูกเลิกใช้ (แต่ยังรองรับ) rgb() ตอนนี้รับช่องอัลฟ่าโดยตรง

ไวยากรณ์สมัยใหม่นี้รองรับในทุกเบราว์เซอร์ที่เผยแพร่ตั้งแต่ปี 2020 สำหรับโปรเจกต์ใหม่ ใช้ไวยากรณ์สมัยใหม่และข้ามนามแฝง rgba() ไปเลย

ช่องสัญญาณ RGB

แต่ละช่องสัญญาณ RGB รับ:

• จำนวนเต็มตั้งแต่ 0 ถึง 255
• เปอร์เซ็นต์ตั้งแต่ 0% ถึง 100%
• คีย์เวิร์ด none สำหรับช่องสัญญาณที่ขาดหายไป (CSS Color Level 4)

คีย์เวิร์ด none มีประโยชน์เมื่อประมาณค่าในช่วงสี — มันบอกให้เบราว์เซอร์ไม่ต้องประมาณค่าในช่วงช่องสัญญาณนั้นโดยเฉพาะ

HSL และ HSLA: การควบคุมสีที่เข้าใจง่าย

HSL ย่อมาจาก Hue (เฉดสี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) ใช้ระบบพิกัดทรงกระบอกที่เข้ากับวิธีที่มนุษย์คิดเกี่ยวกับสีอย่างเป็นธรรมชาติ

/* H คือมุมเฉดสี (0-360), S คือความอิ่มตัว (0-100%), L คือความสว่าง (0-100%) */
color: hsl(0 100% 50%);        /* แดงบริสุทธิ์ */
color: hsl(0 100% 50% / 0.5);  /* แดงที่ความทึบ 50% */

/* มุมเฉดสีพร้อมหน่วย */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

ตารางอ้างอิงมุมเฉดสี

| Hue | สี | Hex | |-----|---------|----------| | 0 | แดง | #FF0000 | | 30 | ส้ม | #FF8000 | | 60 | เหลือง | #FFFF00 | | 120 | เขียว | #00FF00 | | 180 | ฟ้า | #00FFFF | | 240 | น้ำเงิน | #0000FF | | 300 | บานเย็น | #FF00FF |

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

HWB: การผสมกับสีขาวและสีดำ

HWB (Hue, Whiteness, Blackness — เฉดสี, ความขาว, ความดำ) เป็นทางเลือกที่เข้าใจง่ายกว่า HSL คุณเลือกเฉดสี จากนั้นเพิ่มความขาวและความดำเพื่อสร้างสีอ่อน (tint) และสีเข้ม (shade)

color: hwb(0 0% 0%);    /* แดงบริสุทธิ์ */
color: hwb(0 40% 0%);   /* แดงอ่อน (เพิ่มสีขาว) */
color: hwb(0 0% 40%);   /* แดงเข้ม (เพิ่มสีดำ) */
color: hwb(0 20% 20%);  /* โทน (ขาว + ดำ) */

HWB ง่ายกว่า HSL สำหรับกรณีใช้งานหนึ่งโดยเฉพาะ: การสร้างรูปแบบสีอ่อนและสีเข้มของสีแบรนด์ คุณไม่ต้องคิดถึงเส้นโค้งความอิ่มตัว — แค่เพิ่มสีขาวหรือสีดำ

การรองรับเบราว์เซอร์: HWB รองรับในทุกเบราว์เซอร์สมัยใหม่ (Chrome 101+, Firefox 96+, Safari 15+)

LAB และ LCH: ปริภูมิที่สม่ำเสมอในการรับรู้

LAB (Lightness, A-axis, B-axis) และ LCH (Lightness, Chroma, Hue) เป็นปริภูมิสีที่สม่ำเสมอในการรับรู้ ซึ่งหมายความว่าระยะทางยูคลิดระหว่างค่าสีสองค่าสอดคล้องกับความแตกต่างที่มองเห็นได้ — สิ่งที่ RGB และ HSL ไม่สามารถทำได้

color: lab(50% 50 0);        /* แดงปานกลาง */
color: lch(50% 50 0);        /* สีเดียวกันในรูปทรงกระบอก */

เหตุผลที่ความสม่ำเสมอในการรับรู้สำคัญ:

• การไล่ระดับสี — การประมาณค่าในช่วงใน LAB หรือ LCH สร้างการเปลี่ยนผ่านที่นุ่มนวลและเป็นธรรมชาติโดยไม่มี "โซนขุ่นมัว" ที่การไล่ระดับสี RGB สร้างขึ้น
• การวัดความแตกต่างของสี — Delta E (มาตรวัดความแตกต่างในการรับรู้) มีความหมายในปริภูมิ LAB
• การช่วยการเข้าถึง — ความสม่ำเสมอในการรับรู้ช่วยทำนายว่าผู้ใช้ที่มีภาวะบกพร่องในการมองเห็นสีจะรับรู้สีอย่างไร

ข้อจำกัด: LAB และ LCH สามารถสร้างสีที่อยู่นอกขอบเขต sRGB ได้ สีเหล่านี้จะถูกตัด (clip) เมื่อแสดงบนหน้าจอ sRGB แต่สามารถเข้าถึงได้บนจอแสดงผลที่มีขอบเขตกว้างกว่า (DCI-P3, Rec. 2020)

การรองรับเบราว์เซอร์: รองรับใน Chrome 111+, Firefox 113+, Safari 15+ ไม่รองรับ IE หรือ Edge รุ่นเก่า

OKLAB และ OKLCH: มาตรฐานการรับรู้สมัยใหม่

OKLCH เป็นเวอร์ชันปรับปรุงของ LCH ที่พัฒนาโดย Bjorn Ottosson แก้ไขความไม่สม่ำเสมอในการรับรู้ใน LCH โดยเฉพาะสำหรับเฉดสีน้ำเงิน OKLCH ได้กลายเป็นปริภูมิสีเริ่มต้นที่แนะนำสำหรับโปรเจกต์ CSS ใหม่ในปี 2025-2026

color: oklch(60% 0.2 30);
/* Lightness: 0-100%, Chroma: 0-~0.4, Hue: 0-360 */

เหตุผลที่ OKLCH เป็นปริภูมิสีที่ดีที่สุดสำหรับ CSS

1. ความสม่ำเสมอในการรับรู้ที่ดีที่สุด — การเปลี่ยนแปลงตัวเลขที่เท่ากันสร้างการเปลี่ยนแปลงทางสายตาที่เท่ากันในทุกเฉดสี
2. ความสว่างที่คาดการณ์ได้ — สีที่ค่าความสว่างเดียวกันดูสว่างเท่ากันจริงๆ
3. ไม่มีการไล่ระดับสีขุ่นมัว — การประมาณค่าในช่วงยังคงสะอาดตลอดช่วงเฉดสีทั้งหมด
4. ปลอดภัย sRGB โดยค่าเริ่มต้น — ค่า OKLCH ส่วนใหญ่สร้างสี sRGB ที่อยู่ในขอบเขต
5. ช่องสัญญาณที่เข้าใจง่าย — เหมือน HSL แต่มีความแม่นยำในการรับรู้จริง

OKLCH ในทางปฏิบัติ

/* การสร้างสเกลสีที่สมดุลด้วย OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

สังเกตว่าแต่ละขั้นตอนเปลี่ยนแปลงด้วยค่าความสว่างที่ใกล้เคียงกัน (20 จุดเปอร์เซ็นต์) เนื่องจาก OKLCH มีความสม่ำเสมอในการรับรู้ ขั้นตอนเหล่านี้จึงดูมีระยะห่างเท่ากันสำหรับสายตามนุษย์ — สิ่งที่ทำได้ยากด้วย HSL

การรองรับเบราว์เซอร์: OKLCH รองรับใน Chrome 111+, Firefox 113+, Safari 15.4+ ได้กลายเป็นปริภูมิสีสมัยใหม่ที่ได้รับการแนะนำมากที่สุดอย่างรวดเร็ว

Color-Mix: ผสมสีใน CSS

ฟังก์ชัน color-mix() ผสมสองสีในปริภูมิสีที่ระบุ:

/* ผสมแดงและน้ำเงินเท่าๆ กันใน sRGB */
color: color-mix(in srgb, red, blue);

/* สีหลัก 30%, สีขาว 70% — สีอ่อน (tint) */
color: color-mix(in oklch, var(--primary) 30%, white);

/* ผสมด้วยปริภูมิสีที่รับรู้เพื่อผลลัพธ์ที่นุ่มนวล */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

พารามิเตอร์ in <color-space> ให้คุณควบคุมปริภูมิการประมาณค่าในช่วง สำหรับกรณีส่วนใหญ่ in oklch ให้ผลลัพธ์ทางสายตาที่ดีที่สุด

กรณีการใช้งาน:

• สร้างสีอ่อนและสีเข้มโดยไม่ต้องใช้ฟังก์ชันของพรีโพรเซสเซอร์
• สร้างรูปแบบส่วนประกอบจากโทเค็นสีเดียว
• สร้างสถานะ hover และ active แบบไดนามิก
• สร้างเอฟเฟกต์คล้ายการไล่ระดับสีในฟังก์ชันเดียว

Relative Color Syntax: แก้ไขสีที่มีอยู่

CSS Color Level 4 อนุญาตให้คุณสร้างสีใหม่จากสีที่มีอยู่โดยการแก้ไขช่องสัญญาณแต่ละช่อง:

--primary: #3366cc;

/* ใช้ช่องสัญญาณ OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* ใช้ช่องสัญญาณ HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

คีย์เวิร์ด from <color> แกะช่องสัญญาณของสีต้นทางลงในช่องสัญญาณของฟังก์ชันปลายทาง ซึ่งคุณสามารถปรับแต่งด้วยการคำนวณทางคณิตศาสตร์

คีย์เวิร์ดช่องสัญญาณต่อปริภูมิสี

แต่ละปริภูมิสีเปิดเผยคีย์เวิร์ดช่องสัญญาณเฉพาะ:

| ปริภูมิสี | คีย์เวิร์ด | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

ภาพรวมการรองรับเบราว์เซอร์ (2026)

| ฟังก์ชัน | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | ทั้งหมด | ทั้งหมด | ทั้งหมด | ทั้งหมด | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Relative color syntax | 111+ | 113+ | 16.2+ | 111+ |

ฟังก์ชันสีสมัยใหม่ทั้งหมดปลอดภัยที่จะใช้ในปี 2026 สำหรับโปรเจกต์ที่ไม่ต้องการการรองรับ Internet Explorer สำหรับความเข้ากันได้ที่กว้างขึ้น ใช้ขั้นตอนการ build ที่แปลงไวยากรณ์สมัยใหม่เป็น hex หรือ rgb() แบบดั้งเดิม

คำแนะนำเชิงปฏิบัติ

• สำหรับโปรเจกต์ที่มีอยู่ — HSL ยังคงเป็นสมดุลที่ดีที่สุดระหว่างความสามารถในการอ่านและความสามารถ
• สำหรับโปรเจกต์ใหม่ — ใช้ OKLCH เป็นปริภูมิสีหลักของคุณเพื่อความแม่นยำในการรับรู้
• สำหรับการไล่ระดับสี — ประมาณค่าในช่วงใน OKLCH เสมอเพื่อหลีกเลี่ยงการเปลี่ยนผ่านที่ขุ่นมัว
• สำหรับระบบการออกแบบ — เก็บสีพื้นฐานใน OKLCH สร้างรูปแบบด้วย color-mix() หรือ relative syntax
• สำหรับ canvas/WebGL — ใช้ RGB ซึ่งเป็นเนทีฟกับไปป์ไลน์การเรนเดอร์

บทสรุป

ฟังก์ชันสี CSS สมัยใหม่ได้เปลี่ยนแปลงสิ่งที่คุณสามารถทำได้กับสีบนเว็บ OKLCH ให้ความสม่ำเสมอในการรับรู้ที่ทำให้การออกแบบระบบสีคาดการณ์ได้ color-mix() และ relative color syntax ขจัดความต้องการฟังก์ชันสีของพรีโพรเซสเซอร์ เมื่อรวมกันแล้ว เครื่องมือเหล่านี้ให้พลังด้านสีแบบเดียวกับที่เครื่องมือออกแบบมีให้มาหลายปี — ตอนนี้โดยตรงในเบราว์เซอร์

ใช้ตัวแปลงสีออนไลน์ฟรีของเราเพื่อแปลงระหว่างรูปแบบสี CSS สมัยใหม่ทั้งหมดรวมถึง OKLCH, LAB, HWB และ HEX/RGB/HSL แบบคลาสสิก