เริ่มจากสีเดียวแล้วสร้างความกลมกลืนแบบตรงข้าม กลมกลืนข้างเคียง ไตรแอด และอีกมากมาย จากนั้นส่งออกเป็น CSS, Tailwind v4, SVG หรือ PNG
คู่มือทฤษฎีสี
วงล้อจัดเรียงเฉดสีเป็นวงกลมเพื่อให้ความสัมพันธ์กลายเป็นเรื่องของพื้นที่ ระยะห่างหมายถึงคอนทราสต์ ความใกล้หมายถึงความสงบ ทุกอย่างด้านล่างโต้ตอบได้ — ลองขยับวงล้อด้านบนแล้วไอเดียเหล่านี้จะเข้าใจเร็วขึ้น
เคล็ดลับ: แชร์ผลลัพธ์ได้ทุกครั้ง — URL จะจำสีหลัก ความกลมกลืน และความสว่างไว้เสมอ
เฉดเดียวไม่เคยพอสำหรับ UI ผสมสีดำเพื่อทำเฉด (หัวข้อ โฮเวอร์) ผสมสีขาวเพื่อทำทินต์ (พื้นหลัง โมดัล) และผสมสีเทาเพื่อทำโทน (ข้อความจาง เส้นขอบ)
สีครามจากเฉดไปทินต์ ตรรกะเดียวกันขับเคลื่อนทุกพาเลตต์ด้านบน
ในวงล้อ RYB แบบคลาสสิก แดง เหลือง น้ำเงินคือแม่สี ผสมกันได้ส้ม เขียว ม่วง บนจอเราผสมแสง (RGB) เครื่องมือนี้จึงคำนวณใน HSL/HSV — วงกลมวงเดิมที่จูนมาสำหรับพิกเซล
Twelve stops around the disc; every other color contains a trace of a primary.
Ease Colors คือวงล้อสีออนไลน์ฟรีสำหรับนักออกแบบและนักพัฒนาที่ต้องการสีที่เชื่อถือได้โดยไม่ต้องออกจากเบราว์เซอร์ เลือกสีหลักบนตัวเลือกวงล้อสีแบบโต้ตอบ ดูความกลมกลืนทั้งหกแบบพร้อมกัน แล้วคัดลอกโค้ด HEX, RGB, HSL หรือ OKLCH พร้อมใช้งานจริง ไม่มีอะไรถูกอัปโหลด ไม่ต้องสมัครสมาชิก และทุกผลลัพธ์จะได้รับ URL ที่แชร์ได้ซึ่งกู้สีหลัก ความกลมกลืน และความสว่างของคุณได้อย่างแม่นยำ แถบไล่เฉดในตัวจะยืดทุกสีหลักจากโทนอ่อนถึงโทนเข้ม และทั้งหน้าใช้งานด้วยคีย์บอร์ดได้ โดยมีการโฟกัสที่มองเห็นในทุกขั้นตอน
วงล้อสีคือแผนภูมิสีวงกลมที่จัดเรียงเฉดสีเพื่อให้ความสัมพันธ์กลายเป็นเรื่องของพื้นที่ สีข้างเคียงให้ความรู้สึกสงบ ส่วนสีตรงข้ามสร้างความตึงเครียด วงล้อสีปฐมภูมิแบบคลาสสิกจากห้องเรียนศิลปะผสมสีแดง เหลือง และน้ำเงิน ขณะที่วงล้อสี RGBบนหน้าจอของคุณผสมแสง เครื่องมือนี้คำนวณทุกความกลมกลืนในปริภูมิสี HSV/HSL ที่ปรับให้เหมาะกับพิกเซล ไม่ใช่เม็ดสี ลากจุดบนจานเพื่อกำหนดเฉดสี ดึงเข้าหาขอบเพื่อความอิ่มตัว และหมุนวงแหวนความสว่างด้านนอกเพื่อพาเฉดสีเดียวจากพื้นหลังอ่อนไปยังข้อความเข้ม เนื่องจากจานถูกวาดด้วยความสดเต็มที่เสมอ จุดมาร์กเกอร์จึงกระจายตัวและลากได้แม้กับจานสีเกือบดำหรือเกือบขาว — รูปทรงเรขาคณิตจะไม่พังทลายที่ปลายสุด
วงล้อสีออนไลน์นี้ยังเป็นเครื่องมือเลือกสีออนไลน์ที่สมบูรณ์และเครื่องมือสี:
กำลังสำรวจทิศทางอยู่หรือเปล่า กด Shuffle ในแกลเลอรีจานสีเพื่อสุ่มหยิบแบบสุ่มจากกว่า 400 ชุดที่คัดสรรแล้ว
ก่อนเผยแพร่ ให้รันการจำลองตาบอดสีเพื่อดูตัวอย่างภาวะบอดสีแดง เขียว น้ำเงิน และภาวะไร้สี แล้วคงความอ่านง่ายของข้อความด้วยป้ายคอนทราสต์อัตโนมัติบนทุกแถบ
เครื่องมือเลือกสีทุกตัวในหน้านี้พูดได้สี่รูปแบบ ช่องเลขฐานสิบหกรับโค้ดใดก็ได้ เช่น #EDEA37 ตัวเลือก RGBอ่านค่าชุดสามอย่าง rgb(99, 102, 241) และ HSL กับ OKLCH ครอบคลุมความสม่ำเสมอทางการรับรู้ที่ RGB อย่างเดียวไปไม่ถึง ทีมฟรอนต์เอนด์จะได้ขั้นตอนเลือกสี HTMLและเลือกสี CSSพร้อมใช้ ส่งออกตัวแปร CSS โทเค็นธีม Tailwind v4 ออบเจกต์ตั้งค่า Tailwind v3 JSON ของ Figma หรือแค่โค้ด หลอดดูดสีหน้าจอในตัว (EyeDropper) เก็บตัวอย่างพิกเซลใดก็ได้บนจอภาพของคุณ และจุดบนวงล้อตัวเลือกยังลากได้ที่ทุกความสว่าง เครื่องมือเลือกสีออนไลน์นี้ฟรี พร้อมการส่งออกที่รองรับอัลฟาซึ่งครอบคลุมทุกกรณีRGBA โหมดกำหนดเองจะแช่แข็งชุดที่สร้างไว้เป็นรายการที่แก้ไขด้วยมือได้ ทำให้ตัวอย่างสว่างขึ้นหรือเข้มขึ้น ลากเพื่อจัดลำดับใหม่ แทรกจุดกึ่งกลางที่ผสม หรือยืดปลายด้านใดด้านหนึ่ง — ทุกการแก้ไขสะท้อนใน URL ที่แชร์ทันที
ช่างภาพและนักออกแบบแบรนด์หันมาใช้เครื่องมือเลือกสีจากภาพเพื่อยืมจานสีจากโลกจริง อัปโหลดรูป — หรือวาง URL รูป — แล้วตัวเลือกจากภาพจะแสดงแว่นขยายพร้อมตารางพิกเซลและเป้าเล็ง เพื่ออ่านพิกเซลตรงจุดที่คุณชี้ได้อย่างแม่นยำ แม้ที่ซูม 800% ล็อกสี คัดลอกเป็น HEX, RGB, HSL หรือ OKLCH แล้วส่งเข้าวงล้อในคลิกเดียว ปรับขนาดจานสีที่สกัดจากสองถึงสิบสี ดาวน์โหลดแถบเป็น PNG หรือเก็บในห้องนิรภัยของเบราว์เซอร์เพื่อเปิดใหม่ภายหลัง ภาพทุกภาพที่คุณเปิดจะอยู่บนอุปกรณ์ของคุณ — ไม่มีการอัปโหลด
เมื่อตัวอย่างเดียวไม่พอ ตัวสร้างจานสีจะสร้างจานสีพร้อมใช้จากภาพในไม่กี่วินาที ให้คะแนนพิกเซลตามความถี่และความอิ่มตัว กรองรายการที่ซ้ำเกือบสนิท แล้วจัดเรียงผู้ชนะตามเฉดสี — สองถึงสิบสีที่จัดลำดับใหม่ ขยาย และลบได้ นักรีทัชภาพพอร์เทรตจะถูกใจชุดสีผิวเฉพาะ ควบคู่คอลเลกชันพาสเทล ฟ้า และเขียว บันทึกรายการโปรดในห้องนิรภัยของเบราว์เซอร์ ดาวน์โหลดจานสีใดก็ได้เป็น PNG หรือ SVG และส่งออกโทเค็นเพื่อส่งงาน ปุ่มที่ลากได้จะเกาะบนภาพตรงจุดที่เก็บตัวอย่าง การเก็บสีซ้ำจึงเป็นการลาก ไม่ใช่การเดา
วงล้อสีเสริมกันจับคู่เฉดที่ห่าง 180° เพื่อความตึงเครียดสูงสุด — ส้มตรงข้ามฟ้า ม่วงตรงข้ามเหลือง แถบสีเสริมกันทำเครื่องหมายสีหลักของคุณด้วยจุดดำ เพื่อให้เห็นชัดว่าควรสงวนตัวอย่างใดไว้ให้ปุ่มและลิงก์ ขณะที่เฉดเด่นนำเลย์เอาต์ การหมุนแบบแยก สามเหลี่ยม สี่เหลี่ยม และจัตุรัสยืนข้างกันในแผงความกลมกลืนเป็นทางเลือกที่นุ่มนวลหรือกล้าหาญกว่า
ระบบวิเคราะห์สีตามฤดูกาลสิบสองระบบอาศัยในแกลเลอรี — ระบบละสิบเจ็ดจานสี โจทย์โทนอุ่นแบบนุ่มเริ่มด้วยจานฤดูใบไม้ร่วงแบบซอฟต์ ส่วนโทนเย็นแบบนุ่มมุ่งสู่จานฤดูร้อนแบบซอฟต์ ชุดฤดูใบไม้ร่วงความอบอุ่นสูงรับใช้แคมเปญฤดูใบไม้ร่วงและแบรนด์อาหาร และจานฤดูหนาวเข้มมอบประกายอัญมณีบนเกือบดำเพื่อความหรูหราและยามค่ำ ดีไซน์สว่างอบอุ่นหยิบจากจานฤดูใบไม้ผลิสว่าง มินิมัลโปร่งจากจานฤดูร้อนโทนเย็น และงานเข้มโอ่อ่าจากจานฤดูใบไม้ร่วงเข้ม คอนทราสต์เยือกเย็นเป็นของจานฤดูหนาวจัด ความอบอุ่นสดใสเป็นของจานฤดูใบไม้ผลิโทนอุ่น โทนกลางนุ่มเป็นของจานฤดูร้อนแท้ และความหรูเงียบเป็นของจานนูทรัล บรรยากาศกว้างกว่าของฤดูร้อน ฤดูหนาว ฤดูใบไม้ผลิ และฤดูใบไม้ร่วงเติมเต็มกว่า 400 ชุด — แต่ละชุดคัดลอก HEX, RGB, HSL และ OKLCH ได้ในคลิกเดียว
ถ้าคุณมาถึงโดยค้นหา Adobe color wheel, Adobe color picker, Canva color wheel หรือ Google color picker คุณก็รู้โจทย์อยู่แล้ว เปลี่ยนสีแบรนด์สีเดียวให้เป็นชุดที่สมดุล Ease Colors ครอบคลุมพื้นที่เดียวกัน — ความกลมกลืน โค้ด HEX/RGB/HSL/OKLCH การเก็บตัวอย่างจากภาพ และการส่งออกจานสี — ฟรีในเบราว์เซอร์ พร้อม URL ที่แชร์ได้ และไม่มีบัญชีมายืนระหว่างคุณกับตัวอย่างสี ควบคุมด้วยคีย์บอร์ดเป็นหลัก ป้ายสำหรับโปรแกรมอ่านหน้าจอ และโหมดลดการเคลื่อนไหวมาให้พร้อม
เปิดวงล้อสี ลองตัวเลือกจากภาพ หรือเรียกดูจานสีกว่า 400 ชุด จานสีต่อไปของคุณอยู่ห่างแค่การลากครั้งเดียว
คลิกที่แถบสีใดก็ได้ เปลี่ยนรูปแบบเป็น HEX, RGB, HSL หรือ OKLCH ก่อนคัดลอกได้
กด “คัดลอกลิงก์” URL จะจำสีหลัก ความกลมกลืน และความสว่างไว้
ฟรี ทุกค่า HEX โทเคน และไฟล์ส่งออกเป็นของคุณ — ไม่ต้องให้เครดิต
วงล้อสีคือแผนภูมิวงกลมที่จัดเรียงเฉดสีให้ความสัมพันธ์กลายเป็นเรื่องของพื้นที่ สีข้างเคียงให้ความรู้สึกสงบ ส่วนสีตรงข้ามสร้างความตึงเครียด ห้องเรียนศิลปะสอนวงล้อแดง-เหลือง-น้ำเงินสำหรับผสมสี ส่วนหน้าจอใช้วงล้อ RGB ที่ผสมแสง นักออกแบบใช้เลือกสีหลัก สร้างความกลมกลืน และตรวจคอนทราสต์ก่อนจานสีจะถึงเลย์เอาต์
เริ่มจากสีหลักสีเดียว — พิมพ์รหัส HEX เปิดตัวเลือกของระบบ หรือเก็บตัวอย่างหน้าจอของคุณ เลือกความกลมกลืนอย่างแบบข้างเคียง เสริมกัน หรือสามเหลี่ยม แล้วปรับความสว่างด้วยวงแหวนด้านนอกจนได้โทนพื้นหลัง ข้อความ และจุดเด่น คัดลอกแต่ละตัวอย่างเป็น HEX, RGB, HSL หรือ OKLCH แล้ววางโค้ดใน CSS, Tailwind หรือ Figma
วัตถุประสงค์หลักคือเอาการเดาออกจากการจับคู่สี แทนที่จะจับคู่ด้วยตา คุณอ่านรูปทรงเรขาคณิต ระยะห่างหมายถึงคอนทราสต์และความใกล้หมายถึงความสงบ วิธีนี้ให้ทุกอินเทอร์เฟซมีลำดับชั้นชัดเจน — เฉดเด่นหนึ่งเฉด ผู้สนับสนุนไม่กี่เฉด และจุดเด่นที่สงวนไว้ — ปุ่ม ลิงก์ และหัวข้อจึงตกตรงที่ตาคาดหวัง
วรรณกรรมออกแบบมักระบุแปดแบบ ได้แก่ เอกรงค์ (เฉดเดียวหลายความสว่าง) ข้างเคียง (สีใกล้กัน) เสริมกัน (ตรงข้าม) เสริมกันแบบแยก (หลักหนึ่งบวกเพื่อนบ้านสองสีของตรงข้าม) สามเหลี่ยม (สามจุด) สี่เหลี่ยมผืนผ้า (คู่เสริมกันสองคู่) จัตุรัส (สี่มุม) และไร้สีหรือกลาง (ดำ ขาว เทา) เครื่องมือนี้ครอบคลุมหกแบบโดยตรง พร้อมโหมดกำหนดเองสำหรับรายการแก้ด้วยมือสองถึงแปดสี
ลากจุดบนจาน มุมกำหนดเฉดสีและระยะจากศูนย์กลางกำหนดความอิ่มตัว ลากวงแหวนด้านนอกเพื่อกำหนดความสว่างโดยไม่แตะเฉดและความอิ่มตัว คุณยังพิมพ์ค่า HEX ตรงตัว เปิดกล่องสีของระบบ หรือเลือกพิกเซลใดก็ได้บนจอด้วยตัวเลือกหน้าจอได้ — ทุกวิธีไปถึงสีหลักเดียวกันที่แชร์ได้
เครื่องมือเลือกสีเปลี่ยนตัวเลือกที่เห็นให้เป็นค่าที่แม่นยำและใช้ซ้ำได้ อ่านทุกสีเป็นรหัส HEX, RGB, HSL หรือ OKLCH เพื่อให้นักออกแบบและนักพัฒนาพูดภาษาเดียวกัน สิ่งที่คุณคลิกตรงแบบบิตต่อบิตกับที่ไปถึง CSS โทเค็น Tailwind หรือสไตล์ Figma — ไม่ต้องกะเฉดด้วยตาอีก
แบบหลักคือตัวเลือกวงล้อหรือจาน (เฉดบวกความอิ่มในพริบตา) ตัวเลือกแถบเลื่อน (ช่อง RGB หรือ HSL) ช่อง HEX (ค่าตรง) หลอดดูดหรือตัวเลือกหน้าจอ (เก็บตัวอย่างจอคุณ) ตัวเลือกจากภาพ (แว่นขยายบนรูป) และคลังจานสี (ชุดคัดสรรอย่างแกลเลอรี 400+ ที่นี่) เว็บนี้รวมทั้งหกไว้ในโฟลว์เดียว
รหัสสีคือค่าข้อความที่อธิบายสีเดียวอย่างแม่นยำ HEX เขียนเป็นเลขฐานสิบหกหกหลัก (#EDEA37) RGB ระบุช่องแดง เขียว น้ำเงิน HSL ระบุเฉด ความอิ่ม ความสว่าง OKLCH คือรูปแบบการรับรู้ใหม่กว่าที่ช่วงตัวเลขเท่ากันดูต่างเท่ากัน ทั้งสี่อธิบายตัวอย่างเดียวกัน — รูปแบบเปลี่ยนแค่วิธีอ่านและแก้
เลือกสีด้วยวงล้อ แถบเลื่อน ช่อง HEX หรือตัวเลือกหน้าจอ แล้วคัดลอกในรูปแบบที่โปรเจกต์ต้องการ — HEX สำหรับเว็บ RGB หรือ RGBA สำหรับโค้ดแอป HSL สำหรับปรับเร็ว OKLCH สำหรับความสม่ำเสมอทางการรับรู้ วางค่าในสไตล์ชีต คอนฟิก Tailwind หรือเครื่องมือออกแบบ แล้วเก็กลิงก์ไว้ให้สีตรงนั้นห่างแค่คลิกเดียวภายหลัง
จานสีคุมทุกพื้นผิวของผลิตภัณฑ์ให้พูดภาษาภาพเดียวกัน มอบบทบาท — พื้นหลัง ข้อความ จุดเด่น สถานะ — อินเทอร์เฟซจึงรู้สึกสอดคล้องแทนที่จะประกอบจากตัวอย่างสุ่ม จานสีดีฝังคอนทราสต์กับลำดับชั้นมาแต่ต้น นั่นคือแก้ความอ่านง่ายน้อยลงและแบรนด์แกร่งจดจำง่ายขึ้น
แบบทั่วไปมีจานเอกรงค์ ข้างเคียง และเสริมกันที่สร้างจากเรขาคณิตวงล้อ จานพาสเทลกับนีออนที่กำหนดด้วยพลัง จานตามฤดูกาลตามอันเดอร์โทนผิว (จากฤดูใบไม้ร่วงแบบซอฟต์ถึงกลาง) จานแบรนด์ที่ตรึงกับสีองค์กร และจานสกัดที่เก็บจากภาพถ่าย แกลเลอรีที่นี่รวมทั้งหมด — กว่า 400 ชุดในกว่า 60 หมวด
เริ่มจากสีหลักเดียวให้เข้าบรรยากาศ — อุ่นนุ่ม เย็นโปร่ง หรือเข้มดราม่า ขยายด้วยความกลมกลืนแล้วตรวจผลอย่างที่ผู้ใช้จะพบ คอนทราสต์เนื้อความ จุดเด่นปุ่ม และการจำลองตาบอดสีแดง เขียว น้ำเงิน รอดทั้งสามเมื่อไรก็แชร์ลิงก์แล้วเผยแพร่