ColorTool
ログイン
#3C5067

#3c5067 ≈ Charcoal

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

#3c5067は空色系の色です（明度：低い、彩度：低め）。 RGBでは赤23.53%、緑31.37%、青40.39%で構成され、CMYK印刷ではシアン41.75%、マゼンタ22.33%、イエロー0%、ブラック59.61%を使います。 HSLでは色相角212.09°、彩度26.38%、明度31.96%です。 寒色で、開放感、自由、穏やかさを連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、企業のブランディングに使われます。 この色の上に白の文字を置くとコントラスト比は8.28:1（WCAG AAA）です。 最も近い色名はCharcoal（#36454f）で、ΔEは6.97です。

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

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

補色

  1. #3c5067
  2. #67533c

分裂補色

  1. #3c5067
  2. #673d3c
  3. #65673c

類似色

  1. #3c6567
  2. #3c5067
  3. #3d3c67

トライアド

  1. #3c5067
  2. #673c50
  3. #50673c

テトラード

  1. #3c5067
  2. #533c67
  3. #67533c
  4. #50673c

スクエア

  1. #3c5067
  2. #673c65
  3. #67533c
  4. #3c673d

モノクロマティック

  1. #080a0d
  2. #202a37
  3. #3c5067
  4. #587697
  5. #849cb8

シェード

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

  1. #3c5067
  2. #36485d
  3. #304052
  4. #2a3848
  5. #24303e
  6. #1e2834
  7. #182029
  8. #12181f
  9. #0c1015
  10. #06080a
  11. #000000

ティント

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

  1. #3c5067
  2. #506276
  3. #637385
  4. #778595
  5. #8a96a4
  6. #9ea8b3
  7. #b1b9c2
  8. #c5cbd1
  9. #d8dce1
  10. #eceef0
  11. #ffffff

トーン

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

  1. #3c5067
  2. #43556a
  3. #4a5a6c
  4. #505e6f
  5. #576371
  6. #5e6874
  7. #656d76
  8. #6c7279
  9. #72767b
  10. #797b7e
  11. #808080

読みやすい文字 8.28:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓
読みやすい文字 2.54:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕

1色覚（全色盲） #4e4e4e 男性の約0.003%
不完全1色覚 #484f59 男性の約0.001%
1型2色覚（P型） #475168 男性の約1.01%
2型2色覚（D型） #424c67 男性の約1.27%
3型2色覚（T型） #2d5558 男性の約0.0001%
1型3色覚（P型弱） #435068 男性の約1.08%
2型3色覚（D型弱） #404e67 男性の約4.63%
3型3色覚（T型弱） #34535e 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-3c5067 {
  color: #3c5067;
}
背景色
.bg-3c5067 {
  background-color: #3c5067;
  color: #ffffff;
}
枠線
.border-3c5067 {
  border: 2px solid #3c5067;
}
CSS変数
:root {
  --color-primary: #3c5067;
  --color-primary-rgb: 60 80 103;
  --color-primary-hsl: 212 26% 32%;
}
グラデーション
.gradient-3c5067 {
  background: linear-gradient(135deg, #3c5067, #3d3c67);
}
色付きの影
.shadow-3c5067 {
  box-shadow: 0 8px 24px rgb(60 80 103 / 0.35);
}

#36454f Charcoal ΔE 6.97 #0f4d92 Yale Blue ΔE 8.44 #0047ab Cobalt Blue ΔE 9.87 #414a4c Outer Space ΔE 10.16 #26619c Lapis Lazuli ΔE 10.20 #483d8b Dark Slate Blue ΔE 10.56 #0f52ba Sapphire ΔE 10.70 #c3af98 反転色 #4e4e4e グレースケール 

Charcoal
#3c5067  rgb(60, 80, 103)  hsl(212, 26%, 32%)  Charcoal
#67533c  rgb(103, 83, 60)  hsl(32, 26%, 32%)  Coffee
#673c50  rgb(103, 60, 80)  hsl(332, 26%, 32%)  Eggplant
#50673c  rgb(80, 103, 60)  hsl(92, 26%, 32%)  Dark Olive Green