ColorTool
ログイン
#FFB589

#ffb589 ≈ Tumbleweed

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

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

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

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

補色

  1. #ffb589
  2. #89d3ff

分裂補色

  1. #ffb589
  2. #89fff0
  3. #8998ff

類似色

  1. #ff8998
  2. #ffb589
  3. #fff089

トライアド

  1. #ffb589
  2. #89ffb5
  3. #b589ff

テトラード

  1. #ffb589
  2. #d3ff89
  3. #89d3ff
  4. #b589ff

スクエア

  1. #ffb589
  2. #98ff89
  3. #89d3ff
  4. #f089ff

モノクロマティック

  1. #ef5900
  2. #ff853c
  3. #ffb589
  4. #ffe5d5
  5. #fff2eb

シェード

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

  1. #ffb589
  2. #e6a37b
  3. #cc916e
  4. #b37f60
  5. #996d52
  6. #805b45
  7. #664837
  8. #4d3629
  9. #33241b
  10. #1a120e
  11. #000000

ティント

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

  1. #ffb589
  2. #ffbc95
  3. #ffc4a1
  4. #ffcbac
  5. #ffd3b8
  6. #ffdac4
  7. #ffe1d0
  8. #ffe9dc
  9. #fff0e7
  10. #fff8f3
  11. #ffffff

トーン

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

  1. #ffb589
  2. #f2b088
  3. #e6aa87
  4. #d9a586
  5. #cca085
  6. #c09b85
  7. #b39584
  8. #a69083
  9. #998b82
  10. #8d8581
  11. #808080

読みやすい文字 1.72:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 12.22:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #c5c5c5 男性の約0.003%
不完全1色覚 #dfbfb0 男性の約0.001%
1型2色覚（P型） #cabc86 男性の約1.01%
2型2色覚（D型） #dbcc89 男性の約1.27%
3型2色覚（T型） #ffa7aa 男性の約0.0001%
1型3色覚（P型弱） #e1b987 男性の約1.08%
2型3色覚（D型弱） #eac389 男性の約4.63%
3型3色覚（T型弱） #ffad9e 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#deaa88 Tumbleweed ΔE 6.27 #ffa07a Light Salmon ΔE 6.38 #f4a460 Sandy Brown ΔE 7.06 #e5aa70 Fawn ΔE 7.48 #ffcc99 Peach Orange ΔE 8.02 #fbceb1 Apricot ΔE 8.05 #ebc2af Zinnwaldite ΔE 9.14 #004a76 反転色 #c5c5c5 グレースケール 

Tumbleweed
#ffb589  rgb(255, 181, 137)  hsl(22, 100%, 77%)  Tumbleweed
#89d3ff  rgb(137, 211, 255)  hsl(202, 100%, 77%)  Light Sky Blue
#89ffb5  rgb(137, 255, 181)  hsl(142, 100%, 77%)  Pale Green
#b589ff  rgb(181, 137, 255)  hsl(262, 100%, 77%)  Floral Lavender