เครื่องมือสีของ ToolDeck ช่วยให้คุณแปลงระหว่างรูปแบบสี ตรวจสอบอัตราส่วนความเปรียบต่างสำหรับการเข้าถึง สร้างชุดสี สร้าง CSS gradient และค้นหาชื่อสีหรือคลาส Tailwind ได้โดยตรงในเบราว์เซอร์ ตัวแปลงสีรองรับ HEX, RGB, HSL และ HSV ในทั้งสองทิศทาง ตัวตรวจสอบความเปรียบต่างทดสอบความสอดคล้องกับ WCAG 2.1 AA และ AAA ตัวสร้างชุดสีสร้างรูปแบบสีแบบ complementary, analogous, triadic และ tetradic จากสีพื้นฐานใดก็ได้ ตัวสร้าง CSS Gradient ส่งออกโค้ด linear และ radial gradient ที่พร้อมคัดลอก ตัวค้นหาชื่อสีจับคู่ค่าสีใดก็ได้กับชื่อสี CSS ที่ใกล้เคียงที่สุด และตัวค้นหาสี Tailwind แมปสีกับคลาส utility ของ Tailwind เครื่องมือทั้งหมดทำงานฝั่ง client โดยไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ
เครื่องมือสีคืออะไร?
เครื่องมือสีคือยูทิลิตี้ที่ช่วยให้นักพัฒนาและนักออกแบบทำงานกับค่าสีดิจิทัล สีทุกสีบนหน้าจอถูกเก็บในรูปแบบตัวเลข: สามช่องสำหรับ RGB (แดง เขียว น้ำเงิน), เลขฐานสิบหกสามหลักสำหรับชื่อย่อ CSS หรือมุมของสีบวกความอิ่มตัวและความสว่างสำหรับ HSL การแปลงระหว่างรูปแบบเหล่านี้ด้วยตนเองทำได้ช้าและเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะเมื่อต้องคำนึงถึงความโปร่งใส alpha หรือรูปแบบใหม่อย่าง OKLCH
นอกเหนือจากการแปลงรูปแบบ งานด้านสียังเกี่ยวข้องกับการทดสอบการเข้าถึง การสร้างชุดสี และการสร้าง gradient WCAG 2.1 กำหนดอัตราส่วนความเปรียบต่างขั้นต่ำ (4.5:1 สำหรับข้อความปกติที่ AA, 7:1 สำหรับ AAA) ซึ่งยากที่จะตรวจสอบด้วยตาเปล่า การสร้างรูปแบบสีที่กลมกลืนต้องการการคำนวณมุมที่แม่นยำบน HSL color wheel CSS gradient ต้องการไวยากรณ์ที่ถูกต้องสำหรับทิศทาง จุดหยุดสี และค่าสำรอง การทำสิ่งเหล่านี้ด้วยตนเองในระบบออกแบบที่มี token หลายสิบรายการจะเป็นเรื่องที่น่าเบื่อมาก
เครื่องมือสีทำให้งานเหล่านี้เป็นอัตโนมัติ รับสีในรูปแบบหนึ่ง คำนวณค่าทางคณิตศาสตร์ และส่งคืนผลลัพธ์ที่คุณต้องการ ไม่ว่าจะเป็นค่าที่แปลงแล้ว ผลการตัดสินการเข้าถึงแบบผ่าน/ไม่ผ่าน ชุดตัวอย่างสีที่กลมกลืน หรือโค้ด CSS เมื่อเครื่องมือทำงานในเบราว์เซอร์ คุณยังหลีกเลี่ยงการอัปโหลด design token ที่ละเอียดอ่อนไปยังบริการของบุคคลที่สามได้อีกด้วย
ทำไมต้องใช้เครื่องมือสีบน ToolDeck?
เครื่องมือสีของ ToolDeck ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ค่าสีไม่ออกจากอุปกรณ์ของคุณ ไม่จำเป็นต้องมีบัญชี และทุกเครื่องมือโหลดทันทีโดยไม่ต้องติดตั้งส่วนขยายหรือซอฟต์แวร์บนเดสก์ท็อป
🎨แปลงรูปแบบในขั้นตอนเดียว
วาง HEX code และรับค่า RGB, HSL และ HSV พร้อมกัน ไม่จำเป็นต้องเชื่อมต่อตัวแปลงหลายตัวหรือจำสูตรการแปลง
🔒รักษา design token ให้เป็นความลับ
การประมวลผลทั้งหมดเกิดขึ้นฝั่ง client สีแบรนด์ของคุณ การตัดสินใจเกี่ยวกับชุดสีที่ยังไม่ได้เผยแพร่ และค่าในระบบออกแบบภายในยังคงอยู่บนอุปกรณ์ของคุณ
♿ทดสอบการเข้าถึงได้ทันที
ตรวจสอบคู่สีพื้นหน้า/พื้นหลังใดก็ได้กับเกณฑ์ WCAG 2.1 AA และ AAA สำหรับทั้งข้อความปกติและข้อความขนาดใหญ่ รับอัตราส่วนความเปรียบต่างที่แน่นอน ไม่ใช่แค่ป้ายผ่าน/ไม่ผ่าน
⚡คัดลอกผลลัพธ์ที่พร้อมใช้ใน production
ทุกเครื่องมือส่งออกค่าที่คุณสามารถวางลงใน CSS, Tailwind config หรือช่องป้อนข้อมูลของเครื่องมือออกแบบได้โดยตรง ไม่จำเป็นต้องจัดรูปแบบใหม่
กรณีการใช้งานเครื่องมือสี
นี่คือหกสถานการณ์ทั่วไปที่เครื่องมือสีของ ToolDeck ช่วยประหยัดเวลา
การดูแลรักษา Design System
เมื่ออัปเดต design system คุณมักได้รับสีในรูปแบบ HEX จากนักออกแบบแต่ต้องการ HSL สำหรับ CSS custom properties
ตัวแปลงสี แปลงระหว่างรูปแบบเพื่อให้คุณเติมข้อมูลในไฟล์ token ได้โดยไม่ต้องคำนวณด้วยตนเอง
การตรวจสอบการเข้าถึง
ระหว่างการตรวจสอบความสอดคล้องกับ WCAG ทุกคู่ข้อความ/พื้นหลังต้องมีอัตราส่วนความเปรียบต่างขั้นต่ำ
ตัวตรวจสอบความเปรียบต่างสี แสดงอัตราส่วนที่แน่นอนและสถานะการผ่าน AA/AAA สำหรับทั้งขนาดข้อความปกติและขนาดใหญ่
การสำรวจชุดสีแบรนด์
เริ่มจากสีแบรนด์สีเดียว คุณต้องการตัวแปรสีเน้นและสีกลาง
ตัวสร้างชุดสี คำนวณความกลมกลืนแบบ complementary, analogous, triadic และ tetradic เพื่อให้คุณประเมินตัวเลือกก่อนตัดสินใจเลือกชุดสี
การออกแบบพื้นหลัง CSS
การสร้างส่วน hero หรือพื้นหลังการ์ดด้วย gradient ต้องการไวยากรณ์ CSS ที่ถูกต้องสำหรับมุม จุดหยุดสี และ vendor prefix
ตัวสร้าง CSS Gradient ให้คุณสร้าง gradient ด้วยภาพและคัดลอกโค้ดได้
การย้ายไปใช้ Tailwind
เมื่อย้ายโปรเจกต์ไปใช้ Tailwind CSS คุณต้องแมปค่า HEX หรือ RGB ที่มีอยู่ไปยังคลาส Tailwind utility ที่ใกล้เคียงที่สุด
ตัวค้นหาสี Tailwind ค้นหาการจับคู่ที่ใกล้เคียงที่สุดและแสดงค่าความแตกต่างเพื่อให้คุณตัดสินใจว่าการประมาณค่านั้นยอมรับได้หรือไม่
การตรวจสอบโค้ดและเอกสาร
ระหว่างการตรวจสอบโค้ด ค่า HEX ดิบอย่าง #708090 ไม่มีความหมายใดๆ เมื่อมองผ่านๆ
ตัวค้นหาชื่อสี ระบุว่าเป็น SlateGray ทำให้การตรวจสอบและเอกสารอ่านได้ง่ายขึ้น
ข้อมูลอ้างอิง CSS Color Model
CSS รองรับ color model หลายรูปแบบ ตารางด้านล่างสรุปหกรูปแบบที่พบมากที่สุด ไวยากรณ์ และกรณีการใช้งานทั่วไป ทั้งหมดนี้รองรับโดยตัวแปลงสีของ ToolDeck
| Model | CSS Syntax | ช่องสี | ช่วงค่า | การใช้งานทั่วไป |
|---|
| HEX | #rrggbb | แดง, เขียว, น้ำเงิน | 00–ff ต่อช่อง | พบมากที่สุดใน CSS, การส่งมอบงานออกแบบ, แนวทางแบรนด์ |
| RGB | rgb(r, g, b) | แดง, เขียว, น้ำเงิน | 0–255 ต่อช่อง | JavaScript canvas API, computed styles, การประมวลผลภาพ |
| HSL | hsl(h, s%, l%) | สี, ความอิ่มตัว, ความสว่าง | 0–360 / 0–100% / 0–100% | Design token, การสร้างธีม, ตัวแปรความเข้มของสีแบบโปรแกรม |
| HSV | N/A (ไม่ใช่ CSS) | สี, ความอิ่มตัว, ค่า | 0–360 / 0–100% / 0–100% | Color picker (Photoshop, Figma), การปรับเทียบสีฮาร์ดแวร์ |
| OKLCH | oklch(L C H) | ความสว่าง, ความเข้มข้น, สี | 0–1 / 0–0.4 / 0–360 | ชุดสีที่สม่ำเสมอเชิงการรับรู้ (CSS Color Level 4 spec) |
| Named | เช่น slategray | แมปกับ RGB ภายใน | 148 ชื่อที่กำหนดไว้ล่วงหน้า | การสร้างต้นแบบ, โค้ดที่อ่านง่าย, การสาธิตอย่างรวดเร็ว |
CSS Color Level 4 (W3C) ยังกำหนดฟังก์ชัน lab(), lch() และ color() ด้วย HEX และ RGB ยังคงได้รับการสนับสนุนอย่างกว้างขวางที่สุดในเบราว์เซอร์และเครื่องมือออกแบบ
วิธีเลือกเครื่องมือสีที่เหมาะสม
เครื่องมือสีแต่ละตัวแก้ปัญหาที่แตกต่างกัน ใช้คู่มือด้านล่างเพื่อค้นหาเครื่องมือที่เหมาะกับงานของคุณ
- 1
ถ้าคุณต้องการ แปลงสีระหว่างรูปแบบ HEX, RGB, HSL หรือ HSV → ตัวแปลงสี - 2
ถ้าคุณต้องการ ตรวจสอบว่าคู่สีข้อความ/พื้นหลังมีความสอดคล้องกับมาตรฐานการเข้าถึง WCAG → ตัวตรวจสอบความเปรียบต่างสี - 3
ถ้าคุณต้องการ สร้างชุดสีที่กลมกลืนจากสีพื้นฐานสีเดียว → ตัวสร้างชุดสี - 4
ถ้าคุณต้องการ สร้าง CSS gradient แบบ linear หรือ radial และรับโค้ด → ตัวสร้าง CSS Gradient - 5
ถ้าคุณต้องการ ค้นหาชื่อ CSS ที่มนุษย์อ่านได้ซึ่งใกล้เคียงกับค่าสีที่กำหนด → ตัวค้นหาชื่อสี - 6
ถ้าคุณต้องการ แมปสีใดก็ได้กับคลาส Tailwind CSS utility ที่ใกล้เคียงที่สุด → ตัวค้นหาสี Tailwind
เครื่องมือทั้งหกรับอินพุตในหลายรูปแบบ ถ้าคุณไม่แน่ใจว่าสีของคุณอยู่ในรูปแบบใด ให้เริ่มด้วยตัวแปลงสี ซึ่งตรวจจับ HEX, RGB, HSL และ HSV โดยอัตโนมัติ
คำถามที่พบบ่อย
ความแตกต่างระหว่างรูปแบบสี HEX และ RGB คืออะไร?
HEX และ RGB แสดงถึงพื้นที่สีเดียวกัน รหัส HEX เช่น #ff6600 คือการเข้ารหัสเลขฐานสิบหกของสามช่อง RGB: ff = 255 (แดง), 66 = 102 (เขียว), 00 = 0 (น้ำเงิน) ความแตกต่างเพียงอย่างเดียวคือรูปแบบการเขียน HEX มีความกระชับใน CSS stylesheet มากกว่า ในขณะที่ RGB จัดการด้วยโปรแกรมได้ง่ายกว่าเพราะแต่ละช่องเป็นจำนวนเต็มฐานสิบอยู่แล้ว
ควรใช้ HSL แทน HEX หรือ RGB เมื่อใด?
HSL แยกสี (ตัวสีเอง) จากความอิ่มตัวและความสว่าง ทำให้ง่ายต่อการสร้างตัวแปรความเข้ม: คงสีไว้ ลดความสว่างสำหรับเฉดที่เข้มขึ้น เพิ่มสำหรับสีที่อ่อนลง Design system ที่สร้างธีมสว่าง/มืดจากสีพื้นฐานสีเดียวมักเก็บ token ใน HSL ด้วยเหตุนี้ CSS custom properties ยังทำงานได้ดีกับ HSL เพราะคุณสามารถแทนที่ช่องแต่ละช่องได้
WCAG 2.1 กำหนดอัตราส่วนความเปรียบต่างสำหรับข้อความเท่าไร?
WCAG 2.1 Level AA กำหนดอัตราส่วนความเปรียบต่างขั้นต่ำ 4.5:1 สำหรับข้อความปกติ (ต่ำกว่า 18pt หรือ 14pt ตัวหนา) และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt+ ตัวหนา) Level AAA เพิ่มเกณฑ์เหล่านั้นเป็น 7:1 และ 4.5:1 ตามลำดับ อัตราส่วนเหล่านี้คำนวณจากความส่องสว่างสัมพัทธ์ของสีพื้นหน้าและพื้นหลังโดยใช้สูตรที่กำหนดใน WCAG 2.1 Success Criterion 1.4.3
CSS รองรับสีที่มีชื่อกี่สี?
CSS กำหนด 148 ชื่อสี สืบทอดมาจากข้อกำหนด SVG 1.1 และ CSS3 ชื่อเหล่านี้มีตั้งแต่ชื่อทั่วไปอย่าง red, blue และ white ไปจนถึงชื่อเฉพาะอย่าง MediumSlateBlue, PapayaWhip และ LavenderBlush ชื่อสีแมปกับค่า RGB ที่คงที่ CSS Color Level 4 specification คงชื่อ 148 ชื่อเดิมไว้และไม่เพิ่มชื่อใหม่ เบราว์เซอร์ยังรู้จักคีย์เวิร์ด transparent ด้วย (เทียบเท่ากับ rgba(0,0,0,0))
สามารถใช้สี OKLCH ใน CSS ได้เลยหรือไม่?
ได้ ฟังก์ชัน oklch() รองรับใน Chrome 111+, Firefox 113+ และ Safari 15.4+ OKLCH เป็นส่วนหนึ่งของ CSS Color Level 4 specification ที่เผยแพร่โดย W3C ข้อได้เปรียบหลักเหนือ HSL คือความสม่ำเสมอเชิงการรับรู้: สองสีที่มีค่าความสว่างเดียวกันใน OKLCH จะดูสว่างเท่ากันสำหรับสายตามนุษย์จริงๆ ซึ่งไม่เป็นความจริงสำหรับ HSL ทำให้ OKLCH เป็นตัวเลือกที่ดีกว่าสำหรับการสร้างชุดสีที่เข้าถึงได้ด้วยความสว่างที่รับรู้สม่ำเสมอ
ความแตกต่างระหว่าง HSL และ HSV คืออะไร?
HSL และ HSV ทั้งคู่ใช้การแสดงผลแบบทรงกระบอกโดยมีสีเป็นมุม แต่กำหนดความสว่างต่างกัน ใน HSL ความสว่าง 50% คือสีบริสุทธิ์ 0% คือสีดำ 100% คือสีขาว ใน HSV ค่า 100% คือสีบริสุทธิ์ 0% คือสีดำ HSV ไม่มีวิธีสร้างสีขาวโดยไม่ลดความอิ่มตัว นักออกแบบและ color picker (Photoshop, Figma) มักใช้ HSV ในขณะที่ CSS ใช้ HSL โดยพื้นฐาน
ค้นหาคลาส Tailwind สำหรับ HEX สีใดก็ได้อย่างไร?
Tailwind CSS มาพร้อมกับชุดสีคงที่ประมาณ 220 คลาส (22 สีคูณ 10 ความเข้มแต่ละสี บวกดำ ขาว และ transparent) หากต้องการค้นหาคลาสที่ใกล้เคียงที่สุดสำหรับค่า HEX ที่กำหนด คุณคำนวณระยะทาง Euclidean ในพื้นที่สีเชิงการรับรู้ (เช่น CIELAB หรือ OKLCH) ระหว่างสีของคุณและสีตัวอย่าง Tailwind ทุกสี ตัวค้นหาสี Tailwind บน ToolDeck ทำสิ่งนี้โดยอัตโนมัติและแสดงการจับคู่ที่ใกล้เคียงที่สุดพร้อมกับความแตกต่างของสีเพื่อให้คุณตัดสินว่าการประมาณค่านั้นดีพอหรือไม่
การวางสีแบรนด์ที่เป็นความลับลงในเครื่องมือออนไลน์ปลอดภัยหรือไม่?
ขึ้นอยู่กับเครื่องมือ เครื่องมือใดก็ตามที่ส่งอินพุตของคุณไปยังเซิร์ฟเวอร์จะเปิดเผยค่าเหล่านั้นในการรับส่งข้อมูลเครือข่ายและบันทึกเซิร์ฟเวอร์ เครื่องมือสีของ ToolDeck ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ JavaScript ฝั่ง client ไม่มีคำขอ HTTP ที่นำข้อมูลสีของคุณไปยัง backend ใดๆ คุณสามารถตรวจสอบสิ่งนี้ได้โดยเปิดแท็บ Network ของเบราว์เซอร์ขณะใช้เครื่องมือ เพื่อความระมัดระวังสูงสุด คุณยังสามารถใช้เครื่องมือแบบออฟไลน์หลังจากโหลดหน้าครั้งแรกได้