ColorTool
ログイン
#395C6F

#395c6f ≈ Sea Blue

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

#395c6fは空色系の色です（明度：低い、彩度：低め）。 RGBでは赤22.35%、緑36.08%、青43.53%で構成され、CMYK印刷ではシアン48.65%、マゼンタ17.12%、イエロー0%、ブラック56.47%を使います。 HSLでは色相角201.11°、彩度32.14%、明度32.94%です。 寒色で、開放感、自由、穏やかさを連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、企業のブランディングに使われます。 この色の上に白の文字を置くとコントラスト比は7.16:1（WCAG AAA）です。 最も近い色名はSea Blue（#006994）で、ΔEは8.28です。

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

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

補色

  1. #395c6f
  2. #6f4c39

分裂補色

  1. #395c6f
  2. #6f3941
  3. #6f6739

類似色

  1. #396f67
  2. #395c6f
  3. #39416f

トライアド

  1. #395c6f
  2. #6f395c
  3. #5c6f39

テトラード

  1. #395c6f
  2. #4c396f
  3. #6f4c39
  4. #5c6f39

スクエア

  1. #395c6f
  2. #67396f
  3. #6f4c39
  4. #416f39

モノクロマティック

  1. #070b0d
  2. #1f323c
  3. #395c6f
  4. #5386a2
  5. #82a9bf

シェード

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

  1. #395c6f
  2. #335364
  3. #2e4a59
  4. #28404e
  5. #223743
  6. #1d2e38
  7. #17252c
  8. #111c21
  9. #0b1216
  10. #06090b
  11. #000000

ティント

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

  1. #395c6f
  2. #4d6c7d
  3. #617d8c
  4. #748d9a
  5. #889da9
  6. #9caeb7
  7. #b0bec5
  8. #c4ced4
  9. #d7dee2
  10. #ebeff1
  11. #ffffff

トーン

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

  1. #395c6f
  2. #406071
  3. #476372
  4. #4e6774
  5. #556a76
  6. #5d6e78
  7. #647279
  8. #6b757b
  9. #72797d
  10. #797c7e
  11. #808080

読みやすい文字 7.16:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓
読みやすい文字 2.93:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕

1色覚（全色盲） #585858 男性の約0.003%
不完全1色覚 #4d5962 男性の約0.001%
1型2色覚（P型） #535b70 男性の約1.01%
2型2色覚（D型） #4b556f 男性の約1.27%
3型2色覚（T型） #206162 男性の約0.0001%
1型3色覚（P型弱） #4a5b70 男性の約1.08%
2型3色覚（D型弱） #45586f 男性の約4.63%
3型3色覚（T型弱） #2c5f68 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-395c6f {
  color: #395c6f;
}
背景色
.bg-395c6f {
  background-color: #395c6f;
  color: #ffffff;
}
枠線
.border-395c6f {
  border: 2px solid #395c6f;
}
CSS変数
:root {
  --color-primary: #395c6f;
  --color-primary-rgb: 57 92 111;
  --color-primary-hsl: 201 32% 33%;
}
グラデーション
.gradient-395c6f {
  background: linear-gradient(135deg, #395c6f, #39416f);
}
色付きの影
.shadow-395c6f {
  box-shadow: 0 8px 24px rgb(57 92 111 / 0.35);
}

#006994 Sea Blue ΔE 8.28 #36454f Charcoal ΔE 8.91 #436b95 Queen Blue ΔE 9.68 #26619c Lapis Lazuli ΔE 9.74 #367588 Teal Blue ΔE 9.75 #0067a5 Medium Persian Blue ΔE 10.45 #414a4c Outer Space ΔE 10.56 #c6a390 反転色 #585858 グレースケール 

Sea Blue
#395c6f  rgb(57, 92, 111)  hsl(201, 32%, 33%)  Sea Blue
#6f4c39  rgb(111, 76, 57)  hsl(21, 32%, 33%)  Coffee
#6f395c  rgb(111, 57, 92)  hsl(321, 32%, 33%)  Boysenberry
#5c6f39  rgb(92, 111, 57)  hsl(81, 32%, 33%)  Dark Olive Green