ColorTool
ログイン
#4F6396

#4f6396 ≈ Queen Blue

  • 青
  • 明度: 中程度
  • 彩度: 中程度
  • 寒色
コントラストを確認 グラフで探索 ランダムな色

#4f6396は青系の色です（明度：中程度、彩度：中程度）。 RGBでは赤30.98%、緑38.82%、青58.82%で構成され、CMYK印刷ではシアン47.33%、マゼンタ34%、イエロー0%、ブラック41.18%を使います。 HSLでは色相角223.1°、彩度31%、明度44.9%です。 寒色で、信頼、安定、集中を連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は5.9:1（WCAG AA）です。 最も近い色名はQueen Blue（#436b95）で、ΔEは5.82です。

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

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

補色

  1. #4f6396
  2. #96824f

分裂補色

  1. #4f6396
  2. #965f4f
  3. #86964f

類似色

  1. #4f8696
  2. #4f6396
  3. #5f4f96

トライアド

  1. #4f6396
  2. #964f63
  3. #63964f

テトラード

  1. #4f6396
  2. #824f96
  3. #96824f
  4. #63964f

スクエア

  1. #4f6396
  2. #964f86
  3. #96824f
  4. #4f965f

モノクロマティック

  1. #1a2132
  2. #354264
  3. #4f6396
  4. #798bb8
  5. #abb6d3

シェード

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

  1. #4f6396
  2. #475987
  3. #3f4f78
  4. #374569
  5. #2f3b5a
  6. #28324b
  7. #20283c
  8. #181e2d
  9. #10141e
  10. #080a0f
  11. #000000

ティント

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

  1. #4f6396
  2. #6173a1
  3. #7282ab
  4. #8492b6
  5. #95a1c0
  6. #a7b1cb
  7. #b9c1d5
  8. #cad0e0
  9. #dce0ea
  10. #edeff5
  11. #ffffff

トーン

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

  1. #4f6396
  2. #546694
  3. #596992
  4. #5e6c8f
  5. #636f8d
  6. #68728b
  7. #6c7489
  8. #717787
  9. #767a84
  10. #7b7d82
  11. #808080

読みやすい文字 5.9:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 3.56:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #646464 男性の約0.003%
不完全1色覚 #5c647b 男性の約0.001%
1型2色覚（P型） #506898 男性の約1.01%
2型2色覚（D型） #496195 男性の約1.27%
3型2色覚（T型） #346e75 男性の約0.0001%
1型3色覚（P型弱） #506697 男性の約1.08%
2型3色覚（D型弱） #4b6295 男性の約4.63%
3型3色覚（T型弱） #406a84 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-4f6396 {
  color: #4f6396;
}
背景色
.bg-4f6396 {
  background-color: #4f6396;
  color: #ffffff;
}
枠線
.border-4f6396 {
  border: 2px solid #4f6396;
}
CSS変数
:root {
  --color-primary: #4f6396;
  --color-primary-rgb: 79 99 150;
  --color-primary-hsl: 223 31% 45%;
}
グラデーション
.gradient-4f6396 {
  background: linear-gradient(135deg, #4f6396, #5f4f96);
}
色付きの影
.shadow-4f6396 {
  box-shadow: 0 8px 24px rgb(79 99 150 / 0.35);
}

#436b95 Queen Blue ΔE 5.82 #26619c Lapis Lazuli ΔE 7.31 #1560bd Denim ΔE 8.02 #0f52ba Sapphire ΔE 9.03 #0f4d92 Yale Blue ΔE 9.82 #4169e1 Royal Blue ΔE 10.14 #0067a5 Medium Persian Blue ΔE 10.19 #b09c69 反転色 #646464 グレースケール 

Queen Blue
#4f6396  rgb(79, 99, 150)  hsl(223, 31%, 45%)  Queen Blue
#96824f  rgb(150, 130, 79)  hsl(43, 31%, 45%)  Cafe au Lait
#964f63  rgb(150, 79, 99)  hsl(343, 31%, 45%)  Mauve Taupe
#63964f  rgb(99, 150, 79)  hsl(103, 31%, 45%)  Olive Drab