#D32F2F

#D32F2F — カラーコードとパレット

Q: #D32F2FのRGB値は何ですか？

#D32F2F（#D32F2F）のRGB値はrgb(211, 47, 47)です。0〜255スケールで赤・緑・青チャンネルの値に分解されます。

Q: #D32F2Fは白背景でアクセシブルですか？

#D32F2F（#D32F2F）と白（#FFFFFF）背景のコントラスト比は4.98:1 — 通常テキストでAAパスです。黒（#000000）背景では4.22:1 — 大きいテキストのみAAパスです。WCAG 2.1では通常テキストのAAに4.5:1、AAAに7:1以上が必要です。

Q: #D32F2Fに合う色は何ですか？

#D32F2F（#D32F2F）は補色や類似色と相性がよいです。補色は#31D3D3、+30°の類似色は#D38231、トライアドの1色は#31D331です。これらの関係はHSL（hsl(0, 65%, 51%)）を基準としたカラー理論から導かれています。

#D32F2F · rgb(211, 47, 47) · hsl(0, 65%, 51%)

カラーコード

形式	値
HEX	#D32F2F
RGB	rgb(211, 47, 47)
HSL	hsl(0, 65%, 51%)

#D32F2Fのシェード（暗色系）

#C22929

#AD2525

#972020

#821C1C

#6D1717

#581313

#430E0E

#2E0A0A

#D32F2Fのティント（淡色系）

#D84646

#DC5B5B

#E17070

#E58585

#EA9A9A

#EEAFAF

#F3C4C4

#F7D9D9

カラーペアリングとハーモニー

補色

#31D3D3

類似色 +30°

#D38231

類似色 −30°

#D33182

トライアド +120°

#31D331

トライアド −120°

#3131D3

コントラストとアクセシビリティ（WCAG 2.1）

白（#FFFFFF）との対比

4.98:1 — 通常テキストでAAパス

黒（#000000）との対比

4.22:1 — 大きいテキストのみAAパス

CSSスニペット

.element {
  color: #D32F2F;
}

.element-bg {
  background-color: #D32F2F;
  color: #ffffff;
}

.element-border {
  border: 2px solid #D32F2F;
}

#D32F2Fについて

#D32F2Fはhsl(0, 65%, 51%)（色相0°、彩度65%、明度51%）で定義される中間の明度のの高い彩度カラーで、HEXコードは#D32F2Fです。正確なカラーモデル値はRGBでrgb(211, 47, 47)、HSLでhsl(0, 65%, 51%)です。白背景でのコントラスト比は4.98:1 — 通常テキストでAAパス、黒背景では4.22:1 — 大きいテキストのみAAパスです。#D32F2FはUI要素・背景・テキスト・ボーダー・装飾アクセントなど多用途に活用できます。下のシェードセクションでは徐々に暗くなるバリエーションを、ティントストリップでは徐々に明るくなるバリエーションを確認でき、トーンパレットの構築に役立ちます。ハーモニースウォッチはHSL色相環に基づく補色・類似色・トライアドを提供します。

色をインタラクティブに確認したい、パレットを生成したい、カラー形式を変換したいですか？DevArborのカラーピッカーをご活用ください。

カラーピッカーを開く →

よくある質問

#D32F2FのRGB値は何ですか？

#D32F2F（#D32F2F）のRGB値は rgb(211, 47, 47) です。Red・Green・Blueそれぞれの光の量を0〜255のスケールで表しています。

#D32F2Fは白背景でアクセシブルですか？

#D32F2Fと白（#FFFFFF）のコントラスト比は 4.98:1 — 通常テキストでAAパス です。黒（#000000）との比は 4.22:1 — 大きいテキストのみAAパス です。WCAG 2.1ではAA（通常テキスト）に4.5:1、AAAに7:1以上が必要とされています。

#D32F2Fに合う色は何ですか？

カラー理論に基づくと、#D32F2F（hsl(0, 65%, 51%)）は補色・類似色・トライアドと相性がよいです。各ペアリングタイプの正確なHEX値は上のハーモニースウォッチを参照してください。