基準色
🔒 すべてブラウザ内で計算、登録不要#4F46E5rgb(79, 70, 229)青系
rgb(79, 70, 229) · 系統名: 青系
補色
180°カラーカードをクリックすると基準色になります
#4F46E5rgb(79, 70, 229)青系- 白との比較6.29AA 適合
- 黒との比較3.34未達成
#9C96F0rgb(156, 150, 240)青系- 白との比較2.61未達成
- 黒との比較8.03AAA 適合
#DCE546rgb(220, 229, 70)黄系- 白との比較1.37未達成
- 黒との比較15.34AAA 適合
#BAC31Brgb(186, 195, 27)黄系- 白との比較1.92未達成
- 黒との比較10.91AAA 適合
類似色
±30°カラーカードをクリックすると基準色になります
#468CE5rgb(70, 140, 229)青系- 白との比較3.42未達成
- 黒との比較6.14AA 適合
#738AEBrgb(115, 138, 235)青系- 白との比較3.20未達成
- 黒との比較6.56AA 適合
#4F46E5rgb(79, 70, 229)青系- 白との比較6.29AA 適合
- 黒との比較3.34未達成
#9873EBrgb(152, 115, 235)紫系- 白との比較3.51未達成
- 黒との比較5.99AA 適合
#9F46E5rgb(159, 70, 229)紫系- 白との比較4.69AA 適合
- 黒との比較4.48未達成
三分色
120°カラーカードをクリックすると基準色になります
#4F46E5rgb(79, 70, 229)青系- 白との比較6.29AA 適合
- 黒との比較3.34未達成
#E54F46rgb(229, 79, 70)赤系- 白との比較3.79未達成
- 黒との比較5.54AA 適合
#46E54Frgb(70, 229, 79)緑系- 白との比較1.67未達成
- 黒との比較12.58AAA 適合
四分色・矩形
90° + 180°カラーカードをクリックすると基準色になります
#4F46E5rgb(79, 70, 229)青系- 白との比較6.29AA 適合
- 黒との比較3.34未達成
#E5468Crgb(229, 70, 140)マゼンタの系- 白との比較3.76未達成
- 黒との比較5.59AA 適合
#DCE546rgb(220, 229, 70)黄系- 白との比較1.37未達成
- 黒との比較15.34AAA 適合
#46E59Frgb(70, 229, 159)緑系- 白との比較1.62未達成
- 黒との比較12.97AAA 適合
単色系
Hカラーカードをクリックすると基準色になります
#DCDBF0rgb(220, 219, 240)青系- 白との比較1.36未達成
- 黒との比較15.43AAA 適合
#9995E5rgb(153, 149, 229)青系- 白との比較2.70未達成
- 黒との比較7.78AAA 適合
#827CEDrgb(130, 124, 237)青系- 白との比較3.47未達成
- 黒との比較6.06AA 適合
#4F46E5rgb(79, 70, 229)青系- 白との比較6.29AA 適合
- 黒との比較3.34未達成
#180EB7rgb(24, 14, 183)青系- 白との比較11.76AAA 適合
- 黒との比較1.79未達成
#0A0470rgb(10, 4, 112)青系- 白との比較16.61AAA 適合
- 黒との比較1.26未達成
明暗プレビュー
パレットは全 17 色明るい背景
サンプル文字 Aa
暗い背景
サンプル文字 Aa
コントラスト検査
サンプル文字 Aa
コントラスト比 6.29AA 適合
書き出しとプレビュー
:root {
--color-1: #4F46E5;
--color-2: #9C96F0;
--color-3: #DCE546;
--color-4: #BAC31B;
--color-5: #468CE5;
--color-6: #738AEB;
--color-7: #9873EB;
--color-8: #9F46E5;
--color-9: #E54F46;
--color-10: #46E54F;
--color-11: #E5468C;
--color-12: #46E59F;
--color-13: #DCDBF0;
--color-14: #9995E5;
--color-15: #827CED;
--color-16: #180EB7;
--color-17: #0A0470;
}