สีเหลือง — ความหมาย จานสี สีเสริม และความกลมกลืน
คู่มือปฏิบัติเกี่ยวกับสี สีเหลือง: สัญลักษณ์และจิตวิทยา วงล้อสี ความสัมพันธ์ (เสริม, คล้ายคลึง, ไตรอะดิก) เข้าถึงได้ การผสมสีและจานสีที่ดาวน์โหลดได้ แปลงระหว่าง ฐานสิบหก- RGB, และ HSLคัดลอกตัวแปร CSS และดูตัวอย่างสีที่ตรงกันที่เข้ากันได้
เคล็ดลับ: กด เข้า ภายในฟิลด์ใดก็ได้เพื่ออัปเดตค่าทั้งหมด
สีเหลืองได้อย่างรวดเร็ว
สีเหลือง สื่อถึงแสงแดด ความอบอุ่น ความอยากรู้อยากเห็น และการมองโลกในแง่ดี ใช้ได้ดีในฐานะสีเฉพาะจุดเพื่อเน้นคำกระตุ้นการตัดสินใจ ป้ายราคา และการแจ้งเตือน สำหรับการอ่านแบบยาว ควรใช้โทนสีที่นุ่มนวลกว่าเพื่อความสบาย
สีเหลืองบริสุทธิ์มีความเปรียบต่างต่ำกับสีขาว สำหรับ UI ที่สามารถเข้าถึงได้ ให้วางสีเหลืองบนสีกรมท่า สีชาร์โคล หรือสีม่วงเข้ม ใช้ข้อความสีดำหรือสีเทาเข้มมากบนพื้นหลังสีเหลืองอ่อน
จานสีเหลือง
สร้างอัตโนมัติ โทนสี (ขาวขึ้น), เฉดสี (สีดำมากขึ้น) และ โทนเสียง (เทามากกว่า) จากสีเหลืองปัจจุบัน คลิกตัวอย่างใดก็ได้เพื่อคัดลอก HEX คุณยังสามารถดาวน์โหลดจานสี PNG ได้อีกด้วย
โทนสี
เฉดสี
โทนเสียง
ความสามัคคีของวงล้อสี
สำรวจ เสริม คู่สี, คล้ายคลึงกัน เพื่อนบ้านและ ไตรเอดิก ชุดจากสีเหลืองนี้ ชุดค่าผสมสำเร็จรูปเหล่านี้ช่วยให้คุณพบสีที่เข้ากันได้ดี
สีตรงข้ามบนวงล้อสีสร้างความเปรียบต่างสูงสำหรับ CTA และป้ายสถานะ
เพื่อนบ้านที่อยู่บนพวงมาลัยให้ความรู้สึกกลมกลืน เหมาะสำหรับพื้นหลังและการไล่ระดับสี
เฉดสีที่เว้นระยะเท่ากันสามสีให้คอนทราสต์ที่สมดุลสำหรับแดชบอร์ดและแผนภูมิ
แอปพลิเคชันและแนวทางปฏิบัติที่ดีที่สุด
การสร้างแบรนด์
สีเหลืองเพิ่มความเป็นมิตรและพลังงานให้กับการค้าปลีก อาหาร ผลิตภัณฑ์สำหรับเด็ก และแบรนด์การท่องเที่ยว จับคู่กับสีชาร์โคลหรือสีกรมท่าเข้มเพื่อความสมดุลระดับมืออาชีพและตัวพิมพ์ที่อ่านง่าย
UI และการเข้าถึง
ใช้สีเหลืองเป็นจุดเน้นสำหรับปุ่มและไฮไลท์ สำหรับเนื้อหาขนาดยาว ให้เลือกสีอ่อนเป็นพื้นหลังพร้อมข้อความสีเข้มเพื่อให้ตรงตามคอนทราสต์ของ WCAG
การตลาดและบรรจุภัณฑ์
สีเหลืองดึงดูดสายตาบนชั้นวางและฟีดโซเชียล สีน้ำเงินหรือสีม่วงที่เสริมกันจะสร้างส่วนฮีโร่และการ์ดผลิตภัณฑ์ที่โดดเด่น
คุณสมบัติ
- ทันที ฐานสิบหก ↔ RGB ↔ HSL การแปลงและการซิงโครไนซ์
- จานสีอัตโนมัติ: โทนสี เฉดสี โทนสี รวมถึงจานสี PNG ที่ดาวน์โหลดได้
- ความกลมกลืนของวงล้อสี: คำแนะนำเสริม, คล้ายคลึง, ไตรอะดิก
- เร็ว ตัวแปรซีเอสเอส ส่งออกสำหรับระบบการออกแบบ
วิธีใช้
- ป้อนเลขฐานสิบหก (เช่น
#FFD600) หรือค่า RGB/HSL แล้วกด เข้า- - คลิกตัวอย่างใดก็ได้เพื่อคัดลอก HEX ใช้ชุดเสริมหรือชุดไตรอะดิกเพื่อให้ได้คอนทราสต์ที่ชัดเจน
- ดาวน์โหลดพาเล็ต PNG หรือคัดลอกตัวแปร CSS และวางลงในโปรเจ็กต์ของคุณ
- ตรวจสอบเคล็ดลับความคมชัดเพื่อให้ข้อความอ่านได้บน UI สีเหลืองอ่อน
คำถามที่พบบ่อย
สีอะไรที่เหมาะกับสีเหลือง?
สีกรมท่า สีชาร์โคล สีม่วงเข้ม และสีเขียวเข้มของป่าเข้ากันได้อย่างลงตัว หากต้องการเน้นความสดใส ให้ใช้สีฟ้าอมฟ้าหรือสีม่วงที่เข้ากัน
สีเหลืองตรงข้ามกับสีอะไร?
บนวงล้อ RGB/HSL สีตรงข้ามจะอยู่ใกล้ สีฟ้า-สีฟ้า (ประมาณ 180° จากสีเหลือง)
ฉันสามารถใช้สีเหลืองสำหรับข้อความเนื้อหาได้หรือไม่
โดยทั่วไปจะไม่ใช้กับพื้นหลังสีอ่อน คงสีเหลืองไว้สำหรับไฮไลต์หรือไอคอน ใช้ข้อความสีเข้มบนการ์ดสีเหลืองอ่อนแทน