วงล้อสี
เลือกสีบนวงล้อ ปรับแต่งอย่างละเอียดบนพื้นที่ความอิ่มตัวและความสว่าง แล้วอ่านค่ากลับมาในทุกฟอร์แมตที่โปรเจกต์ของคุณใช้ ตั้งแต่ #RRGGBB ไปจนถึง oklch() เครื่องมือนี้ยังทำในสิ่งที่เครื่องมือเลือกสีอื่นมักมองข้าม: วงล้อสามรูปแบบ รวมถึงวงล้อ RYB แบบจิตรกรดั้งเดิม ความกลมกลืนของสีที่สร้างจานสีให้เอง ช่องความทึบ (อัลฟา) และการส่งออกจานสีทั้งชุดด้วยคลิกเดียวเป็น CSS variables, SCSS หรือ JSON ทุกอย่างคำนวณในเบราว์เซอร์ของคุณเอง
RYB vs RGB: วงล้อสามแบบ ไม่ใช่แค่แบบเดียว
ตัวเลือก โหมดวงล้อ จะเปลี่ยนรูปแบบการจัดเรียงโทนสีบนวงล้อ:
- HSV และ HSL คือวงล้อดิจิทัล: โทนสีเรียงตามวิธีที่จอผสมแสง ทั้งสองต่างกันตรงพื้นที่สี่เหลี่ยม มุมที่สว่างที่สุดของ HSV คือโทนสีบริสุทธิ์ ส่วน HSL วางโทนสีบริสุทธิ์ไว้กลางความสว่างแล้วเติมสีขาวไว้เหนือมัน
- RYB (จิตรกร) จัดเรียงโทนสีตามที่ศิลปินเรียนรู้กันมา: สีแดง เหลือง และน้ำเงินเป็นแม่สี โดยมีสีส้ม เขียว และม่วงอยู่ระหว่างกลาง (ดู RYB color model บนวิกิพีเดีย ภาษาอังกฤษ) คุณค่าในทางปฏิบัติของมันแสดงออกในความกลมกลืนสี บนวงล้อ RYB สีตรงข้ามของสีแดงคือ สีเขียว และสีตรงข้ามของสีน้ำเงินคือ สีส้ม ซึ่งเป็นคู่สีตามหลักเม็ดสีคลาสสิก วงล้อดิจิทัลจะจับคู่สีแดงกับสีฟ้าอมเขียวแทน หากจานสี “ตรงข้าม” จากเครื่องมือเลือกสีทั่วไปเคยดูผิดสายตาคุณมาก่อน นี่คือเหตุผล
ความกลมกลืนสีที่สร้างจานสีให้คุณ
เลือกกฎภายใต้ ความกลมกลืนของสี แล้ววงล้อจะทำเครื่องหมายสีคู่หูให้ ซึ่งจะปรากฏเป็นจานสีพร้อมใช้:
- สีตรงข้าม: สีตรงข้ามหนึ่งสี คอนทราสต์ที่แรงที่สุด ใช้เป็นสีเน้นเดี่ยวคู่กับสีหลักของแบรนด์
- สีตรงข้ามแบบแยก: สองสีข้างเคียงของสีตรงข้าม คอนทราสต์เกือบเท่ากันแต่จัดสมดุลได้ง่ายกว่ามาก
- สีสามเส้า: สามโทนสีที่เว้นระยะเท่ากัน มีชีวิตชีวาแต่มั่นคง เมื่อให้สีหนึ่งเป็นสีหลักและใช้อีกสองสีอย่างประหยัด
- สีสี่เส้า (สี่เหลี่ยม): สี่โทนสี ชุดสีที่หลากหลายสำหรับภาพประกอบและการแสดงข้อมูล จัดสมดุลได้ยากในงานอินเทอร์เฟซ
- สีข้างเคียง: สีที่อยู่ติดกัน ผสมผสานได้นุ่มนวลสำหรับพื้นหลังและการไล่ระดับสี
- สีเอกรงค์: โทนสีเดียวในระดับความสว่างต่างกัน ตัวเลือกที่ปลอดภัยที่สุดสำหรับสถานะปุ่ม (hover, active, disabled)
แผงจานสีคัดลอกชุดสีทั้งหมดในคลิกเดียว ในรูปแบบที่คุณเลือก: HEX, RGB, HSL, OKLCH แบบธรรมดา, CSS custom properties พร้อมวาง (--color-1: …), ตัวแปร SCSS หรือ JSON สำหรับส่งต่อให้โค้ด หากอยากตรวจสอบว่าจานสียังคงคอนทราสต์ไว้สำหรับคนที่แยกโทนสีได้ยากหรือไม่ ให้จับภาพหน้าจอแล้วแปลงเป็นขาวดำ
แปลง HEX, RGB, HSL, OKLCH และ CMYK: วางอะไรก็ได้ อ่านได้ทุกอย่าง
ช่องป้อนข้อมูลรับรูปแบบสีแทบทุกชนิดที่คุณป้อนเข้าไป: #f80, #ff8800, hex 8 หลักพร้อมอัลฟา, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 หรือชื่อสี CSS อย่าง rebeccapurple ไม่ว่าจะป้อนอะไรเข้ามา ผลลัพธ์ที่ซิงค์กันเจ็ดแบบจะแสดงกลับมา: HEX, RGB, HSL, HSV, LCH, OKLCH และ CMYK แต่ละแบบมีปุ่มคัดลอกของตัวเอง
ลากแถบเลื่อน ความทึบ (อัลฟา) ใต้ตัวอย่าง แล้วผลลัพธ์จะสลับเป็นรูปแบบโปร่งใส #RRGGBBAA, rgba(), hsla() พร้อมแสดงตัวอย่างบนพื้นลายตารางหมากรุกเพื่อให้คุณตัดสินความโปร่งใสได้ทันที
ค้นหาโทเค็น Tailwind CSS ที่ใกล้เคียงที่สุด
ป้ายช่วยเหลือสองอันใต้ตัวอย่างจะบอกชื่อสีให้คุณ: ชื่อสี CSS ที่ใกล้เคียงที่สุด (มีประโยชน์สำหรับต้นแบบด่วนๆ) และ โทเค็น Tailwind ที่ใกล้เคียงที่สุด เช่น orange-500 เพื่อให้คุณอยู่ในดีไซน์ซิสเต็มของตัวเองได้โดยไม่ต้องคิดค่าเฉพาะกิจขึ้นมาเอง คลิกที่ป้ายใดก็ได้เพื่อคัดลอก
เรื่องนี้ตอบคำถามที่เกิดขึ้นทุกครั้งที่ส่งมอบงานออกแบบ: ดีไซเนอร์ส่งโค้ดสี hex มาให้ คลาส Tailwind ตัวไหนใกล้เคียงที่สุด? การจับคู่คำนวณจากพาเลตเริ่มต้นของ Tailwind CSS 4 เอง (ดู เอกสาร Tailwind ภาษาอังกฤษ) ดังนั้นโทเค็นที่ได้จึงนำไปวางในชื่อคลาสได้ทันที
ควรใช้ฟอร์แมตไหน?
| ฟอร์แมต | ชื่อเต็ม | ใช้เมื่อไหร่? |
|---|---|---|
| HEX | Hexadecimal | ค่าเริ่มต้นของเว็บ กะทัดรัด รองรับทุกที่ คัดลอกง่าย 8 หลักเพิ่มอัลฟาได้ |
| RGB | Red, Green, Blue | วิธีที่หน้าจอคิด สามช่องแสง ค่าตั้งแต่ 0 ถึง 255 ฟอร์แมตที่ API และโค้ด canvas ส่วนใหญ่ต้องการ |
| HSL | Hue, Saturation, Lightness | สำหรับปรับด้วยตา “สว่างขึ้นอีกนิด” หรือ “อิ่มตัวน้อยลง” คือการเปลี่ยนตัวเลขค่าเดียว |
| HSV | Hue, Saturation, Value | ซอฟต์แวร์กราฟิก โมเดลเบื้องหลังตัวเลือกสีใน Photoshop และ GIMP |
| LCH | Lightness, Chroma, Hue | สอดคล้องกับการรับรู้ การเปลี่ยนตัวเลขเท่ากันดูเป็นการเปลี่ยนแปลงทางสายตาเท่ากัน ซึ่ง HSL แค่แสร้งทำได้ |
| OKLCH | OK Lightness, Chroma, Hue | ตัวเลือก CSS สมัยใหม่ แก้ปัญหาการเลื่อนโทนสีน้ำเงินที่ LCH มี รองรับในเบราว์เซอร์ปัจจุบันทั้งหมด และเหมาะกับดีไซน์โทเค็น |
| CMYK | Cyan, Magenta, Yellow, Key | แนวทางสำหรับงานพิมพ์ การแปลงค่าโดยประมาณสำหรับสื่อสารกับโรงพิมพ์ ค่าสุดท้ายจริงขึ้นอยู่กับโปรไฟล์สีของเครื่องพิมพ์ |
เหตุผลที่ OKLCH สอดคล้องกับการรับรู้มากกว่าโมเดลรุ่นเก่า Björn Ottosson ผู้ออกแบบพื้นที่สี Oklab อธิบายไว้ในบทความต้นฉบับ (ภาษาอังกฤษ) ไวยากรณ์และการรองรับในเบราว์เซอร์สรุปไว้ในเอกสาร MDN (ภาษาอังกฤษ) ส่วนหลักการทำงานของโมเดลงานพิมพ์อธิบายไว้ในบทความ CMYK บนวิกิพีเดีย
รายละเอียดเล็กๆ ที่ช่วยประหยัดเวลา
- ประวัติจดจำเอง สี 24 สีล่าสุดที่คุณใช้งานจะคงอยู่แม้รีเฟรชหน้าเว็บ เก็บไว้ใน local storage ของเบราว์เซอร์คุณเท่านั้น ไม่มีการอัปโหลดที่ใดเลย
- เครื่องมือหยดสี (Eyedropper) ในเบราว์เซอร์ที่รองรับ EyeDropper API (Chrome และ Edge) คุณสามารถเลือกสีจากที่ใดก็ได้บนหน้าจอ แม้จะอยู่นอกหน้าต่างเบราว์เซอร์ ต้องการดูดสีจากภาพถ่ายหรือไฟล์โลโก้? ใช้เครื่องมือดูดสีจากรูปภาพ ได้เลย
- ควบคุมด้วยคีย์บอร์ด วงล้อและพื้นที่ความอิ่มตัวตอบสนองต่อปุ่มลูกศร ช่วยให้ปรับแต่งสีทีละขั้นเล็กๆ ได้
- ค่าที่ตั้งไว้ล่วงหน้า ครอบคลุมสีพื้นฐานทั่วไปเมื่อคุณแค่ต้องการจุดเริ่มต้นอย่างรวดเร็ว
คำถามที่พบบ่อย
แปลง OKLCH เป็น HEX ได้อย่างไร?
วางค่าoklch() ลงในช่อง OKLCH แล้วผลลัพธ์อื่นๆ ทั้งหมดจะอัปเดตทันที รวมถึง HEX ด้วย ทำงานย้อนกลับได้เช่นกัน พิมพ์โค้ด HEX แล้วอ่านค่า oklch() ที่เทียบเท่ากลับมา ข้อควรระวังอย่างหนึ่งคือ OKLCH สามารถอธิบายสีที่อยู่นอกขอบเขตสี sRGB ได้ ซึ่งสีเหล่านั้นจะถูกตัดให้อยู่ในขอบเขตที่ sRGB แสดงได้ ดังนั้นค่า oklch() ที่มีความอิ่มตัวสูงมากจะดูไม่เหมือนกับรูปแบบ HEX ของมันทุกประการบนจอที่รองรับ wide gamut
ใช้ oklch() ในโค้ด CSS จริงได้อย่างปลอดภัยหรือไม่?
ได้ Chrome, Edge, Firefox และ Safari เวอร์ชันปัจจุบันทั้งหมดรองรับoklch() และมันได้กลายเป็นสัญกรณ์ที่นิยมใช้สำหรับดีไซน์โทเค็น (Tailwind CSS 4 กำหนดจานสีทั้งหมดด้วยฟอร์แมตนี้) สำหรับเบราว์เซอร์เก่ามาก ให้เตรียมค่า HEX สำรองไว้บรรทัดก่อนหน้า เครื่องมือนี้ให้ทั้งสองค่าแก่คุณ