ColorTool
ログイン
#5F704E

#5f704e ≈ Dark Olive Green

  • 黄緑
  • 明度: 低い
  • 彩度: 低め
  • 中間色
コントラストを確認 グラフで探索 ランダムな色

#5f704eは黄緑系の色です（明度：低い、彩度：低め）。 RGBでは赤37.25%、緑43.92%、青30.59%で構成され、CMYK印刷ではシアン15.18%、マゼンタ0%、イエロー30.36%、ブラック56.08%を使います。 HSLでは色相角90°、彩度17.89%、明度37.25%です。 暖色と寒色の中間で、新鮮さ、成長、活力を連想させることが多い色です。 デザインでは主にエコブランド、健康・ウェルネス、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は5.36:1（WCAG AA）です。 最も近い色名はDark Olive Green（#556b2f）で、ΔEは7.16です。

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

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

補色

  1. #5f704e
  2. #5f4e70

分裂補色

  1. #5f704e
  2. #4e4e70
  3. #704e70

類似色

  1. #70704e
  2. #5f704e
  3. #4e704e

トライアド

  1. #5f704e
  2. #4e5f70
  3. #704e5f

テトラード

  1. #5f704e
  2. #4e705f
  3. #5f4e70
  4. #704e5f

スクエア

  1. #5f704e
  2. #4e7070
  3. #5f4e70
  4. #704e4e

モノクロマティック

  1. #12160f
  2. #39432f
  3. #5f704e
  4. #859b6f
  5. #abba9d

シェード

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

  1. #5f704e
  2. #566546
  3. #4c5a3e
  4. #434e37
  5. #39432f
  6. #303827
  7. #262d1f
  8. #1d2217
  9. #131610
  10. #0a0b08
  11. #000000

ティント

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

  1. #5f704e
  2. #6f7e60
  3. #7f8d71
  4. #8f9b83
  5. #9fa995
  6. #afb8a7
  7. #bfc6b8
  8. #cfd4ca
  9. #dfe2dc
  10. #eff1ed
  11. #ffffff

トーン

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

  1. #5f704e
  2. #627253
  3. #667358
  4. #69755d
  5. #6c7662
  6. #707867
  7. #737a6c
  8. #767b71
  9. #797d76
  10. #7d7e7b
  11. #808080

読みやすい文字 5.36:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 3.91:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #6b6b6b 男性の約0.003%
不完全1色覚 #666d60 男性の約0.001%
1型2色覚（P型） #736b4c 男性の約1.01%
2型2色覚（D型） #716a50 男性の約1.27%
3型2色覚（T型） #606d67 男性の約0.0001%
1型3色覚（P型弱） #6c6d4d 男性の約1.08%
2型3色覚（D型弱） #6a6d4f 男性の約4.63%
3型3色覚（T型弱） #606e5e 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-5f704e {
  color: #5f704e;
}
背景色
.bg-5f704e {
  background-color: #5f704e;
  color: #ffffff;
}
枠線
.border-5f704e {
  border: 2px solid #5f704e;
}
CSS変数
:root {
  --color-primary: #5f704e;
  --color-primary-rgb: 95 112 78;
  --color-primary-hsl: 90 18% 37%;
}
グラデーション
.gradient-5f704e {
  background: linear-gradient(135deg, #5f704e, #4e704e);
}
色付きの影
.shadow-5f704e {
  box-shadow: 0 8px 24px rgb(95 112 78 / 0.35);
}

#556b2f Dark Olive Green ΔE 7.16 #4f7942 Fern Green ΔE 7.34 #355e3b Hunter Green ΔE 10.11 #4d5d53 Feldgrau ΔE 10.88 #507d2a Sap Green ΔE 11.19 #738678 Xanadu ΔE 11.71 #4b5320 Army Green ΔE 11.92 #a08fb1 反転色 #6b6b6b グレースケール 

Dark Olive Green
#5f704e  rgb(95, 112, 78)  hsl(90, 18%, 37%)  Dark Olive Green
#5f4e70  rgb(95, 78, 112)  hsl(270, 18%, 37%)  Eggplant
#4e5f70  rgb(78, 95, 112)  hsl(210, 18%, 37%)  Queen Blue
#704e5f  rgb(112, 78, 95)  hsl(330, 18%, 37%)  Eggplant