デザインツール

色名検索 - 近い CSS named color を探索

色を入力すると、最も近い CSS named color 候補をブラウザ内で距離順に表示します。name と hex を一緒に確認できるため、keyword に寄せたいときや標準 color name を学ぶときに便利です。

クイック切替→カラーフォーマット変換

ColorNamed colorsCSS

クイック切替:カラーフォーマット変換配色ハーモナイザーパステルカラージェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

hex 値に近い CSS keyword を探す
独自 swatch に近い named color を選ぶ
よく使う CSS color name を学ぶ

使い方

色を選ぶか値を入力する
距離順に並んだ named color 候補を確認する
swatch をクリックして name または値をコピーする

入出力サンプル

入力

#e74c3c

最も近い色

Crimson (#dc143c)

FAQ

何色分の color name が入っていますか？

CSS standard named colors 148 色を対象にしています。

最上位の候補は常に完全一致ですか？

必ずしもそうではありません。結果は距離順なので、完全一致がない場合は最も近い keyword を候補として使ってください。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

カラーフォーマット変換

カラーフォーマット変換 - HEX、RGB、HSL オンライン

利用可能

HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。

カラー HEX RGB

ツールを開く

配色ハーモナイザー

配色ハーモナイザー - 定番配色ルール

利用可能

基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。

Palette Color Harmony

ツールを開く

パステルカラージェネレーター

パステルカラージェネレーター - 柔らかい低彩度パレット

利用可能

柔らかいパステル調やモランディ風の配色をブラウザ内で生成できます。色数やスタイルを選び、残したい swatch をロックして、チャート、背景、やさしい UI テーマ向けに HEX 一覧や CSS 変数として書き出せます。

パステルパレット色

ツールを開く