カラーパレット

グレー

白と黒のちょうど中間の色です。ニュートラルでバランスがよく、ほかの色を引き立てます。補助的なテキストや定番の服、モダンなインテリアに使われます。

別名:灰色, グレイ

グレー · #808080

グレーの基本情報

グレー(#808080)は、ニュートラル・中くらいの明るさ・ほぼ無彩色の色です。グレー系の色のグループに属します。RGBの値は赤128・緑128・青128(各255段階)。主な用途:ウェブ, インテリア, ファッション, ブランディング。

グレーの濃淡:明るいトーンと暗いトーン

明るい色から暗い色の順に並んでいます。色をタップするとカラーコードをコピーできます。

グレーに合う色

白清潔感のあるミニマルな組み合わせです。黒洗練されたモダンな配色です。黄色グレーを明るくする、陽気な差し色です。くすみピンクやわらかくモダンな組み合わせです。ネイビー上品でプロフェッショナルな印象に。マスタード冷たいベースに温かみを加えます。セージグリーン落ち着いたナチュラルな配色です。ワインレッド深みのある上品なアクセントです。
グレーのファッション・インテリアでの合わせ方 →

グレーの配色ハーモニー

色相環にもとづいた配色です。配色ハーモニーツールでさらに多くのパターンを試せます。

補色
類似色
トライアド
スプリット・コンプリメンタリー
テトラード

グレーを使ったカラーパレット

カラーコードをコピーするか、エディターで開いて自由に調整できます。

モノクロマティックパレット · グレー
類似色パレット · グレー
補色パレット · グレー
トライアドパレット · グレー
ニュートラルカラー入りパレット · グレー
アクセントカラー入りパレット · グレー

グレーと文字色のコントラスト

白い文字コントラスト比 3.9:1 · AA(大きな文字)
黒い文字コントラスト比 5.3:1 · AA

WCAG 2.1の基準にもとづいています。ほかの色の組み合わせはコントラストチェッカーで確認できます。

CSSコード

:root {
  --gray: #808080;
  --gray-rgb: 128, 128, 128;
}
.bg { background-color: var(--gray); }
.text { color: var(--gray); }

グレーに近い色

スモークグレースチールグレー鉛色ストーングレースレートグレーダークグレーブルーグレーグレージュグラファイトモカ

この色を使ったテーマ別パレット

その他のグレー系の色

ライトグレーダークグレーシルバーチャコールグレースレートグレーアッシュグレーパールグレーオックスフォードグレーグラファイトトープスチールグレー鉛色スモークグレーストーングレープラチナブルーグレーグレージュ

よくある質問

グレーのカラーコードは?

グレーのHEXコードは#808080です。RGBではrgb(128, 128, 128)、HSLではhsl(0, 0%, 50%)、CMYKでは0, 0, 0, 50となります。

グレーの補色は何色ですか?

色相環で反対側にある補色は#808080で、グレーに近い色合いです。少量をアクセントとして使うと、強いコントラストが生まれます。

グレーの上に白い文字を置いても読みやすいですか?

黒い文字のほうがおすすめです。白とのコントラスト比は3.9:1しかありませんが、黒とは5.3:1になります。

グレーに合う色は?

相性のよい色:白, 黒, 黄色, くすみピンク, ネイビー。青みのグレーと緑みのグレーのように、アンダートーンの違うグレー同士を混ぜるのは避けましょう。ちぐはぐに見えます。黄みの強いベージュとの組み合わせも、くすんで見えることがあります。