เครื่องมือสำรวจวงล้อสี

ถัดไป

ลากหมุดไปรอบ ๆ วงล้อสี แล้วดูเครื่องหมายชุดสีที่กลมกลืนหมุนตามไปด้วย, สีตรงข้ามที่ 180°, ชุดสามสีที่ระยะห่าง 120°, สีข้างเคียงที่ใกล้กัน, สีตรงข้ามแบบแยก และชุดสี่สี สลับระหว่าง HSL (วงล้อสายวิศวกรรม) กับ RYB (วงล้อของศิลปิน) เปรียบเทียบความต่างของทั้งสองแบบ แล้วคัดลอกชุดสีที่คุณชอบไปใช้เป็นจานสีได้เลย

เครื่องมือสำรวจวงล้อสีทำงานอย่างไร

  1. 1

    ลากหมุดไปรอบ ๆ วงล้อ

    หมุดเป็นตัวกำหนดสีหลักของคุณ ส่วนความอิ่มตัวและความสว่างปรับได้ด้วยตัวควบคุมแยกต่างหาก

  2. 2

    เลือกชุดสีที่กลมกลืน

    สีตรงข้าม, สีข้างเคียง, ชุดสามสี, สีตรงข้ามแบบแยก, ชุดสี่สี, เอกรงค์ เครื่องหมายชุดสีจะหมุนตามสีหลัก

  3. 3

    สลับโมเดล (HSL กับ RYB)

    วงล้อ HSL มีความสมมาตร (สีแดงตรงข้ามกับสีฟ้าอมเขียว สีเขียวตรงข้ามกับสีม่วงแดง) ส่วนวงล้อ RYB ไม่สมมาตร (สีแดงตรงข้ามกับสีเขียว สีน้ำเงินตรงข้ามกับสีส้ม, ตรงกับสัญชาตญาณการผสมสี)

  4. 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 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

เครื่องมือนี้มีให้บริการในภาษาอื่น