ColorTool
ログイン
#469EC3

#469ec3 ≈ Bondi Blue

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

#469ec3は空色系の色です（明度：中程度、彩度：中程度）。 RGBでは赤27.45%、緑61.96%、青76.47%で構成され、CMYK印刷ではシアン64.1%、マゼンタ18.97%、イエロー0%、ブラック23.53%を使います。 HSLでは色相角197.76°、彩度51.02%、明度51.96%です。 寒色で、開放感、自由、穏やかさを連想させることが多い色です。 デザインでは主にテクノロジー製品、金融・銀行、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は6.94:1（WCAG AA）です。 最も近い色名はBondi Blue（#0095b6）で、ΔEは5.26です。

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

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

補色

  1. #469ec3
  2. #c36b46

分裂補色

  1. #469ec3
  2. #c3465f
  3. #c3a946

類似色

  1. #46c3a9
  2. #469ec3
  3. #465fc3

トライアド

  1. #469ec3
  2. #c3469e
  3. #9ec346

テトラード

  1. #469ec3
  2. #6b46c3
  3. #c36b46
  4. #9ec346

スクエア

  1. #469ec3
  2. #a946c3
  3. #c36b46
  4. #5fc346

モノクロマティック

  1. #1b4455
  2. #2e728e
  3. #469ec3
  4. #80bcd6
  5. #badbe8

シェード

#469ec3に黒を段階的に混ぜた色です。

  1. #469ec3
  2. #3f8eb0
  3. #387e9c
  4. #316f89
  5. #2a5f75
  6. #234f62
  7. #1c3f4e
  8. #152f3b
  9. #0e2027
  10. #071014
  11. #000000

ティント

#469ec3に白を段階的に混ぜた色です。

  1. #469ec3
  2. #59a8c9
  3. #6bb1cf
  4. #7ebbd5
  5. #90c5db
  6. #a3cfe1
  7. #b5d8e7
  8. #c8e2ed
  9. #daecf3
  10. #edf5f9
  11. #ffffff

トーン

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

  1. #469ec3
  2. #4c9bbc
  3. #5298b6
  4. #5795af
  5. #5d92a8
  6. #638fa2
  7. #698c9b
  8. #6f8994
  9. #74868d
  10. #7a8387
  11. #808080

読みやすい文字 3.03:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 6.94:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #949494 男性の約0.003%
不完全1色覚 #7c98a9 男性の約0.001%
1型2色覚（P型） #8b9bc5 男性の約1.01%
2型2色覚（D型） #798fc3 男性の約1.27%
3型2色覚（T型） #00a8aa 男性の約0.0001%
1型3色覚（P型弱） #759cc4 男性の約1.08%
2型3色覚（D型弱） #6995c3 男性の約4.63%
3型3色覚（T型弱） #00a4b5 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-469ec3 {
  color: #469ec3;
}
背景色
.bg-469ec3 {
  background-color: #469ec3;
  color: #000000;
}
枠線
.border-469ec3 {
  border: 2px solid #469ec3;
}
CSS変数
:root {
  --color-primary: #469ec3;
  --color-primary-rgb: 70 158 195;
  --color-primary-hsl: 198 51% 52%;
}
グラデーション
.gradient-469ec3 {
  background: linear-gradient(135deg, #469ec3, #465fc3);
}
色付きの影
.shadow-469ec3 {
  box-shadow: 0 8px 24px rgb(70 158 195 / 0.35);
}

#0095b6 Bondi Blue ΔE 5.26 #56a0d3 Carolina Blue ΔE 5.28 #73a9c2 Moonstone Blue ΔE 5.98 #71a6d2 Iceberg ΔE 7.39 #5d8aa8 Air Force Blue ΔE 7.83 #00bfff Deep Sky Blue ΔE 10.55 #4682b4 Steel Blue ΔE 11.05 #b9613c 反転色 #949494 グレースケール 

Bondi Blue
#469ec3  rgb(70, 158, 195)  hsl(198, 51%, 52%)  Bondi Blue
#c36b46  rgb(195, 107, 70)  hsl(18, 51%, 52%)  Flame
#c3469e  rgb(195, 70, 158)  hsl(318, 51%, 52%)  Mulberry
#9ec346  rgb(158, 195, 70)  hsl(78, 51%, 52%)  Yellow Green