ColorTool
ログイン
#606EB3

#606eb3 ≈ Royal Blue

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

#606eb3は青系の色です（明度：中程度、彩度：中程度）。 RGBでは赤37.65%、緑43.14%、青70.2%で構成され、CMYK印刷ではシアン46.37%、マゼンタ38.55%、イエロー0%、ブラック29.8%を使います。 HSLでは色相角229.88°、彩度35.32%、明度53.92%です。 寒色で、信頼、安定、集中を連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は4.8:1（WCAG AA）です。 最も近い色名はRoyal Blue（#4169e1）で、ΔEは7.48です。

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

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

補色

  1. #606eb3
  2. #b3a560

分裂補色

  1. #606eb3
  2. #b37b60
  3. #97b360

類似色

  1. #6097b3
  2. #606eb3
  3. #7b60b3

トライアド

  1. #606eb3
  2. #b3606e
  3. #6eb360

テトラード

  1. #606eb3
  2. #a560b3
  3. #b3a560
  4. #6eb360

スクエア

  1. #606eb3
  2. #b36097
  3. #b3a560
  4. #60b37b

モノクロマティック

  1. #272f53
  2. #404c86
  3. #606eb3
  4. #949dcc
  5. #c8cce4

シェード

#606eb3に黒を段階的に混ぜた色です。

  1. #606eb3
  2. #5663a1
  3. #4d588f
  4. #434d7d
  5. #3a426b
  6. #30375a
  7. #262c48
  8. #1d2136
  9. #131624
  10. #0a0b12
  11. #000000

ティント

#606eb3に白を段階的に混ぜた色です。

  1. #606eb3
  2. #707dbb
  3. #808bc2
  4. #909aca
  5. #a0a8d1
  6. #b0b7d9
  7. #bfc5e1
  8. #cfd4e8
  9. #dfe2f0
  10. #eff1f7
  11. #ffffff

トーン

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

  1. #606eb3
  2. #6370ae
  3. #6672a9
  4. #6a73a4
  5. #6d759f
  6. #70779a
  7. #737994
  8. #767b8f
  9. #7a7c8a
  10. #7d7e85
  11. #808080

読みやすい文字 4.8:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 4.38:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #727272 男性の約0.003%
不完全1色覚 #6b7191 男性の約0.001%
1型2色覚（P型） #5476b6 男性の約1.01%
2型2色覚（D型） #4d6fb1 男性の約1.27%
3型2色覚（T型） #427c88 男性の約0.0001%
1型3色覚（P型弱） #5973b5 男性の約1.08%
2型3色覚（D型弱） #556fb2 男性の約4.63%
3型3色覚（T型弱） #50779b 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-606eb3 {
  color: #606eb3;
}
背景色
.bg-606eb3 {
  background-color: #606eb3;
  color: #ffffff;
}
枠線
.border-606eb3 {
  border: 2px solid #606eb3;
}
CSS変数
:root {
  --color-primary: #606eb3;
  --color-primary-rgb: 96 110 179;
  --color-primary-hsl: 230 35% 54%;
}
グラデーション
.gradient-606eb3 {
  background: linear-gradient(135deg, #606eb3, #7b60b3);
}
色付きの影
.shadow-606eb3 {
  box-shadow: 0 8px 24px rgb(96 110 179 / 0.35);
}

#4169e1 Royal Blue ΔE 7.48 #6082b6 Glaucous ΔE 7.80 #436b95 Queen Blue ΔE 7.96 #6a5acd Slate Blue ΔE 8.76 #4166f5 Ultramarine Blue ΔE 9.31 #417dc1 Tufts Blue ΔE 9.90 #1560bd Denim ΔE 10.02 #9f914c 反転色 #727272 グレースケール 

Royal Blue
#606eb3  rgb(96, 110, 179)  hsl(230, 35%, 54%)  Royal Blue
#b3a560  rgb(179, 165, 96)  hsl(50, 35%, 54%)  Brass
#b3606e  rgb(179, 96, 110)  hsl(350, 35%, 54%)  Rose Gold
#6eb360  rgb(110, 179, 96)  hsl(110, 35%, 54%)  Mantis