เครื่องมือสำรวจวงล้อสี
เลือกสีหลัก
ถัดไปลากหมุดไปรอบ ๆ วงล้อสี แล้วดูเครื่องหมายชุดสีที่กลมกลืนหมุนตามไปด้วย, สีตรงข้ามที่ 180°, ชุดสามสีที่ระยะห่าง 120°, สีข้างเคียงที่ใกล้กัน, สีตรงข้ามแบบแยก และชุดสี่สี สลับระหว่าง HSL (วงล้อสายวิศวกรรม) กับ RYB (วงล้อของศิลปิน) เปรียบเทียบความต่างของทั้งสองแบบ แล้วคัดลอกชุดสีที่คุณชอบไปใช้เป็นจานสีได้เลย
เครื่องมือสำรวจวงล้อสีทำงานอย่างไร
-
1
ลากหมุดไปรอบ ๆ วงล้อ
หมุดเป็นตัวกำหนดสีหลักของคุณ ส่วนความอิ่มตัวและความสว่างปรับได้ด้วยตัวควบคุมแยกต่างหาก
-
2
เลือกชุดสีที่กลมกลืน
สีตรงข้าม, สีข้างเคียง, ชุดสามสี, สีตรงข้ามแบบแยก, ชุดสี่สี, เอกรงค์ เครื่องหมายชุดสีจะหมุนตามสีหลัก
-
3
สลับโมเดล (HSL กับ RYB)
วงล้อ HSL มีความสมมาตร (สีแดงตรงข้ามกับสีฟ้าอมเขียว สีเขียวตรงข้ามกับสีม่วงแดง) ส่วนวงล้อ RYB ไม่สมมาตร (สีแดงตรงข้ามกับสีเขียว สีน้ำเงินตรงข้ามกับสีส้ม, ตรงกับสัญชาตญาณการผสมสี)
-
4
คัดลอกจานสี
มีค่า HEX, RGB, HSL สำหรับสีหลักและเครื่องหมายชุดสีแต่ละตัว คัดลอกเป็นตัวแปร CSS, แมป Sass หรือ CSV ธรรมดาก็ได้
วงล้อ HSL กับ วงล้อ RYB
วงล้อทั้งสองแบบจัดเรียงสีเป็นวงกลม แต่มีความเห็นต่างกันว่าสีใดเป็นสี “ตรงกันข้าม”:
| สีหลัก | สีตรงข้าม HSL | สีตรงข้าม RYB |
|---|---|---|
| แดง | ฟ้าอมเขียว | เขียว |
| ส้ม | เขียวอมฟ้า | น้ำเงิน |
| เหลือง | น้ำเงิน | ม่วง |
| เขียว | ม่วงแดง | แดง |
| น้ำเงิน | เหลือง | ส้ม |
| ม่วง | เหลืองอมเขียว | เหลือง |
- HSL (เฉดสี ความอิ่มตัวของสี ความสว่าง): การแสดง sRGB แบบทรงกระบอกที่ใช้ใน CSS และงานออกแบบดิจิทัล การบวก 180° จะเลือกเฉดสีฝั่งตรงข้ามบนวงล้อดิจิทัลนี้
- RYB (แดง เหลือง น้ำเงิน): วงล้อสีเชิงแนวคิดแบบดั้งเดิมที่ใช้ในการเรียนศิลปะ เครื่องมือนี้จัดตำแหน่งมุมสีใหม่เพื่อประมาณแนวคิดดังกล่าว แต่ไม่ได้ทำนายผลของการผสมเม็ดสีจริง
ทั้งสองแบบใช้ได้กับเป้าหมายที่ต่างกัน ใช้ HSL สำหรับงานบนหน้าจอ และใช้ RYB เมื่อให้ความสำคัญกับสัญชาตญาณของสื่อที่ใช้สีทา
นิยามชุดสีที่กลมกลืนบนวงล้อ
- สีตรงข้าม: สีหลัก + 180° เป็นระยะห่างของเฉดสีมากที่สุดบนวงล้อที่เลือก
- สีข้างเคียง: สีหลักกับสีข้างเคียงที่ -30° และ +30° นุ่มนวลและกลมกลืนเป็นหนึ่งเดียว
- ชุดสามสี: สีหลัก + 120° + 240° สดใสอย่างสมดุล
- สีตรงข้ามแบบแยก: สีหลัก + 150° + 210° ให้ความรู้สึกหลากหลายโดยไม่ตึงเท่าสีตรงข้ามเต็มรูปแบบ
- ชุดสี่สี / สี่เหลี่ยมจัตุรัส: สีหลัก + 90° + 180° + 270° สี่เฉดสีในระยะห่างเท่ากัน
- เอกรงค์: เฉดสีเดียวกัน แต่ความสว่าง/ความอิ่มตัวของสีต่างกัน
อุณหภูมิสีบนวงล้อ
- ครึ่งโทนอุ่น: แดง ส้ม เหลือง ตามธรรมเนียมจะให้ความรู้สึกพุ่งเข้าหา (ดึงสายตาไปข้างหน้า)
- ครึ่งโทนเย็น: เขียว น้ำเงิน ม่วง ตามธรรมเนียมจะให้ความรู้สึกถอยห่างออกไป
- สีกลาง: สีที่ความอิ่มตัวต่ำ จัดอยู่ในครึ่งใดก็ได้ขึ้นอยู่กับโทนสีที่เจือ
การใช้งานจริง
- การสำรวจจานสีของแบรนด์: ลากหมุดจนกว่าจะเจอสีที่ลงตัว แล้วดูเครื่องหมายชุดสามสีหรือชุดสี่สีเพื่อหาสีเสริมที่เป็นจุดเด่น
- การศึกษาศิลปะ: เลือกภาพถ่ายอ้างอิง หาเฉดสีหลัก แล้วดูสีข้างเคียงเพื่อทำเงาแบบเอกรงค์
- ภาพประกอบ: เลือกคู่สีตรงข้ามสำหรับเงา, เช่น วัตถุสีส้ม ให้ลงเงาด้วยสีน้ำเงินแทนการใช้สีส้มเข้มขึ้นเฉย ๆ
- แบบจำลองงานออกแบบภายใน: วงล้อชุดสามสีจับคู่กับจานสีภายในแบบคลาสสิก (น้ำเงิน/เหลือง/แดงในสไตล์อเมริกันดั้งเดิม เขียว/ส้ม/ม่วงในสไตล์โบฮีเมียน)
เหตุใดวงล้อจึงไม่ได้ตรงตามสัญชาตญาณไปทั้งหมด
การรับรู้สีของมนุษย์จริง ๆ ซับซ้อนกว่าที่วงล้อแบบใดจะบ่งบอก ระบบ Munsell, LAB และ OKLCH ต่างพยายามจัดเรียงให้สม่ำเสมอตามการรับรู้ และก็ไม่ได้ออกมาเป็นวงกลมง่าย ๆ, ความเข้มของสีเปลี่ยนไปตามความสว่างในทุกเฉดสี สำหรับงานระบบออกแบบระดับใช้งานจริง ปริภูมิสีเชิงการรับรู้ให้ผลลัพธ์ที่สะอาดกว่าวงล้อ แต่สำหรับการสำรวจสีในเชิงแนวคิด วงล้อยังคงเหนือกว่าในเรื่องความชัดเจน
คำถามที่พบบ่อย
ใช้ HSL สำหรับงานออกแบบดิจิทัล (CSS, หน้าจอ, UI) ส่วน RYB เหมาะเมื่อคุณนึกถึงการทาสี การพิมพ์ หรือศิลปะแบบดั้งเดิม และต้องการสัญชาตญาณเรื่องชุดสีที่กลมกลืนแบบที่เรียนกันในโรงเรียนศิลปะ
ทั้งสองโมเดลจัดเรียงเฉดสีต่างกัน HSL ใช้มุมเฉดสีของ sRGB ดังนั้นสีฟ้าอมเขียวจึงอยู่ตรงข้ามสีแดง ส่วนแนวคิด RYB แบบดั้งเดิมวางสีเขียวไว้ตรงข้ามสีแดง RYB ในที่นี้เป็นการประมาณเพื่อการมองเห็น ไม่ใช่การทำนายผลเมื่อผสมสีจริงแต่ละชนิด
สำหรับการเรียนการสอน การร่างไอเดีย และการสื่อสารกับลูกค้า ใช้แน่นอน ส่วนงานจัดจานสีที่ต้องการความแม่นยำ มืออาชีพหันมาใช้ปริภูมิสีเชิงการรับรู้ (LAB, OKLCH) มากขึ้น ซึ่งความสว่างและความเข้มของสีเป็นอิสระจากเฉดสี
คัดลอกจานสีเป็น CSS, Sass หรือ CSV แล้วบันทึกไว้ในพื้นที่ทำงานของคุณ เครื่องมือนี้ไม่มีคลังจานสีหรือพื้นที่จัดเก็บในบัญชี สำหรับขั้นตอนแบบ 4 หน้า การตั้งค่าวงล้อที่มองเห็นได้จะอยู่ใน URL และอาจคงอยู่ในประวัติเบราว์เซอร์
เครื่องมือที่เกี่ยวข้อง
ตัวสร้างการตั้งค่า Webpack
สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install
เครื่องแปลงฐานตัวเลข
แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตัวแปลง Timestamp
แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
เครื่องสุ่มที่อยู่
สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ
เครื่องมือนี้มีให้บริการในภาษาอื่น
- Explorador de Rueda de Color [ES]
- Explorateur de la roue des couleurs [FR]
- カラーホイールエクスプローラー [JA]
- Explorador de Cores [PT]
- Trình khám phá bánh xe màu [VI]
- مستكشف عجلة الألوان [AR]
- Penjelajah Roda Warna [ID]
- Färghjulsutforskare [SV]
- 컬러 휠 탐색기 [KO]
- Farbrad-Explorer [DE]
- Kleurenwielverkenner [NL]
- Eksplorator koła barw [PL]
- Color Wheel Explorer [EN]
- Esplora la Ruota dei Colori [IT]
- Обозреватель цветового круга [RU]
- Renk Çemberi Kâşifi [TR]
- 色轮探索器 [ZH]