ColorTool
ログイン
#FC9C64

#fc9c64 ≈ Light Salmon

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

#fc9c64はオレンジ系の色です（明度：高い、彩度：高め）。 RGBでは赤98.82%、緑61.18%、青39.22%で構成され、CMYK印刷ではシアン0%、マゼンタ38.1%、イエロー60.32%、ブラック1.18%を使います。 HSLでは色相角22.11°、彩度96.2%、明度69.02%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストランに使われます。 この色の上に黒の文字を置くとコントラスト比は10.08:1（WCAG AAA）です。 最も近い色名はLight Salmon（#ffa07a）で、ΔEは5.01です。

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

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

補色

  1. #fc9c64
  2. #64c4fc

分裂補色

  1. #fc9c64
  2. #64fce8
  3. #6478fc

類似色

  1. #fc6478
  2. #fc9c64
  3. #fce864

トライアド

  1. #fc9c64
  2. #64fc9c
  3. #9c64fc

テトラード

  1. #fc9c64
  2. #c4fc64
  3. #64c4fc
  4. #9c64fc

スクエア

  1. #fc9c64
  2. #78fc64
  3. #64c4fc
  4. #e864fc

モノクロマティック

  1. #c34a04
  2. #fb6c19
  3. #fc9c64
  4. #fdccaf
  5. #fff2eb

シェード

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

  1. #fc9c64
  2. #e38c5a
  3. #ca7d50
  4. #b06d46
  5. #975e3c
  6. #7e4e32
  7. #653e28
  8. #4c2f1e
  9. #321f14
  10. #19100a
  11. #000000

ティント

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

  1. #fc9c64
  2. #fca674
  3. #fdb083
  4. #fdba93
  5. #fdc4a2
  6. #feceb2
  7. #fed7c1
  8. #fee1d1
  9. #feebe0
  10. #fff5f0
  11. #ffffff

トーン

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

  1. #fc9c64
  2. #f09967
  3. #e3966a
  4. #d7946c
  5. #ca916f
  6. #be8e72
  7. #b28b75
  8. #a58878
  9. #99867a
  10. #8c837d
  11. #808080

読みやすい文字 2.08:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 10.08:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #b4b4b4 男性の約0.003%
不完全1色覚 #d4ab9a 男性の約0.001%
1型2色覚（P型） #b7a75f 男性の約1.01%
2型2色覚（D型） #cebc64 男性の約1.27%
3型2色覚（T型） #ff898f 男性の約0.0001%
1型3色覚（P型弱） #d6a361 男性の約1.08%
2型3色覚（D型弱） #e2b064 男性の約4.63%
3型3色覚（T型弱） #ff9180 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-fc9c64 {
  color: #fc9c64;
}
背景色
.bg-fc9c64 {
  background-color: #fc9c64;
  color: #000000;
}
枠線
.border-fc9c64 {
  border: 2px solid #fc9c64;
}
CSS変数
:root {
  --color-primary: #fc9c64;
  --color-primary-rgb: 252 156 100;
  --color-primary-hsl: 22 96% 69%;
}
グラデーション
.gradient-fc9c64 {
  background: linear-gradient(135deg, #fc9c64, #fce864);
}
色付きの影
.shadow-fc9c64 {
  box-shadow: 0 8px 24px rgb(252 156 100 / 0.35);
}

#ffa07a Light Salmon ΔE 5.01 #f4a460 Sandy Brown ΔE 5.43 #ff8243 Mango Tango ΔE 6.39 #d99058 Persian Orange ΔE 7.07 #d68a59 Raw Sienna ΔE 7.58 #e9967a Dark Salmon ΔE 7.83 #ff7f50 Coral ΔE 8.01 #03639b 反転色 #b4b4b4 グレースケール 

Light Salmon
#fc9c64  rgb(252, 156, 100)  hsl(22, 96%, 69%)  Light Salmon
#64c4fc  rgb(100, 196, 252)  hsl(202, 96%, 69%)  Maya Blue
#64fc9c  rgb(100, 252, 156)  hsl(142, 96%, 69%)  Medium Spring Green
#9c64fc  rgb(156, 100, 252)  hsl(262, 96%, 69%)  Medium Purple