近いTailwindカラー検索

Nearest Tailwind Colour

任意の色にいちばん近いTailwindパレットの値を探し、見た目の色差も示します。

手元の色にいちばん近いTailwindパレットの値を探します。RGBの距離ではなくOKLabでのΔEで測ります。そのうえで、その色がどの系統に属するのかも答えます。別の質問ですが、たいていはそちらのほうが役に立ちます。

🔒 ブラウザの中だけで動きますtailwindcolorlookupcss

あなたの色

色

無彩色の系統を飛ばすslate、gray、zinc、neutral、stone といったものは、灰色に近い問い合わせでは必ず勝ちます。間違いではありませんが、たいていは知りたかった答えでもありません。

何で測っているか

距離は RGB のユークリッド距離ではなく OKLab での ΔEです。RGB で測ると濃紺と純粋な青は 128 離れていて、はるかに目につく差である 2 つの中間グレーは 16 しか離れておらず、4 倍近いことになってしまいます。OKLab は直線距離が知覚的な差に近くなるよう作られていて、ここで問うているのはまさにそれです。

≤ 0.001 — 同じ色です。これがその Tailwind の色です。
≤ 0.02 — 見分けがつく限界より小さい差です。そのまま置き換えて構いません。
≤ 0.05 — 並べれば違いますが、単独で見るぶんには十分近い色です。
≤ 0.1 — はっきり違います。背景色なら構いませんが、ブランドの印には向きません。
> 0.1 — 別の色です。Tailwind に近いものはないので、テーマを広げてください。

パレットはインストール済みの Tailwind 4.3.3 から読み、実行のたびにテストで突き合わせています。

いちばん近い色

indigo-600

#4f39f6

並べれば違いますが、単独で見るぶんには十分近い色です。

ΔE OKLab

0.0319

Tailwind の値

oklch(51.1% 0.262 276.966)

次に近い色

indigo-700#432dd7ΔE 0.0545
blue-700#1447e6ΔE 0.0580
blue-600#155dfcΔE 0.0698
indigo-500#6260ffΔE 0.0745
violet-700#7008e7ΔE 0.0810
violet-600#7f22feΔE 0.0925
violet-800#5d0ec0ΔE 0.1010

近い系統

indigoいちばん近い段階 600ΔE 0.0319
blueいちばん近い段階 700ΔE 0.0580
violetいちばん近い段階 700ΔE 0.0810
purpleいちばん近い段階 700ΔE 0.1132
skyいちばん近い段階 700ΔE 0.1415

「いちばん近い色」とは別の問いで、たいていはこちらのほうが役に立ちます。ブランドの色がどの系統に属するかを、その系統のいちばん良い段階で採点します。

ここに十分近いものがなければ、いちばん近いもので妥協せずテーマを広げるのが答えです。 50–950 のランプ全体を作るで自分の色からランプを作り、 @theme に貼り付けてください。

使い方

色を入れます
たいていは誰かから渡されたブランドカラーの16進数でしょう。いちばん近いトークンと、その16進数、ΔEがすぐに出ます。
色相を合わせたいなら無彩色は外します
slate、gray、zinc、neutral、stoneは灰色に近い問い合わせでは必ず勝ちます。正しい答えではありますが、知りたかった答えであることはめったにありません。
系統の一覧を見ます
系統ごとに、いちばん近い段階で点数を付けます。「いちばん近い見本はindigo-600」より「このブランドカラーはindigo系」のほうが動けます。