ตัวสร้างพาเลตสี Tailwind CSS แบบ 11 ระดับและ API

 (tints.dev)
5 คะแนน โดย GN⁺ 2024-02-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • สามารถเริ่มทำงานกับพาเลตของ Tailwind CSS จากค่า Hex เพียงค่าเดียว แล้วขยายเป็นสี 11 ระดับตั้งแต่ 50~950 ได้อย่างรวดเร็ว
  • สต็อปอ้างอิงเริ่มต้นคือ 500 และหากต้องการสามารถกำหนดสีอ้างอิงเป็นตำแหน่งอื่นในช่วง 50~950 ได้
  • สามารถปรับ Saturation และ Hue เพื่อสร้างพาเลตที่ดูเป็นธรรมชาติกว่าการเปลี่ยนความสว่างแบบง่าย ๆ
  • การกระจายของสีไปทางขาวและดำจะแตกต่างกันตามค่าต่ำสุด·สูงสุดของ Lightness/Luminance และการสลับโหมด
  • ขณะนี้ API มุ่งเน้นการคืนค่าพาเลตจากค่า Hex พื้นฐาน และยังไม่มี ตัวเลือกปรับ HSL

การสร้างพาเลต Tailwind CSS

  • Palette Creator รับค่าสีฐานสิบหกที่ถูกต้องเป็นค่าเริ่มต้น แล้วสร้างพาเลต 11 ระดับสำหรับ Tailwind CSS
  • สต็อปอ้างอิงเริ่มต้นคือ 500 แต่สามารถเปลี่ยนเป็นสต็อปอื่นในช่วง 50~950 เพื่อวางสีที่ต้องการไว้เป็นศูนย์กลางของพาเลตได้

  • วิธีปรับแต่งสี

    • สีที่มี Saturation 100% สามารถใช้ Hue Shift ขึ้นหรือลงเพื่อเพิ่มความหลากหลายให้พาเลตได้
    • สีพื้นฐานที่มี Saturation ต่ำ หากเพิ่ม Saturation ที่ปลายทั้งสองด้านจะทำให้พาเลตน่าสนใจยิ่งขึ้น
    • สามารถปรับ Minimum/Maximum Lightness หรือ Luminance เพื่อกระจายสีที่เหลือออกไปจนถึงสุดขั้วสีขาว·สีดำได้
    • เมื่อสลับระหว่าง Lightness และ Luminance การกระจายของสีบริเวณสุดขั้วจะถูกสร้างแตกต่างกัน
    • หลักการออกแบบสีได้รับแรงบันดาลใจจาก Refactoring UI ของ Adam Wathan และ Steve Schoger โดยหนังสือดังกล่าวไม่แนะนำให้ใช้เครื่องมืออัตโนมัติ
    • เครื่องมือนี้เน้นที่การ เริ่มต้นอย่างรวดเร็ว สำหรับการสร้างพาเลตใหม่ มากกว่าการสร้างคำตอบสำเร็จรูปแทนทั้งหมด

การใช้ API และผลลัพธ์

  • สามารถดึงชุดพาเลตหลายชุดได้ด้วย Palette API
  • ใช้งานได้กับเครื่องมือออกแบบที่ต้องสร้างพาเลต 50~950 จากค่า Hex เพียงค่าเดียว
  • ขณะนี้ API คืนค่าเฉพาะพาเลตจากค่า Hex พื้นฐานเท่านั้น และไม่มีตัวเลือก HSL tweak
  • พาเลตที่สร้างขึ้นจะถูกจัดให้อยู่ในรูปแบบที่สามารถนำไปวางใน CSS สำหรับการตั้งค่า Tailwind ได้
    • ตัวอย่างผลลัพธ์มีตัวแปรสี OKLCH ตั้งแต่ --color-yellow-50 ถึง --color-yellow-950 อยู่ภายในบล็อก @theme

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

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

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

  • อยากให้เครื่องมือแบบนี้มี ประสบการณ์นักพัฒนาด้านการเข้าถึง มาให้เป็นพื้นฐาน
    คือเป็นวิธีที่เวลาเรากำหนดพาเล็ตสี แค่ดูชื่อสีก็รู้ได้ว่าการจับคู่นั้นเข้าถึงได้หรือไม่
    เช่น ในดีไซน์ซิสเต็ม USWDS เรารู้ได้ว่า blue-30 on gray-80 เข้าถึงได้ (WCAG AA) เพราะค่าทั้งสองต่างกันตั้งแต่ 50 ขึ้นไป
    เคยเขียนเกี่ยวกับแนวคิดที่ค่อนข้างแคบนี้ไว้ก่อนหน้านี้: https://darekkay.com/blog/accessible-color-palette/

    • ถึงจะบอกว่าเป็นแนวคิดที่แคบ แต่ผมคิดว่าในการออกแบบเว็บมันควรเป็น องค์ประกอบสำคัญอันดับแรก
      ทุกคนสักวันหนึ่งก็จะต้องเจอกับความพิการ ไม่ว่าจะถาวรหรือชั่วคราว และแม้แต่เครื่องมือดี ๆ อย่าง Streamlit ก็มักใช้ไม่ได้เพราะเรื่องการเข้าถึง
    • Radix Colors มีฟังก์ชันด้านการเข้าถึงในตัวอยู่เยอะ
      https://www.radix-ui.com/colors
      ผมทำงานที่ WorkOS และ Radix เป็นโปรเจกต์โอเพนซอร์สที่เราดูแลอยู่
    • Stripe ก็เคยเขียนถึงระบบสีที่เข้าถึงได้ของตัวเอง: https://stripe.com/blog/accessible-color-systems
      แต่ยังไม่ค่อยรู้จักเครื่องมือที่ใช้แนวคิดนั้นเพื่อสร้างพาเล็ตใหม่
    • Material 3 ซึ่งเป็นสเปกค่อนข้างใหญ่ที่ Google ใช้ ก็มีระบบสีที่ทำงานในลักษณะนี้เหมือนกัน

  • ชอบเล่นกับสีอยู่แล้ว และนี่ก็เป็นเครื่องมือที่ดี
    ทางเลือกอื่นที่ใช้ได้ก็มี https://adevade.github.io/color-scheme-generator/, https://colorcolor.in แม้จะไม่ได้สร้าง Tailwind โดยตรงแต่ทำออกมาดี, http://colormind.io, https://uicolors.app/create

    • ตามหา เครื่องมือสี ที่สมบูรณ์แบบมานานแล้ว แต่ยังไม่เจอ
      อยากได้เครื่องมือที่จัดการได้ขั้นสูงถึงระดับที่ไลบรารีนี้แสดงให้เห็น: https://colorjs.io/
    • อยากแนะนำ https://github.com/ardov/huetone (https://huetone.ardov.me/)
      มี UI ที่เป็นเอกลักษณ์ซึ่งไม่เคยเห็นในเครื่องมือคล้าย ๆ กัน และสามารถดูค่า L/C/H แบบสัมพัทธ์ของสีทั้งพาเล็ตผ่านกราฟได้
      เลยทำให้สร้าง พาเล็ตที่สม่ำเสมอ ได้ง่ายขึ้น
    • ชอบ https://huemint.com/
    • ช่วงนี้เหมือนเว็บจะโหลดช้านิดหน่อย แต่ชอบ https://www.colourlovers.com มาตั้งแต่ก่อนแล้ว
    • เป็นรายการที่ดี
      ถ้าจะเพิ่มลิงก์เกี่ยวกับทฤษฎีสีทั่วไปที่ส่วนตัวใช้บ่อย https://paletton.com/ ใช้สร้างพาเล็ตตามทฤษฎีสีและสร้างชุดสีโดยรวมได้
      https://medialab.github.io/iwanthue/ ใช้ k-means เพื่อแยกสี เหมาะกับสีสำหรับกราฟและการทำให้มีคอนทราสต์พอ

  • เพิ่งทำตัวหนึ่งเมื่อไม่นานมานี้
    มันเรียบง่ายกว่ามากและสะท้อนรสนิยมส่วนตัวค่อนข้างแรง แต่สร้าง การตั้งค่า Tailwind ได้: https://ghola.dev ใช้บนเดสก์ท็อปหรือ iPad จะดีที่สุด
    ยังมีบทความยาว ๆ ว่าทำด้วยเว็บคอมโพเนนต์อย่างไร: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

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

  • ยอดเยี่ยม
    เริ่มจากโลโก้เดียวแล้วทำพาเล็ตได้ในไม่ถึง 1 นาที ผลออกมาดีกว่าครั้งก่อนที่ผมทำเองอยู่ 30 นาทีเสียอีก

  • ชอบมาก
    สงสัยว่าวิธีที่ง่ายที่สุดในการ ซิงก์สีเหล่านี้กับ Figma คืออะไร
    บางทีนักออกแบบมืออาชีพอาจใช้ปลั๊กอินที่สร้างสีแบบนี้แล้ว export เป็น Tailwind ก็ได้

    • กำลังหา plugin แบบนี้อยู่หรือเปล่า? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens เป็นแนวทางที่ใช้ได้ดี
    • วิธีที่ Figma จัดการสีนั้นน่าหงุดหงิดและแปลกเกินไป จนตอนนี้เลิกสนใจแล้ว
      เคยพยายามใช้งานจริงจังอยู่หลายครั้ง แต่สุดท้ายก็ยอมแพ้เพราะมัน manual และยุ่งยากเกินไป

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

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

  • สงสัยว่าตัวอย่าง brand ในเดโมเป็นวิธีที่คนทั่วไปใช้กันในการตั้งค่าหรือเปล่า
    นึกว่าจะใช้แบบแก้สีพื้นฐาน หรือสร้างตัวแปรใหม่อย่าง primary, secondary มากกว่า

    • ผมเป็นคนทำ tints.dev
      ชุดสี brand เป็นสีที่ใช้ในบล็อกของผม simeongriggs.dev และจริง ๆ แล้วผมใส่ค่าสวอตช์ 500 ลงในเครื่องมือนี้เพื่อให้สร้างค่าที่เหลือ

  • ดูมีประโยชน์กับ gradient
    แปลกใจที่ไม่มีใครพูดถึง Paletton เพราะมันเป็นเครื่องมือหลักของผมเวลาเลือกสี: https://paletton.com/
    ถ้าเริ่มจากสีพื้นฐาน ก็จะได้ gradient ที่ไล่ไปยังสีข้างเคียงในพาเล็ตด้วย
    โดยเฉพาะ triadic harmony และ tetradic harmony มีประโยชน์มาก

  • กำลังตั้งใจหาวิธีใช้ การเลื่อนสี อยู่พอดี แต่กว่าจะหาเจอก็ใช้เวลานานมาก