ColorTool
ログイン
#696F87

#696f87 ≈ Slate Gray

  • 青
  • 明度: 中程度
  • 彩度: 低め
  • 寒色
コントラストを確認 グラフで探索 ランダムな色

#696f87は青系の色です（明度：中程度、彩度：低め）。 RGBでは赤41.18%、緑43.53%、青52.94%で構成され、CMYK印刷ではシアン22.22%、マゼンタ17.78%、イエロー0%、ブラック47.06%を使います。 HSLでは色相角228°、彩度12.5%、明度47.06%です。 寒色で、信頼、安定、集中を連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は4.97:1（WCAG AA）です。 最も近い色名はSlate Gray（#708090）で、ΔEは9.05です。

この色の測定値から自動生成した説明です。

HEX
RGB
RGB（%）
CMY
CMYK
HSL
HSV / HSB
Webセーフ#666699
CIE-LAB
XYZ
xyY
CIE-LCH
CIE-LUV
Hunter-Lab
OKLab
2進数
10進数
相対輝度0.1612

補色

  1. #696f87
  2. #878169

分裂補色

  1. #696f87
  2. #877269
  3. #7e8769

類似色

  1. #697e87
  2. #696f87
  3. #726987

トライアド

  1. #696f87
  2. #87696f
  3. #6f8769

テトラード

  1. #696f87
  2. #816987
  3. #878169
  4. #6f8769

スクエア

  1. #696f87
  2. #87697e
  3. #878169
  4. #698772

モノクロマティック

  1. #262831
  2. #484c5c
  3. #696f87
  4. #9297aa
  5. #bdc0cc

シェード

#696f87に黒を段階的に混ぜた色です。

  1. #696f87
  2. #5f647a
  3. #54596c
  4. #4a4e5f
  5. #3f4351
  6. #353844
  7. #2a2c36
  8. #202129
  9. #15161b
  10. #0b0b0e
  11. #000000

ティント

#696f87に白を段階的に混ぜた色です。

  1. #696f87
  2. #787d93
  3. #878c9f
  4. #969aab
  5. #a5a9b7
  6. #b4b7c3
  7. #c3c5cf
  8. #d2d4db
  9. #e1e2e7
  10. #f0f1f3
  11. #ffffff

トーン

#696f87にグレーを段階的に混ぜた色です。

  1. #696f87
  2. #6b7186
  3. #6e7286
  4. #707485
  5. #727684
  6. #757884
  7. #777983
  8. #797b82
  9. #7b7d81
  10. #7e7e81
  11. #808080

読みやすい文字 4.97:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 4.22:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #707070 男性の約0.003%
不完全1色覚 #6d6f7a 男性の約0.001%
1型2色覚（P型） #687188 男性の約1.01%
2型2色覚（D型） #666f86 男性の約1.27%
3型2色覚（T型） #627377 男性の約0.0001%
1型3色覚（P型弱） #697088 男性の約1.08%
2型3色覚（D型弱） #676f87 男性の約4.63%
3型3色覚（T型弱） #65727e 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-696f87 {
  color: #696f87;
}
背景色
.bg-696f87 {
  background-color: #696f87;
  color: #ffffff;
}
枠線
.border-696f87 {
  border: 2px solid #696f87;
}
CSS変数
:root {
  --color-primary: #696f87;
  --color-primary-rgb: 105 111 135;
  --color-primary-hsl: 228 13% 47%;
}
グラデーション
.gradient-696f87 {
  background: linear-gradient(135deg, #696f87, #726987);
}
色付きの影
.shadow-696f87 {
  box-shadow: 0 8px 24px rgb(105 111 135 / 0.35);
}

#708090 Slate Gray ΔE 9.05 #708090 Slate Grey ΔE 9.05 #796878 Old Lavender ΔE 10.34 #436b95 Queen Blue ΔE 10.88 #778899 Light Slate Gray ΔE 11.22 #778899 Light Slate Grey ΔE 11.22 #696969 Dim Gray ΔE 11.38 #969078 反転色 #707070 グレースケール 

Slate Gray
#696f87  rgb(105, 111, 135)  hsl(228, 13%, 47%)  Slate Gray
#878169  rgb(135, 129, 105)  hsl(48, 13%, 47%)  Battleship Gray
#87696f  rgb(135, 105, 111)  hsl(348, 13%, 47%)  Mauve Taupe
#6f8769  rgb(111, 135, 105)  hsl(108, 13%, 47%)  Xanadu