ตัวแปลงสี OKLCH – CSS Color 4, ตัวสร้างจานสี Tailwind v4

วิธีใช้ตัวแปลงสี OKLCH

1. 1

   ป้อนค่าสี

   พิมพ์หรือวางค่าในรูปแบบที่รองรับ: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) หรือ oklab(0.6 -0.056 -0.169) เครื่องมือจะซิงค์รูปแบบอื่นๆ ทั้งหมดทันที

2. 2

   ปรับละเอียดด้วยสไลเดอร์ L/C/H/อัลฟา

   ลากสไลเดอร์ความสว่าง (L), โครมา (C), สี (H) หรืออัลฟา สไลเดอร์โครมาแสดงเครื่องหมายขอบเขตแกมัต sRGB เพื่อให้คุณทราบเสมอว่าเมื่อสีเกินขอบเขตการแสดงผลมาตรฐาน

3. 3

   ตรวจสอบคำเตือนแกมัตหากปรากฏ

   หากสี OKLCH ของคุณอยู่นอกแกมัต sRGB แบนเนอร์คำเตือนสีอำพันจะแสดงค่าเดิมและผลลัพธ์ที่แมปด้วย toGamut ของ CSS Color 4 ที่ใช้สำหรับการแสดงผล

4. 4

   สร้างจานสี Tailwind v4

   ส่วนจานสี OKLCH ของ Tailwind v4 จะสร้างขั้นตอนสี 50–950 สำหรับสีปัจจุบันของคุณโดยอัตโนมัติ ตามตารางความสว่างอย่างเป็นทางการของ Tailwind คลิกคัดลอกเพื่อวางบล็อก @theme โดยตรงลงใน CSS ของคุณ

เอกสารอ้างอิง

• W3C CSS Color Level 4 – oklch()

  ข้อกำหนด W3C ที่กำหนดสัญกรณ์สี OKLCH และอัลกอริทึมการแมปแกมัต

• Culori – ไลบรารีสี JavaScript

  ไลบรารีโอเพนซอร์สที่ขับเคลื่อนการแปลง OKLCH การแมป toGamut และการแก้ไขค่าเชิงการรับรู้ในเครื่องมือนี้

• Evil Martians – OKLCH ใน CSS: ทำไมต้องเลิกใช้ RGB และ HSL?

  คู่มือครอบคลุมที่อธิบายข้อดีของ OKLCH เหนือ RGB และ HSL สำหรับงานสีในยุคปัจจุบัน

• Tailwind CSS v4 – จานสีเริ่มต้น

  เอกสารจานสีอย่างเป็นทางการของ Tailwind รวมถึงค่าความสว่าง OKLCH ที่ใช้ในตัวสร้างจานสีนี้

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

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

OKLCH คืออะไรและทำไมฉันควรใช้แทน HEX หรือ HSL?

OKLCH (ความสว่าง, โครมา, สี) คือพื้นที่สีที่สม่ำเสมอเชิงการรับรู้ที่อิงตามโมเดล Oklab ต่างจาก HEX หรือ HSL ตรงที่การเปลี่ยนแปลงตัวเลขที่เท่ากันใน OKLCH ทำให้เกิดความแตกต่างที่รับรู้ได้เท่ากัน ทำให้เหมาะอย่างยิ่งสำหรับการออกแบบจานสีที่เข้าถึงได้ การสร้างไล่ระดับสีที่ราบรื่น และการสร้างสเกลสี Tailwind v4 ที่สม่ำเสมอ นอกจากนี้ OKLCH ยังรองรับใน CSS Color Level 4 ซึ่งเป็นมาตรฐานใหม่ที่ได้รับการยอมรับในเบราว์เซอร์ทุกตัว

ฉันจะแปลง HEX เป็น OKLCH ได้อย่างไร?

วางค่า HEX (เช่น #3b82f6) ลงในช่องป้อนข้อมูล HEX แล้วช่อง OKLCH จะอัปเดตทันทีด้วยสัญกรณ์เทียบเท่า oklch(0.6 0.18 250) รูปแบบอื่นๆ ทั้งหมด — OKLab, RGB และ HSL — ก็ซิงค์พร้อมกันด้วย ไม่ต้องทำอะไรเพิ่มเติม การแปลงเกิดขึ้นโดยอัตโนมัติและทันทีโดยไม่ต้องรีโหลดหน้า

'นอกแกมัต sRGB' หมายความว่าอะไรและสีจะเกิดอะไรขึ้น?

สี OKLCH บางสี — โดยเฉพาะค่าโครมาสูง — เกินขอบเขตพื้นที่สี sRGB ที่จอแสดงผลส่วนใหญ่ใช้ เมื่อเกิดเหตุการณ์นี้ เครื่องมือจะใช้อัลกอริทึม toGamut ของ CSS Color 4 เพื่อหาสี sRGB ที่แสดงผลได้ใกล้เคียงที่สุด แบนเนอร์คำเตือนสีอำพันจะปรากฏขึ้นแสดงค่าเดิมที่นอกแกมัตพร้อมกับผลลัพธ์ที่แมปแล้ว เพื่อให้คุณเข้าใจกระบวนการแปลงอย่างโปร่งใส

ตัวสร้างจานสี OKLCH ของ Tailwind v4 ทำงานอย่างไร?

ตัวสร้างใช้ตารางความสว่างอย่างเป็นทางการของ Tailwind v4 (50=0.971, 100=0.945, ถึง 950=0.238) ที่ใช้กับสีและโครมาปัจจุบันของคุณ จะสร้างขั้นตอนสี 11 ขั้นตอนจากอ่อนถึงเข้มและส่งออกเป็นบล็อกโค้ด @theme { --color-brand-50: oklch(...); } ที่พร้อมวางลงใน CSS ของคุณ เพียงเลือกสีฐานแล้วจานสีจะถูกสร้างโดยอัตโนมัติ

ทำไมการแก้ไขค่า OKLCH จึงดูดีกว่า HSL สำหรับการไล่ระดับสี?

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

ตัวแปลง OKLCH นี้ฟรีและเป็นส่วนตัวหรือไม่?

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

OKLCH ของ CSS Color 4 ทำงานได้ในทุกเบราว์เซอร์หรือไม่?

ไวยากรณ์สี OKLCH (oklch()) รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2023 รวมถึง Chrome 111+, Firefox 113+, Safari 15.4+ และ Edge 111+ สำหรับเบราว์เซอร์รุ่นเก่า ให้ใช้ค่า HEX หรือ RGB สำรองที่ตัวแปลงนี้ให้มา คุณสามารถใช้ OKLCH ในการผลิตได้อย่างปลอดภัยโดยระบุค่าสำรองที่เหมาะสมสำหรับสภาพแวดล้อมรุ่นเก่าด้วย