hex2tailwind

hex2tailwindの紹介

hex2tailwindは、任意の16進カラーコードを最も近いTailwind CSSクラスに変換するWebベースのツールです。CIEDE2000（ΔE00）の知覚色差アルゴリズムを用いて、入力された色をTailwind v4のOKLCHパレットと比較し、視覚的に最も近いマッチを返します。

このツールは、Tailwind CSSを使用して作業を行うフロントエンド開発者やUIデザイナー向けに設計されており、一貫性のあるパレット準拠のカラー選択を可能にします。即時結果表示、並び替えプレビュー、クラス名のワンクリックコピー機能を備えており、効率的なワークフローを実現します。また、内蔵のパレットジェネレーターにより、単一の色からOKLCHを用いて50～950までの完全なTailwindスケールを生成することもできます。

主なポイント

• CIEDE2000（ΔE00）を用いて、16進カラーコードを最も近いTailwind CSSクラスに変換
• Tailwind v4のOKLCHベースパレットと照合し、知覚的一貫性を確保
• 入力色と一致した色を並べて表示し、即時にフィードバック
• 推奨されるTailwindクラスをワンクリックでコピー可能
• ベースカラーからOKLCHを使用して50～950のTailwindスケールを自動生成
• デスクトップ、タブレット、モバイルに対応したレスポンシブUI
• #記号の有無に関わらず16進数入力を受け付ける
• アカウント不要、広告なし、利用制限なしで無料で利用可能

hex2tailwindの仕組み

16進数値（例：#262626または262626）を貼り付けると、hex2tailwindは入力を正規化し、Tailwind v4のOKLCHパレットに含まれるすべての色と比較します。この比較にはCIEDE2000（ΔE00）式が使用され、単なるRGB距離ではなく、人間の視覚による知覚的差異を推定します。

最小のΔE00値を持つクラスが返され、元の色と提案されたTailwindカラーが並んで表示されるため、視覚的に確認できます。得られたクラス名はすぐにコピーでき、コードベースにそのまま使用可能です。

より広範なデザインニーズに対応するため、パレットジェネレーターはOKLCHを用いて単一のベースカラーから50～950までの完全なTailwindスタイルのスケールを生成し、各ステップ間で知覚的に均一な色調を実現します。

技術概要

主な利点と用途

• デザインからコードへ：Figma、Sketch、XDなどのカラーパレットを公式Tailwindクラスに変換し、一貫した実装を可能にします。
• ブランド整合性：ブランドカラーの16進数値を手動での探索なしに、最も近いTailwindクラスと照合できます。
• 既存プロジェクトのアップグレード：古いコードベース内の個別の16進数カラーを標準化されたTailwindクラスに置き換えます。
• クライアント対応：クライアントから提供された16進数コードを迅速かつ信頼性高くTailwind対応クラスに変換します。
• 迅速なプロトタイピング：カスタムパレットを作成せずに、初期のUI反復中に視覚的に適切なTailwindカラーを適用できます。
• 学習およびリファレンス：16進数値がTailwindのOKLCHパレットとどのように関連しているかを理解し、知覚的色マッチングの知識を深められます。