ColorTool
ログイン
#5D4E46

#5d4e46 ≈ Umber

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

#5d4e46は茶系の色です（明度：低い、彩度：低め）。 RGBでは赤36.47%、緑30.59%、青27.45%で構成され、CMYK印刷ではシアン0%、マゼンタ16.13%、イエロー24.73%、ブラック63.53%を使います。 HSLでは色相角20.87°、彩度14.11%、明度31.96%です。 暖色で、信頼性、温もり、素朴さを連想させることが多い色です。 デザインでは主にカフェやコーヒーブランド、素朴でナチュラルなスタイル、企業のブランディングに使われます。 この色の上に白の文字を置くとコントラスト比は7.94:1（WCAG AAA）です。 最も近い色名はUmber（#635147）で、ΔEは1.91です。

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

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

補色

  1. #5d4e46
  2. #46555d

分裂補色

  1. #5d4e46
  2. #465d59
  3. #46495d

類似色

  1. #5d4649
  2. #5d4e46
  3. #5d5946

トライアド

  1. #5d4e46
  2. #465d4e
  3. #4e465d

テトラード

  1. #5d4e46
  2. #555d46
  3. #46555d
  4. #4e465d

スクエア

  1. #5d4e46
  2. #495d46
  3. #46555d
  4. #59465d

モノクロマティック

  1. #0c0a09
  2. #312925
  3. #5d4e46
  4. #897367
  5. #ac9a90

シェード

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

  1. #5d4e46
  2. #54463f
  3. #4a3e38
  4. #413731
  5. #382f2a
  6. #2f2723
  7. #251f1c
  8. #1c1715
  9. #13100e
  10. #090807
  11. #000000

ティント

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

  1. #5d4e46
  2. #6d6059
  3. #7d716b
  4. #8e837e
  5. #9e9590
  6. #aea7a3
  7. #beb8b5
  8. #cecac8
  9. #dfdcda
  10. #efeded
  11. #ffffff

トーン

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

  1. #5d4e46
  2. #61534c
  3. #645852
  4. #685d57
  5. #6b625d
  6. #6f6763
  7. #726c69
  8. #76716f
  9. #797674
  10. #7d7b7a
  11. #808080

読みやすい文字 7.94:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓
読みやすい文字 2.64:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕

1色覚（全色盲） #515151 男性の約0.003%
不完全1色覚 #56504d 男性の約0.001%
1型2色覚（P型） #524f45 男性の約1.01%
2型2色覚（D型） #555246 男性の約1.27%
3型2色覚（T型） #614c4c 男性の約0.0001%
1型3色覚（P型弱） #574f46 男性の約1.08%
2型3色覚（D型弱） #595146 男性の約4.63%
3型3色覚（T型弱） #604d4a 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-5d4e46 {
  color: #5d4e46;
}
背景色
.bg-5d4e46 {
  background-color: #5d4e46;
  color: #ffffff;
}
枠線
.border-5d4e46 {
  border: 2px solid #5d4e46;
}
CSS変数
:root {
  --color-primary: #5d4e46;
  --color-primary-rgb: 93 78 70;
  --color-primary-hsl: 21 14% 32%;
}
グラデーション
.gradient-5d4e46 {
  background: linear-gradient(135deg, #5d4e46, #5d5946);
}
色付きの影
.shadow-5d4e46 {
  box-shadow: 0 8px 24px rgb(93 78 70 / 0.35);
}

#635147 Umber ΔE 1.91 #645452 Wenge ΔE 4.28 #674c47 Liver ΔE 5.95 #483c32 Taupe ΔE 6.69 #555555 Davy's Gray ΔE 8.36 #6f4e37 Coffee ΔE 8.49 #3d2b1f Bistre ΔE 11.69 #a2b1b9 反転色 #515151 グレースケール 

Umber
#5d4e46  rgb(93, 78, 70)  hsl(21, 14%, 32%)  Umber
#46555d  rgb(70, 85, 93)  hsl(201, 14%, 32%)  Outer Space
#465d4e  rgb(70, 93, 78)  hsl(141, 14%, 32%)  Feldgrau
#4e465d  rgb(78, 70, 93)  hsl(261, 14%, 32%)  Eggplant