Railsガイド
の配色ガイドライン
カラーパレット🎨
クリックで16進数カラーコードがコピーできます。
main-dark
#980905
main
#c52f24
main-light
#da6258
main-lighter
#f1938c
main-lightest
#ffeded
main-vivid
#ee3f3f
blue
#5280dd
blue-light
#d5e9f6
yellow-light
#fff9d8
アラート用色
green
#3c763d
green-lightest
#dff0d8
yellow-dark
#8a6d3b
orange-light
#f7e1b5
red-light-dull
#e4b9c0
グレーパレット
black
#222
gray-dark
#333333
gray-light
#999
gray-lighter
#eeeeee
色の適用ルール
色の使い方
基本的にはこのパレットにあるものを使ってください。ただし、グレースケールの色(彩度が0のもの)を使う場合はこの限りではありません。
テキスト
基本色
本文及び見出しの文字色はgray-dark(#333333)を使用してください。
背景色の輝度(HSLでいうL)が50%未満の場合は、白(#fff)を使用してください。
リンク
通常時はmain-dark、ホバー時はmain-lightを使用してください。
色彩Tips: 色の見え方は様々なので、色による区別のみではなく、プラス明るさや形での区別がおすすめです！
特別な文字色
背景色が main-dark ~ main のとき、その中でコンテンツそのものでなく、理解を補助する文字(キャプション等)を入れたい場合は、不透明度が0.6の白(#fff)を使用してください。
ボタン
背景色はmain, 文字色は#fffを使用してください。
ホバー時は背景色をmain-lightにしてください。
イラスト・グラフ
色相は4色以内がベターです。※同じ色で明るさが違うものを使うのはOKです🙆