📑 TOP公開資料 → Railsガイドの配色ガイドライン

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です🙆‍