Tailwind CSS 11段階カラーパレット生成ツールとAPI

 (tints.dev)
5 ポイント 投稿者 GN⁺ 2024-02-03 | 1件のコメント | WhatsAppで共有
  • Tailwind CSS のパレット作業を、単一のHex値から始めて50〜950までの11段階カラーへすばやく拡張できる
  • 基準ストップはデフォルトで 500 で、必要に応じて50〜950の別の位置を基準色として指定できる
  • 彩度とHueを調整することで、単なる明度変化より自然なパレットを作成できる
  • Lightness/Luminance の最小・最大値やモード切り替えに応じて、白・黒側の色分布が変わる
  • APIは現在、基本のHex値ベースのパレット返却に注力しており、HSL調整オプション はまだ提供していない

Tailwind CSS パレットの作成

  • Palette Creator は有効な16進カラー値を初期値として受け取り、Tailwind CSS向けの11段階パレットを生成する
  • デフォルトの基準ストップは 500 だが、50〜950の別ストップに変更して、任意の色をパレットの中心に置ける

  • 色の調整方法

    • 100% Saturation の色では、Hue Shift を上下に適用してパレットに変化を加えられる
    • 彩度の低いベースカラーでは、両端で Saturation を高めるとより面白いパレットになる
    • Minimum/Maximum Lightness または Luminance を調整して、残りの色を白・黒の極端な側まで広げられる
    • Lightness と Luminance を切り替えると、両極端の色分布が異なる形で生成される
    • 色設計の原則は Adam Wathan と Steve Schoger の Refactoring UI に着想を得ているが、同書では自動化ツールの使用は推奨していない
    • このツールは完成済みの正解を代わりに作るのではなく、新しいパレット生成を すばやく始める ことに重点を置いている

APIと出力の利用

  • Palette API で複数のパレットセットを取得できる
  • 単一のHex値だけで50〜950のパレットを作る必要があるデザインツールで活用できる
  • 現在のAPIは基本のHex値ベースのパレットのみを返し、HSL tweak オプションは提供していない
  • 生成されたパレットは、Tailwind設定用CSSに貼り付けられる形式で提供される
    • 出力例には @theme ブロック内で --color-yellow-50 から --color-yellow-950 までの OKLCH カラー変数が含まれる

関連記事

1件のコメント

 
GN⁺ 2024-02-03
Hacker News のコメント

  • こういうツールには、アクセシビリティの開発者体験が標準で入っているとよさそう
    カラーパレットを定義するとき、色名を見るだけで組み合わせがアクセシブルかどうか分かるようにする方式
    例えば USWDS デザインシステムでは、blue-30 on gray-80 がアクセシブル（WCAG AA）だと分かる。2つの値の差が50以上だから
    このやや狭い概念について、以前に記事を書いたことがある: https://darekkay.com/blog/accessible-color-palette/

    • 狭い概念と言ったけれど、Web デザインでは最優先要素であるべきだと思う
      誰でもいつかは、恒久的であれ一時的であれ障害を経験するし、Streamlit のような優れたツールもアクセシビリティのために使えないことが多い
    • Radix Colors にはアクセシビリティ関連の機能がたくさん組み込まれている
      https://www.radix-ui.com/colors
      WorkOS で働いていて、Radix は私たちが運営しているオープンソースプロジェクト
    • Stripe も自社のアクセシブルなカラーシステムについて記事を出している: https://stripe.com/blog/accessible-color-systems
      ただ、その概念を活用して新しいパレットを生成するツールはまだよく分からない
    • Google が使っているかなり大きな仕様である Material 3 にも、こういう形で動作するカラーシステムがある

  • 色で遊ぶのが好きだけど、これも良いツール
    他の良い代替としては 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 で使うのが一番良い
    Web Components でどう作ったかについての長い記事もある: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • 作ったツールは気に入った
      一度に1色だけ扱うものをパレット生成器と呼ぶのは違う気がするし、少なくとも自分が探しているものではない
      アプリ用の色セットを作ってくれるパレット生成器が必要で、このツールはそちらに近い

  • 素晴らしい
    ロゴひとつから始めて1分もかからずにパレットを作れたが、前回自分で30分かけて作ったものより出来が良かった

  • 気に入った
    これらの色を Figma と同期する一番簡単な方法が何か気になる
    プロのデザイナーは、こういう色を生成して Tailwind にエクスポートするプラグインを使っているのかもしれない

    • こういう種類のプラグインを探している？ https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens は良いアプローチ
    • Figma の色の扱い方はあまりにももどかしくて変なので、もう気にしなくなった
      何度かちゃんと使おうとしたけど、手作業が多すぎて面倒で、諦めることになった

  • 良いツール
    自分のコードベースで使っている別のアプローチは、CSS 変数でカラーパレットを定義し、Tailwind 設定はその変数を指すようにする方法
    そうすれば実行時に異なるカラーテーマを差し込める

  • とても便利なツール
    単一色からカラーパレットを生成したあと、結果を https://palettte.app に入れて各色を手動で調整して使っている

  • デモにある brand の例は、通常設定で人々がこう使うものなのか気になる
    基本色を修正するか、primary、secondary のような新しい変数を作る形で使うのだと思っていた

    • tints.dev を作った人です
      brand の色セットは私のブログ simeongriggs.dev で使っている色で、実際にこのツールに 500 の見本値を入れて残りを生成した

  • グラデーションに役立ちそう
    誰も Paletton に触れていないのが不思議だけど、色を選ぶときの自分の主力ツール: https://paletton.com/
    基本色から始めると、パレット内の隣接色へつながるグラデーションも得られる
    特に三色配色と四色配色が有用

  • 色相シフトを適用する方法を積極的に探していたのに、見つけるまでかなり時間がかかった