カラーパレット🎨

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

グレーパレット

シンタックスハイライト

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

色の適用ルール

テキスト

基本色

本文及び見出しの文字色は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)を使用してください。