DevArbor
#708090

SlateGray — カラーコードとパレット

#708090  ·  rgb(112, 128, 144)  ·  hsl(210, 13%, 50%)

カラーコード

形式 値
HEX #708090
RGB rgb(112, 128, 144)
HSL hsl(210, 13%, 50%)

SlateGrayのシェード（暗色系）

#647382#596673#4E5965#434D56#374048#2C333A#21262B#161A1D

SlateGrayのティント（淡色系）

#7D8C9B#8C99A6#9AA6B1#A9B3BC#B7BFC8#C5CCD3#D4D9DE#E2E6E9

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

補色
#90806F
類似色 +30°
#6F6F90
類似色 −30°
#6F9090
トライアド +120°
#906F80
トライアド −120°
#80906F

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

白（#FFFFFF）との対比
4.05:1 — 大きいテキストのみAAパス
黒（#000000）との対比
5.18:1 — 通常テキストでAAパス

CSSスニペット

.element {
  color: #708090;
}

.element-bg {
  background-color: #708090;
  color: #000000;
}

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

SlateGrayについて

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

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

カラーピッカーを開く →

よくある質問

SlateGrayのRGB値は何ですか？
SlateGray（#708090）のRGB値は rgb(112, 128, 144) です。Red・Green・Blueそれぞれの光の量を0〜255のスケールで表しています。
SlateGrayは白背景でアクセシブルですか？
SlateGrayと白（#FFFFFF）のコントラスト比は 4.05:1 — 大きいテキストのみAAパス です。黒（#000000）との比は 5.18:1 — 通常テキストでAAパス です。WCAG 2.1ではAA（通常テキスト）に4.5:1、AAAに7:1以上が必要とされています。
SlateGrayに合う色は何ですか？
カラー理論に基づくと、SlateGray（hsl(210, 13%, 50%)）は補色・類似色・トライアドと相性がよいです。各ペアリングタイプの正確なHEX値は上のハーモニースウォッチを参照してください。