Barokit

🎨CSS カラー名辞典

CSS で使う 148 個の標準カラー名と HEX コードを一目で見て検索します。CSS 作成時の色のインスピレーション、迅速なプロトタイピング、デザインガイドの作成によく使われます。

🔒 ブラウザ内処理ウォーターマークなし登録不要

使い方

  1. 1カラー名または HEX で検索します。
  2. 2クリックしてコードをコピーします。

よくある質問

標準は?+

CSS Color Module Level 4。1 次(basic、16 個) + 2 次(extended、148 個)をすべて含みます。

名前の代わりに HEX を使うと?+

両方とも標準で結果は同じ。'red' と '#ff0000' は同じ。名前は可読性、HEX は正確性・微調整。

'rebeccapurple' のような奇妙な名前が?+

Eric Meyer の娘 Rebecca を偲んで追加された色です。CSS 標準に正式登録。

似た色が多すぎます。どう選べばよい?+

名前が似ていても微妙に異なります。例: lightgray(#D3D3D3)と silver(#C0C0C0)。デザインの統一性のため 1 つのパレット内でのみ使ってください。

Tailwind カラーとの比較?+

Tailwind は独自のカラーパレット(red-50 ~ red-900)。CSS named colors は標準なのでどこでも動作しますが、段階が少なくデザインシステムには足りない場合があります。

関連ツール