เครื่องมือสร้างชุดสี Tailwind

 (tints.dev)
5 คะแนน โดย GN⁺ 2024-02-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

คุณสมบัติและวิธีปรับแต่งชุดสี

  • ชื่อของชุดสีคือ "NameValueOpen Color Picker" และค่าสีเริ่มต้นคือ 500
  • มีฟังก์ชันสำหรับคัดลอก URL ของพาเลตนี้ไปยังคลิปบอร์ด หรือเปิด API URL ได้
  • มีฟังก์ชันแสดงกราฟของสี และฟังก์ชันลบสีเฉพาะอย่าง 'blue'
  • มีสวิตช์เปิดปิดสำหรับปรับ Saturation, Lightness, Maximum Lightness, Minimum Lightness และ Lu (ความสว่างของแสง, Luminance)
  • Lightness มีช่วงตั้งแต่ 50 ถึง 950 ซึ่งช่วยให้ผู้ใช้ปรับความสว่างของพาเลตได้

ความเห็นของ GN⁺:

  • บทความนี้แนะนำความสามารถในการปรับแต่งชุดสี และให้ข้อมูลที่เป็นประโยชน์สำหรับนักออกแบบหรือนักพัฒนา
  • จุดสำคัญคือมีเครื่องมือหลากหลายที่ช่วยให้ผู้ใช้ปรับแต่งสีได้อย่างละเอียด
  • ฟังก์ชันการปรับสีเป็นองค์ประกอบสำคัญของการออกแบบ UI/UX สำหรับเว็บไซต์หรือแอป ดังนั้นความเข้าใจเครื่องมือเหล่านี้จึงช่วยยกระดับคุณภาพงานออกแบบได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-02-03
ความคิดเห็นจาก Hacker News

  • สนใจการพัฒนาเครื่องมือที่ใช้ระบบดีไซน์โดยคำนึงถึงการเข้าถึง เพื่อให้สามารถรู้ได้จากชื่อสีเพียงอย่างเดียวว่าคู่สีเข้าถึงได้มากน้อยเพียงใด

    ตัวอย่างเช่น หากใช้ระบบดีไซน์ USWDS ก็สามารถดูได้จากความแตกต่างของค่าสีว่า blue-30 และ gray-80 เป็นคู่สีที่ผ่านเกณฑ์ WCAG AA หรือไม่

  • ชอบทดลองเล่นกับสี และได้แชร์เครื่องมือที่มีประโยชน์รวมถึงตัวเลือกทางเลือกที่เกี่ยวข้อง

    มีการแนบลิงก์ไปยังเว็บไซต์ตัวสร้างชุดสีหลายแห่ง

  • โดยส่วนตัวได้สร้างเครื่องมือสีแบบเรียบง่ายและมีแนวทางชัดเจนขึ้นมาเอง ซึ่งสามารถสร้างการตั้งค่า Tailwind ได้

    มีการแนบลิงก์เว็บไซต์ของเครื่องมือนั้น และลิงก์บทความเกี่ยวกับกระบวนการสร้างด้วยการใช้เว็บคอมโพเนนต์

  • ใช้เครื่องมือใหม่นี้สร้างพาเลตจากโลโก้ได้ในเวลาไม่ถึง 1 นาที และได้ผลลัพธ์ที่ดีกว่าการทำด้วยมือแบบเดิม

  • ชอบวิธีกำหนดพาเลตสีด้วยตัวแปร CSS แล้วอ้างอิงจากการตั้งค่า Tailwind

    กล่าวถึงความยืดหยุ่นที่ทำให้สามารถใช้ธีมสีอื่นได้ในรันไทม์

  • ขอบคุณผู้สร้างเครื่องมือ และแสดงความสงสัยเกี่ยวกับวิธีที่ง่ายที่สุดในการซิงก์สีกับ Figma

    ตั้งคำถามว่ามีปลั๊กอินที่นักออกแบบมืออาชีพใช้กัน หรือมีวิธีสร้างสีและส่งออกไปยัง Tailwind อย่างไร

  • มองว่าเป็นเครื่องมือที่มีประโยชน์สำหรับสร้างพาเลตสีจากสีเดียว แล้วนำผลลัพธ์ไปป้อนให้แอปอื่นเพื่อปรับแต่ละสีด้วยตนเอง

  • ถามเกี่ยวกับเดโมตัวอย่างแบรนด์ และสงสัยว่าโดยทั่วไปผู้ใช้มักแก้ไขสีพื้นฐานหรือสร้างตัวแปรใหม่กันอย่างไร

  • ในฐานะนักพัฒนาแบบฟูลสแตก แม้จะไม่มีความรู้เรื่องสีแต่ก็ใช้งาน Tailwind CSS อยู่

    ถามว่าสามารถไปเรียนรู้เรื่องการเลือกสีและวิธีใช้เครื่องมือได้จากที่ไหน

  • ดูเป็นเครื่องมือที่มีประโยชน์สำหรับการสร้างกราเดียนต์ และรู้สึกแปลกที่ไม่มีการกล่าวถึง Paletton

    มีการแนบลิงก์เว็บไซต์ Paletton และอธิบายฟังก์ชันการสร้างกราเดียนต์จากสีหลักไปยังสีที่อยู่ใกล้เคียง