Railsチュートリアル
の配色ガイドライン

カラーパレット🎨

クリックで16進数カラーコードがコピーできます。

main
#71151a

main-light
#a13532

main-lighter
#d57370

main-lightest
#f2dede

navy-dark
#1b2550

navy
#002f72

navy-light
#4670ac

white-blue
#f8f9fc

green-dark
#006400

green
#008000

green-light
#97C090

green-lighter
#dff0d8

yellow
#f0c500

yellow-light
#ffe595

yellow-lighter
#fff8e6

グレーパレット

black
#111111

darkgray
#3b3b3b

gray
#8f8f8f

lightgray
#eeeeee

bg-main
#eae4df

シンタックスハイライト

チュートリアル内のコード。シンタックスハイライト以外では使わないことが望ましいです。

code-navy
#000080

code-green
#008000

code-darkgreen
#006400

code-red
#ba2121

code-seagreen
#408080

色の適用ルール

テキスト

基本色

本文及び見出しの文字色はblack(#111111)を使用してください。
背景色の輝度(HSLでいうL)が50%未満の場合は、白(#fff)を使用してください。

リンク

チュートリアル外: 通常はmainで、ホバー時はmain-lighterを使用してください。
チュートリアル内: 通常はnavyで、ホバー時はnavy-lightを使用してください。

色彩Tips: 色の見え方は様々なので、色による区別のみではなく、プラス明るさや形での区別がおすすめです!

特別な文字色

背景色がmainのとき、その中でコンテンツそのものでなく、理解を補助する文字(キャプション等)を入れたい場合は、不透明度が0.7の白(#fff)を使用してください。

ボタン

背景色はmain-light, 文字色は#fffを使用してください。

イラスト・グラフ

色相は4色以内がベターです。※同じ色で明るさが違うものを使うのはOKです🙆‍

アイコン

背景色の輝度が50%以上の場合、main-lightを使用してください。50%未満の場合は白(#fff)を使用してください。