ColorTool
ログイン
#F6DF60

#f6df60 ≈ Naples Yellow

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

#f6df60は黄系の色です（明度：高い、彩度：高め）。 RGBでは赤96.47%、緑87.45%、青37.65%で構成され、CMYK印刷ではシアン0%、マゼンタ9.35%、イエロー60.98%、ブラック3.53%を使います。 HSLでは色相角50.8°、彩度89.29%、明度67.06%です。 暖色で、楽観、注意喚起、喜びを連想させることが多い色です。 デザインでは主に強調表示や警告、子ども向け商品、CTAボタンに使われます。 この色の上に黒の文字を置くとコントラスト比は15.64:1（WCAG AAA）です。 最も近い色名はNaples Yellow（#fada5e）で、ΔEは2.55です。

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

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

補色

  1. #f6df60
  2. #6077f6

分裂補色

  1. #f6df60
  2. #60c2f6
  3. #9460f6

類似色

  1. #f69460
  2. #f6df60
  3. #c2f660

トライアド

  1. #f6df60
  2. #60f6df
  3. #df60f6

テトラード

  1. #f6df60
  2. #77f660
  3. #6077f6
  4. #df60f6

スクエア

  1. #f6df60
  2. #60f694
  3. #6077f6
  4. #f660c2

モノクロマティック

  1. #b3990a
  2. #f2d018
  3. #f6df60
  4. #faeea8
  5. #fefbec

シェード

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

  1. #f6df60
  2. #ddc956
  3. #c5b24d
  4. #ac9c43
  5. #94863a
  6. #7b7030
  7. #625926
  8. #4a431d
  9. #312d13
  10. #19160a
  11. #000000

ティント

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

  1. #f6df60
  2. #f7e270
  3. #f8e580
  4. #f9e990
  5. #faeca0
  6. #fbefb0
  7. #fbf2bf
  8. #fcf5cf
  9. #fdf9df
  10. #fefcef
  11. #ffffff

トーン

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

  1. #f6df60
  2. #ead663
  3. #decc66
  4. #d3c36a
  5. #c7b96d
  6. #bbb070
  7. #afa673
  8. #a39d76
  9. #98937a
  10. #8c8a7d
  11. #808080

読みやすい文字 1.34:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 15.64:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #dedede 男性の約0.003%
不完全1色覚 #e8dfb9 男性の約0.001%
1型2色覚（P型） #f3d952 男性の約1.01%
2型2色覚（D型） #f9e266 男性の約1.27%
3型2色覚（T型） #ffd0c4 男性の約0.0001%
1型3色覚（P型弱） #f4dc58 男性の約1.08%
2型3色覚（D型弱） #f8e164 男性の約4.63%
3型3色覚（T型弱） #ffd6a5 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#fada5e Naples Yellow ΔE 2.55 #ffdb58 Mustard ΔE 3.42 #f8de7e Jasmine ΔE 4.15 #ffe135 Banana Yellow ΔE 4.20 #e4d96f Straw ΔE 4.39 #f0e130 Dandelion ΔE 4.53 #f0dc82 Buff ΔE 4.91 #09209f 反転色 #dedede グレースケール 

Naples Yellow
#f6df60  rgb(246, 223, 96)  hsl(51, 89%, 67%)  Naples Yellow
#6077f6  rgb(96, 119, 246)  hsl(231, 89%, 67%)  Ultramarine Blue
#60f6df  rgb(96, 246, 223)  hsl(171, 89%, 67%)  Turquoise Blue
#df60f6  rgb(223, 96, 246)  hsl(291, 89%, 67%)  Heliotrope