Pembuat Palet Warna 11 Langkah Tailwind CSS dan API

 (tints.dev)
5 poin oleh GN⁺ 2024-02-03 | 1 komentar | Bagikan ke WhatsApp
  • Dengan Tailwind CSS, pengerjaan palet dapat dimulai dari satu nilai Hex lalu dengan cepat diperluas menjadi 11 tingkat warna dari 50 hingga 950
  • Stop acuan default adalah 500, tetapi jika perlu Anda dapat menentukan warna acuan pada posisi lain dalam rentang 50~950
  • Dengan menyesuaikan saturasi dan hue, Anda dapat membuat palet yang terasa lebih alami dibanding sekadar perubahan kecerahan sederhana
  • Bergantung pada nilai minimum·maksimum Lightness/Luminance dan pergantian mode, distribusi warna ke arah putih·hitam akan berbeda
  • API saat ini berfokus pada pengembalian palet berbasis nilai Hex default, dan opsi penyesuaian HSL masih belum tersedia

Membuat palet Tailwind CSS

  • Palette Creator menerima nilai warna heksadesimal yang valid sebagai nilai awal lalu menghasilkan palet 11 langkah untuk Tailwind CSS
  • Stop acuan default adalah 500, tetapi dapat diubah ke stop lain di antara 50~950 agar warna yang diinginkan ditempatkan di pusat palet

  • Cara penyesuaian warna

    • Warna dengan saturasi 100% dapat diberi Hue Shift ke atas atau ke bawah untuk menambah variasi pada palet
    • Untuk warna dasar dengan saturasi rendah, menaikkan Saturation di kedua ujung akan menghasilkan palet yang lebih menarik
    • Dengan menyesuaikan Minimum/Maximum Lightness atau Luminance, Anda dapat membentangkan warna-warna lain hingga ke ekstrem putih·hitam
    • Jika beralih antara Lightness dan Luminance, distribusi warna di bagian ekstrem akan dihasilkan secara berbeda
    • Prinsip perancangan warna terinspirasi dari Refactoring UI karya Adam Wathan dan Steve Schoger, dan buku tersebut tidak menganjurkan penggunaan alat otomatis
    • Alat ini berfokus pada memulai dengan cepat pembuatan palet baru, bukan menggantikan jawaban akhir yang sudah jadi

API dan penggunaan output

  • Dengan Palette API, Anda bisa mengambil beberapa set palet
  • Ini dapat dimanfaatkan di alat desain yang perlu membuat palet 50~950 hanya dari satu nilai Hex
  • Saat ini API hanya mengembalikan palet berbasis nilai Hex default, dan opsi HSL tweak tidak disediakan
  • Palet yang dihasilkan disediakan dalam bentuk yang bisa ditempel langsung ke CSS untuk konfigurasi Tailwind
    • Contoh output mencakup variabel warna OKLCH dari --color-yellow-50 hingga --color-yellow-950 di dalam blok @theme

Bacaan terkait

1 komentar

 
GN⁺ 2024-02-03
Komentar di Hacker News

  • Akan bagus kalau alat seperti ini menyertakan pengalaman developer aksesibilitas secara bawaan
    Caranya, saat mendefinisikan palet warna, cukup dari nama warnanya saja kita bisa tahu apakah kombinasi itu aksesibel
    Misalnya, di sistem desain USWDS, kita bisa tahu bahwa blue-30 di atas gray-80 itu aksesibel (WCAG AA), karena selisih kedua nilainya 50 atau lebih
    Saya pernah menulis tentang konsep yang agak sempit ini: https://darekkay.com/blog/accessible-color-palette/

    • Meski disebut konsep sempit, menurut saya ini seharusnya menjadi prioritas utama dalam desain web
      Siapa pun pada suatu saat akan mengalami disabilitas, entah permanen atau sementara, dan bahkan alat bagus seperti Streamlit sering tidak bisa dipakai karena aksesibilitas
    • Radix Colors punya banyak fitur terkait aksesibilitas yang sudah tertanam
      https://www.radix-ui.com/colors
      Saya bekerja di WorkOS, dan Radix adalah proyek open source yang kami kelola
    • Stripe juga menulis tentang sistem warna aksesibel mereka: https://stripe.com/blog/accessible-color-systems
      Namun saya belum begitu tahu alat yang memakai konsep itu untuk menghasilkan palet baru
    • Material 3, spesifikasi cukup besar yang dipakai Google, juga punya sistem warna yang bekerja dengan cara seperti ini

  • Saya suka bermain-main dengan warna, dan ini juga alat yang bagus
    Alternatif lain yang lumayan antara lain https://adevade.github.io/color-scheme-generator/, https://colorcolor.in yang tidak langsung menghasilkan Tailwind tetapi kualitasnya bagus, http://colormind.io, dan https://uicolors.app/create

    • Saya sudah lama mencari alat warna yang sempurna, tapi belum menemukannya
      Saya ingin alat yang bisa menangani hal-hal tingkat lanjut sampai level yang ditunjukkan library ini: https://colorjs.io/
    • Saya ingin merekomendasikan https://github.com/ardov/huetone (https://huetone.ardov.me/)
      Ada UI unik yang belum saya lihat di alat serupa, dan lewat grafik kita bisa melihat L/C/H relatif dari seluruh warna dalam palet
      Berkat itu, lebih mudah membuat palet yang konsisten
    • Saya suka https://huemint.com/
    • Belakangan sepertinya situsnya agak lambat dimuat, tapi sejak dulu saya suka https://www.colourlovers.com
    • Daftar yang bagus
      Kalau menambahkan tautan teori warna umum yang sering saya pakai secara pribadi, https://paletton.com/ bisa membuat palet berbasis teori warna dan menghasilkan keseluruhan skema warna
      https://medialab.github.io/iwanthue/ memisahkan warna menggunakan k-means, dan bagus untuk warna grafik serta memastikan kontras

  • Baru-baru ini saya membuat satu
    Jauh lebih sederhana dan sangat dipengaruhi selera pribadi, tapi bisa menghasilkan konfigurasi Tailwind: https://ghola.dev paling enak dipakai di desktop atau iPad
    Ada juga tulisan panjang tentang bagaimana saya membuatnya dengan web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • Saya suka alat yang Anda buat
      Menyebut sesuatu sebagai generator palet kalau hanya menangani satu warna dalam satu waktu rasanya kurang tepat, atau setidaknya bukan itu yang saya cari
      Saya butuh generator palet yang membuat kumpulan warna untuk aplikasi, dan alat ini lebih dekat ke arah itu

  • Luar biasa
    Saya mulai dari satu logo dan membuat palet dalam kurang dari 1 menit, hasilnya lebih baik daripada yang terakhir kali saya buat sendiri selama 30 menit

  • Saya suka
    Saya penasaran apa cara paling mudah untuk menyinkronkan warna-warna ini dengan Figma
    Mungkin desainer profesional memakai plugin yang menghasilkan warna seperti ini lalu mengekspornya ke Tailwind

    • Apakah yang Anda cari plugin semacam ini? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens adalah pendekatan yang lumayan
    • Cara Figma menangani warna terlalu membuat frustrasi dan aneh, jadi sekarang saya tidak lagi memedulikannya
      Saya beberapa kali mencoba menggunakannya dengan benar, tapi terlalu manual dan merepotkan, sampai akhirnya menyerah

  • Alat yang bagus
    Pendekatan lain yang saya pakai di codebase adalah mendefinisikan palet warna sebagai variabel CSS, lalu membuat konfigurasi Tailwind menunjuk ke variabel itu
    Dengan begitu, tema warna yang berbeda bisa disisipkan saat runtime

  • Alat yang sangat berguna
    Setelah menghasilkan palet warna dari satu warna, saya memasukkan hasilnya ke https://palettte.app lalu menyesuaikan tiap warna secara manual sebelum dipakai

  • Saya penasaran apakah contoh brand di demo memang biasanya dipakai orang seperti itu dalam konfigurasi
    Saya kira penggunaannya adalah dengan memodifikasi warna dasar atau membuat variabel baru seperti primary, secondary

    • Saya pembuat tints.dev
      Set warna brand itu adalah warna yang saya pakai di blog saya simeongriggs.dev, dan memang saya memasukkan nilai sampel 500 ke alat ini untuk menghasilkan sisanya

  • Terlihat berguna untuk gradien
    Aneh tidak ada yang menyebut Paletton, padahal itu alat utama saya saat memilih warna: https://paletton.com/
    Kalau mulai dari warna dasar, Anda juga bisa mendapatkan gradien menuju warna-warna berdekatan dalam palet
    Khususnya harmoni tiga warna dan harmoni empat warna sangat berguna

  • Saya sedang aktif mencari cara menerapkan pergeseran warna, tapi butuh waktu lama untuk mengetahuinya