ColorTool
ログイン
#BBAB9F

#bbab9f ≈ Silver Pink

  • オレンジ
  • 明度: 高い
  • 彩度: 低め
  • 暖色
コントラストを確認 グラフで探索 ランダムな色

#bbab9fはオレンジ系の色です（明度：高い、彩度：低め）。 RGBでは赤73.33%、緑67.06%、青62.35%で構成され、CMYK印刷ではシアン0%、マゼンタ8.56%、イエロー14.97%、ブラック26.67%を使います。 HSLでは色相角25.71°、彩度17.07%、明度67.84%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は9.44:1（WCAG AAA）です。 最も近い色名はSilver Pink（#c4aead）で、ΔEは6.9です。

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

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

補色

  1. #bbab9f
  2. #9fafbb

分裂補色

  1. #bbab9f
  2. #9fbbb9
  3. #9fa1bb

類似色

  1. #bb9fa1
  2. #bbab9f
  3. #bbb99f

トライアド

  1. #bbab9f
  2. #9fbbab
  3. #ab9fbb

テトラード

  1. #bbab9f
  2. #afbb9f
  3. #9fafbb
  4. #ab9fbb

スクエア

  1. #bbab9f
  2. #a1bb9f
  3. #9fafbb
  4. #b99fbb

モノクロマティック

  1. #715e50
  2. #9b8472
  3. #bbab9f
  4. #dbd2cc
  5. #f7f5f3

シェード

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

  1. #bbab9f
  2. #a89a8f
  3. #96897f
  4. #83786f
  5. #70675f
  6. #5e5650
  7. #4b4440
  8. #383330
  9. #252220
  10. #131110
  11. #000000

ティント

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

  1. #bbab9f
  2. #c2b3a9
  3. #c9bcb2
  4. #cfc4bc
  5. #d6cdc5
  6. #ddd5cf
  7. #e4ddd9
  8. #ebe6e2
  9. #f1eeec
  10. #f8f7f5
  11. #ffffff

トーン

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

  1. #bbab9f
  2. #b5a79c
  3. #afa299
  4. #a99e96
  5. #a39a93
  6. #9e9690
  7. #98918c
  8. #928d89
  9. #8c8986
  10. #868483
  11. #808080

読みやすい文字 2.22:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 9.44:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #aeaeae 男性の約0.003%
不完全1色覚 #b3ada8 男性の約0.001%
1型2色覚（P型） #b0ac9e 男性の約1.01%
2型2色覚（D型） #b4af9f 男性の約1.27%
3型2色覚（T型） #c1a8a8 男性の約0.0001%
1型3色覚（P型弱） #b4ab9f 男性の約1.08%
2型3色覚（D型弱） #b7ae9f 男性の約4.63%
3型3色覚（T型弱） #bea9a4 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-bbab9f {
  color: #bbab9f;
}
背景色
.bg-bbab9f {
  background-color: #bbab9f;
  color: #000000;
}
枠線
.border-bbab9f {
  border: 2px solid #bbab9f;
}
CSS変数
:root {
  --color-primary: #bbab9f;
  --color-primary-rgb: 187 171 159;
  --color-primary-hsl: 26 17% 68%;
}
グラデーション
.gradient-bbab9f {
  background: linear-gradient(135deg, #bbab9f, #bbb99f);
}
色付きの影
.shadow-bbab9f {
  box-shadow: 0 8px 24px rgb(187 171 159 / 0.35);
}

#c4aead Silver Pink ΔE 6.90 #a9a9a9 Dark Gray ΔE 8.26 #a9a9a9 Dark Grey ΔE 8.26 #c0c0c0 Silver ΔE 9.52 #d2b48c Tan ΔE 9.99 #ebc2af Zinnwaldite ΔE 11.11 #edc9af Desert Sand ΔE 11.27 #445460 反転色 #aeaeae グレースケール 

Silver Pink
#bbab9f  rgb(187, 171, 159)  hsl(26, 17%, 68%)  Silver Pink
#9fafbb  rgb(159, 175, 187)  hsl(206, 17%, 68%)  Pastel Blue
#9fbbab  rgb(159, 187, 171)  hsl(146, 17%, 68%)  Opal
#ab9fbb  rgb(171, 159, 187)  hsl(266, 17%, 68%)  Pastel Purple