ColorTool
ログイン
#F1BDAF

#f1bdaf ≈ Melon

  • オレンジ
  • 明度: 高い
  • 彩度: 中程度
  • 暖色
コントラストを確認 グラフで探索 ランダムな色

#f1bdafはオレンジ系の色です（明度：高い、彩度：中程度）。 RGBでは赤94.51%、緑74.12%、青68.63%で構成され、CMYK印刷ではシアン0%、マゼンタ21.58%、イエロー27.39%、ブラック5.49%を使います。 HSLでは色相角12.73°、彩度70.21%、明度81.57%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、やわらかなパステル配色に使われます。 この色の上に黒の文字を置くとコントラスト比は12.64:1（WCAG AAA）です。 最も近い色名はMelon（#fdbcb4）で、ΔEは4.07です。

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

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

補色

  1. #f1bdaf
  2. #afe3f1

分裂補色

  1. #f1bdaf
  2. #aff1de
  3. #afc2f1

類似色

  1. #f1afc2
  2. #f1bdaf
  3. #f1deaf

トライアド

  1. #f1bdaf
  2. #aff1bd
  3. #bdaff1

テトラード

  1. #f1bdaf
  2. #e3f1af
  3. #afe3f1
  4. #bdaff1

スクエア

  1. #f1bdaf
  2. #c2f1af
  3. #afe3f1
  4. #deaff1

モノクロマティック

  1. #da522d
  2. #e6876e
  3. #f1bdaf
  4. #fcf1ee
  5. #fcf1ee

シェード

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

  1. #f1bdaf
  2. #d9aa9e
  3. #c1978c
  4. #a9847b
  5. #917169
  6. #795f58
  7. #604c46
  8. #483935
  9. #302623
  10. #181312
  11. #000000

ティント

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

  1. #f1bdaf
  2. #f2c4b7
  3. #f4cabf
  4. #f5d1c7
  5. #f7d7cf
  6. #f8ded7
  7. #f9e5df
  8. #fbebe7
  9. #fcf2ef
  10. #fef8f7
  11. #ffffff

トーン

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

  1. #f1bdaf
  2. #e6b7aa
  3. #dab1a6
  4. #cfaba1
  5. #c4a59c
  6. #b99f98
  7. #ad9893
  8. #a2928e
  9. #978c89
  10. #8b8685
  11. #808080

読みやすい文字 1.66:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 12.64:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #c9c9c9 男性の約0.003%
不完全1色覚 #dac4bf 男性の約0.001%
1型2色覚（P型） #c9c3ae 男性の約1.01%
2型2色覚（D型） #d5cdaf 男性の約1.27%
3型2色覚（T型） #feb6b9 男性の約0.0001%
1型3色覚（P型弱） #dac0ae 男性の約1.08%
2型3色覚（D型弱） #e1c7af 男性の約4.63%
3型3色覚（T型弱） #f9b9b5 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-f1bdaf {
  color: #f1bdaf;
}
背景色
.bg-f1bdaf {
  background-color: #f1bdaf;
  color: #000000;
}
枠線
.border-f1bdaf {
  border: 2px solid #f1bdaf;
}
CSS変数
:root {
  --color-primary: #f1bdaf;
  --color-primary-rgb: 241 189 175;
  --color-primary-hsl: 13 70% 82%;
}
グラデーション
.gradient-f1bdaf {
  background: linear-gradient(135deg, #f1bdaf, #f1deaf);
}
色付きの影
.shadow-f1bdaf {
  box-shadow: 0 8px 24px rgb(241 189 175 / 0.35);
}

#fdbcb4 Melon ΔE 4.07 #ebc2af Zinnwaldite ΔE 4.23 #f4c2c2 Baby Pink ΔE 5.75 #fbceb1 Apricot ΔE 7.63 #dea5a4 Pastel Pink ΔE 7.87 #edc9af Desert Sand ΔE 8.17 #ffddca Unbleached Silk ΔE 9.04 #0e4250 反転色 #c9c9c9 グレースケール 

Melon
#f1bdaf  rgb(241, 189, 175)  hsl(13, 70%, 82%)  Melon
#afe3f1  rgb(175, 227, 241)  hsl(193, 70%, 82%)  Non-Photo Blue
#aff1bd  rgb(175, 241, 189)  hsl(133, 70%, 82%)  Celadon
#bdaff1  rgb(189, 175, 241)  hsl(253, 70%, 82%)  Periwinkle