ตัวแปลง OKLab เป็น OKLCH สำหรับค่าสี CSS ออนไลน์
ตัวแปลง OKLab เป็น OKLCH แปลงสี OKLab เป็น OKLCH ทันที และซิงก์ค่าทั้งสองฝั่งเมื่อคุณแก้ไขด้านใดด้านหนึ่ง รองรับการป้อนสีแบบยืดหยุ่น เช่น #abc, rgb(1 2 3 / 50%) และชื่อสี ดูตัวอย่างสี คัดลอกบรรทัด CSS พร้อมใช้ และตรวจสอบคำเตือนสีนอกขอบเขตเมื่อสีอยู่นอก sRGB
ตัวแปลง OKLab เป็น OKLCH เปลี่ยนสีจาก OKLab เป็น OKLCH และแสดงผลลัพธ์ทันที คุณสามารถแก้ไขด้านใดด้านหนึ่ง อีกด้านจะอัปเดตสด เครื่องมือรับการป้อนสีแบบยืดหยุ่น ทั้ง #abc, rgb(1 2 3 / 50%) และชื่อสี คุณจึงใช้รูปแบบสี CSS ทั่วไปได้นอกเหนือจากค่า OKLab
หลังป้อนสี ดูตัวอย่างสีและบรรทัด CSS พร้อมใช้ ตัวแปลงยังแสดงคำเตือนสีนอกขอบเขตเมื่อสีอยู่นอก sRGB คุณสามารถปรับตัวเลือกที่มี แล้วคัดลอกค่าที่ต้องการ การแปลงพื้นฐานไม่จำเป็นต้องใช้ชื่อหรือการตั้งค่าตัวเลือกเฉพาะ
OKLab แสดงสีด้วยความสว่างและส่วนประกอบสีสองค่า ขณะที่ OKLCH ใช้ความสว่าง ความอิ่มตัวของสี และเฉดสี ทั้งสองอธิบายสีเหมือนกัน แต่ระบบพิกัดที่ต่างกันทำให้รูปแบบหนึ่งสะดวกกว่าสำหรับขั้นตอนงานหนึ่ง แปลง OKLab เป็น OKLCH เมื่อเครื่องมือ ตัวอย่างโค้ด หรือการส่งงานต้องการ OKLCH หรือใช้การแก้ไขสดเปรียบเทียบค่าทั้งสอง ตัวอย่างสีและคำเตือนขอบเขตช่วยตรวจสอบด้วยตาก่อนคัดลอกผลลัพธ์
การแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมด ข้อมูลของคุณถูกประมวลผลบนอุปกรณ์ของคุณ ไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ หลังโหลดหน้าแล้วตัวแปลงใช้งานออฟไลน์ได้ จึงใช้ต่อได้โดยไม่ต้องเชื่อมต่อ ใช้งานฟรี
ตัวแปลงสีในเบราว์เซอร์นี้มีประโยชน์สำหรับนักพัฒนาและ DevOps ที่เตรียม CSS ตรวจสอบค่าสี หรือย้ายข้อมูลระหว่างขั้นตอนงาน และช่วยทุกคนที่ต้องตรวจสอบการแปลงสีก่อนแชร์หรือใช้ผลลัพธ์
ขั้นตอนที่ 1: วางสี OKLab ลงในช่องป้อน คุณลองใช้รูปแบบสีที่รองรับ เช่น #abc, rgb(1 2 3 / 50%) หรือชื่อสีก็ได้
ขั้นตอนที่ 2: แก้ไขค่าด้าน OKLab หรือ OKLCH อีกด้านจะอัปเดตสด เปรียบเทียบการแสดงผลทั้งสองรูปแบบได้ง่าย
ขั้นตอนที่ 3: ปรับตัวเลือกที่มีได้หากต้องการ ตัวแปลงยังแสดงตัวอย่างสีให้คุณดูสีด้วยตา
ขั้นตอนที่ 4: ตรวจผลลัพธ์หาคำเตือนสีนอกขอบเขต ซึ่งจะปรากฏเมื่อสีอยู่นอก sRGB
ขั้นตอนที่ 5: คัดลอกค่า OKLCH หรือบรรทัด CSS พร้อมใช้ไปใช้ในโค้ด เอกสาร หรือบันทึกของคุณ
กรณีการใช้งาน: ย้ายข้อมูล OKLab ไปยังระบบที่รับ OKLCH แปลงสีแล้วคัดลอกผลลัพธ์ไปใช้ในเครื่องมือหรือขั้นตอนถัดไป
กรณีการใช้งาน: ตรวจสอบว่าค่า OKLCH ที่ได้มาตรงกับสี OKLab ต้นฉบับหรือไม่ การแก้ไขสองทางสดทำให้เปรียบเทียบได้ง่าย
กรณีการใช้งาน: เตรียมตัวอย่างสี OKLab สำหรับเอกสาร ตั๋วงาน หรือข้อความ commit บรรทัด CSS พร้อมคัดลอกช่วยให้แชร์ค่าที่ใช้ได้จริง
กรณีการใช้งาน: ตรวจความถูกต้องของการแปลงสีก่อนวางในโค้ด ดูตัวอย่างสีและคำเตือนสีนอกขอบเขตก่อน
กรณีการใช้งาน: ดูสีขณะปรับค่า ตัวอย่างสีเป็นตัวอ้างอิงภาพขณะคุณแก้ไขด้านใดด้านหนึ่ง
กรณีการใช้งาน: แปลงสีที่เขียนเป็นค่า hex, RGB หรือชื่อสีเป็น OKLCH การแยกวิเคราะห์ที่ยืดหยุ่นมีประโยชน์เมื่อสีต้นฉบับไม่ได้เขียนเป็นค่า OKLab