สี Tailwind CSS: พาเลต OKLCH ของ v4 สีกำหนดเอง และระดับสี

โครงสร้างพาเลตสีของ Tailwind

พาเลตค่าเริ่มต้นใน Tailwind v4.3 มีสเกลที่มีชื่อ 26 ชุด สิบเจ็ดชุดเป็นสีมีความสด ได้แก่ red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink และ rose อีกเก้าชุดเป็นสีกลาง ได้แก่ slate, gray, zinc, neutral และ stone จาก v3 บวกกับ mauve, olive, mist และ taupe ที่เพิ่มเข้ามาระหว่าง v4 และยังมี black กับ white อีกด้วย

ทุกสเกลมี 11 ระดับเหมือนกัน คือ 50, 100, 200 ไปจนถึง 900 และ 950 ระดับ 50 เกือบเป็นสีขาว ระดับ 950 เกือบเป็นสีดำ คลาสประกอบด้วยยูทิลิตี สี และระดับ เช่น bg-blue-500, text-rose-700, border-zinc-200

เลขระดับบอกตำแหน่งในสเกล ไม่ใช่ค่าความสว่าง ระดับ 500 มีความสว่าง OKLCH ตั้งแต่ 55.1% ใน gray ไปจนถึง 79.5% ใน yellow นี่คือเหตุผลที่ yellow-500 กับ blue-500 ให้ผลต่างกันมากเมื่อใช้เป็นสีข้อความ

สีน้ำเงินของ Tailwind: ทุกระดับพร้อม OKLCH, HEX และคอนทราสต์

นี่คือสเกลสีน้ำเงินทั้งชุดตามที่ Tailwind v4 กำหนด คอลัมน์ HEX คือสี sRGB ที่ใกล้ที่สุด ได้จากการลดความสดโดยคงความสว่างและฮิวไว้ ค่าคอนทราสต์เป็นค่า WCAG 2 ที่วัดจาก HEX นั้น

blue-600 คือระดับแรกที่ผ่าน 4.5:1 สำหรับข้อความเนื้อหาบนพื้นขาว blue-500 ผ่านบนพื้นดำที่ 5.58:1 แต่ไม่ผ่านบนพื้นขาวที่ 3.76:1 ไม่มีระดับสีน้ำเงินใดที่ผ่าน 4.5:1 ได้ทั้งสองพื้น โหมดสว่างและโหมดมืดจึงต้องใช้ระดับต่างกัน

ระดับสี Tailwind ไหนผ่าน WCAG AA บนพื้นขาว

ระดับที่สว่างที่สุดที่ผ่านเกณฑ์ขึ้นอยู่กับฮิว orange, amber, yellow, lime และกลุ่ม green, teal, cyan และ sky ยังสว่างอยู่ที่ระดับ 500 จึงต้องใช้ 700 สำหรับข้อความเนื้อหา ส่วน red, blue, violet, purple, fuchsia, pink และ rose ผ่านที่ 600 และ indigo ผ่านตั้งแต่ 500 yellow เป็นกรณีพิเศษ แม้แต่ yellow-600 ก็ไม่ผ่านเกณฑ์ข้อความขนาดใหญ่ โดยได้แค่ 2.93:1

ความสว่างทำนายผลได้แม่นกว่าเลขระดับ จากทั้ง 286 สี ทุกระดับที่มีความสว่าง OKLCH ต่ำกว่า 58% ผ่าน 4.5:1 บนพื้นขาว และทุกระดับที่สูงกว่า 59.2% ไม่ผ่าน อ่านค่า L ในค่าของคลาส แล้วคุณจะรู้คำตอบก่อนทดสอบ

สีกลางทุกชุดยกเว้น olive ผ่านที่ 500 olive-500 มีความสว่าง 58% และฮิวอมเหลือง จึงได้เพียง 4.25:1 ข้อความสี gray-500 กับ olive-500 จึงใช้แทนกันไม่ได้

สี Tailwind v3 เทียบกับ v4

v3 กำหนดสีเป็นค่า HEX ใน tailwind.config.js ภายใต้ theme.extend.colors ส่วน v4 ย้ายการตั้งค่ามาไว้ใน CSS สีเป็นตัวแปรธีมภายใน @theme เขียนด้วย OKLCH และเปิดให้ใช้เป็นตัวแปร CSS ดังนั้น var(--color-blue-500) จึงใช้ได้ทั้งใน CSS ธรรมดาและสไตล์แบบอินไลน์

ตัวพาเลตถูกปรับจูน ไม่ได้ออกแบบใหม่ทั้งหมด เมื่อแปลงเป็น OKLCH แล้ว blue-500 ของ v3 (#3b82f6) มีความสว่างและฮิวตรงกับ blue-500 ของ v4 ทุกประการ มีเพียงความสดที่เพิ่มขึ้นจาก 0.188 เป็น 0.214 ระดับอื่นของสเกลสีน้ำเงินก็เป็นแบบเดียวกัน ยกเว้น blue-400 ที่เข้มขึ้นอีก 0.7 จุด คอนทราสต์แทบไม่ขยับ แต่สีดูสดขึ้น

ความสดที่เพิ่มขึ้นนี้เกินขอบเขต sRGB สี v4 จำนวน 94 จาก 286 สีอยู่นอก sRGB แต่อยู่ใน Display P3 และทั้งหมดเป็นสีมีความสด สเกล orange มี 9 จาก 11 ระดับที่อยู่นอก sRGB ส่วน blue มี 4 ระดับ (200 ถึง 500) บนจอ P3 คุณจะเห็นสีเต็ม ๆ บนจอ sRGB เบราว์เซอร์จะแสดงสีที่ใกล้เคียง v4 รองรับ Safari 16.4, Chrome 111 และ Firefox 128 ขึ้นไป ซึ่งเข้าใจ oklch() ทั้งหมด

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

วิธีเพิ่มสีกำหนดเองใน Tailwind v4

ประกาศตัวแปรในเนมสเปซ --color- ภายใน @theme ส่วนที่อยู่หลัง --color- จะกลายเป็นชื่อคลาส เช่น --color-brand จะได้ bg-brand, text-brand, border-brand, ring-brand และยูทิลิตีสีอื่น ๆ ทั้งหมด รวมถึง var(--color-brand) ใน CSS รองรับทั้ง HEX, rgb(), hsl() และ oklch()

ถ้าต้องการแทนที่พาเลตค่าเริ่มต้นแทนการต่อยอด ให้รีเซ็ตเนมสเปซก่อนด้วย --color-*: initial แล้วกำหนดเฉพาะสีที่ต้องการ ยูทิลิตีจะถูกสร้างเฉพาะคลาสที่ใช้จริง โปรเจกต์ส่วนใหญ่จึงเก็บค่าเริ่มต้นไว้

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

--color-brand ตัวเดียวก็พอสำหรับสีเน้นหนึ่งสี แต่เมื่อไรที่ต้องการสถานะ hover พื้นหลังสีอ่อน หรือโหมดมืด ให้กำหนดสเกลเต็มที่มีระดับเป็นตัวเลข

วิธีสร้างสเกลสีเองครบ 50 ถึง 950

สเกลด้านล่างสร้างจาก #e4572e ความสว่าง 63.7% ของสีนี้ตรงกับระดับ 500 สีแบรนด์จึงอยู่ที่ 500 พอดี ระดับอื่นตามเส้นโค้งความสว่างของ Tailwind คงฮิวเดิม ความสดสูงสุดที่ 500 และ 600 แล้วค่อย ๆ ลดลงไปทางปลายทั้งสองด้าน และทุกระดับอยู่ใน sRGB ค่า HEX จึงตรงเป๊ะ

เช่นเดียวกับฮิวโทนอุ่นของ Tailwind เอง สเกลนี้ต้องใช้ 600 สำหรับข้อความเนื้อหาบนพื้นขาว brand-500 ได้ 3.68:1 พอสำหรับข้อความขนาดใหญ่และไอคอนเท่านั้น

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

คัดลอกค่าไปวางโดยคงความละเอียดทั้งหมด การปัดความสว่างเหลือ 0.1% และความสดเหลือทศนิยมสามตำแหน่งจะดัน brand-600 ออกนอก sRGB เล็กน้อย ซึ่งไม่เป็นอันตราย แต่จะไม่ตรงกับค่า HEX อีกต่อไป

ตัวปรับความทึบอย่าง bg-blue-500/50 ทำงานอย่างไร

เครื่องหมายทับหลังสีใช้กำหนดค่าอัลฟา bg-blue-500/50 คือ blue-500 ที่ 50% v3 คอมไพล์เป็น rgb(59 130 246 / 0.5) ซึ่งใช้ได้เฉพาะสีที่ Tailwind แยกเป็นช่องสีได้ สีกำหนดเองที่เป็นตัวแปร CSS ต้องใช้รูปแบบพิเศษ rgb(var(--brand) / <alpha-value>)

v4 คอมไพล์ตัวปรับเป็น color-mix() ใน Oklab โดยผสมสีกับ transparent วิธีนี้ใช้ได้กับทุกสี ทั้งตัวแปรธีม ค่าอิสระอย่าง bg-[#e4572e]/50 และตัวแปร CSS ของคุณเอง

ความทึบส่งผลต่อคอนทราสต์ บนพื้นขาว blue-500/50 จะแสดงเป็น #95bfff และ blue-500/10 เป็น #eaf2ff ข้อความสี blue-600 อ่านได้ที่ 5.25:1 แต่ text-blue-600/60 ลดลงเหลือ 2.62:1 และไม่ผ่านแม้แต่เกณฑ์ข้อความขนาดใหญ่

• blue-500#2b7fff
• blue-500/50 บนพื้นขาว#95bfff
• blue-500/20 บนพื้นขาว#d5e5ff
• blue-500/10 บนพื้นขาว#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

วิธีหาคลาส Tailwind ที่ใกล้ที่สุดสำหรับ HEX ใดก็ได้

เทียบ HEX กับทั้ง 286 ระดับด้วยระยะห่างตามการรับรู้ใน Oklab (ΔEOK) ถ้าต่ำกว่าราว 0.02 จะแทบมองไม่เห็นความต่างเมื่อวางข้างกัน ใช้คลาส Tailwind แทนสีของคุณได้ ถ้าสูงกว่าราว 0.04 ให้เพิ่มสีกำหนดเองแทน

ตารางแสดงผลการจับคู่จริง ค่า HEX เก่าของ v3 จะจับคู่กลับมาที่คลาสเดียวกันใน v4 ส่วนสีส้มแบรนด์ทั่วไปอย่าง #ff5733 จะตกอยู่ระหว่าง orange-600 กับ red-400 หน้า Tailwind ของ PickShade ค้นหาแบบนี้ให้ได้กับทุกสี และแสดงคลาสที่ใกล้ที่สุดสามคลาส

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