mosir のカラーパレットはとてもシンプルです。テーマ内の theme.json を編集することで、追加・変更ができます。
1. 単色の一覧
単色は、下表のテーマ専用カラーの他に white (#FFFFFF) と black (#000000) を定義しています。
| dark | base | light | lighter | fade | |
|---|---|---|---|---|---|
| default | |||||
| primary | |||||
| secondary | |||||
| important |
2. グラデーション
グラデーションのテーマ専用カラーは定義していません。Webデザインでグラデーションを使用する場合、黒か白からのフェードアウトか、そのページだけの繊細なグラデーションかの、どちらかとなることがほとんどだからです。
3. デュオトーン
デュオトーンは monochrome, default, primary, secondary の4つを登録しています。monochrome はコントラスト比が最大です。
monochrome
default
primary
secondary
4. 各色の意味
色名は [役割]-[明度] の命名規則となっています。
役割
BootstrapやMaterial Designで採用されている、伝統的な命名法を採用しています。 SurfaceOnSurface 等の「地の色」関係は採用していません。
default
文字に使用している色グループです。ひじょうに低い彩度であることを想定しています。
primary
リンク、ナビゲーション強調に使用する、ブランドカラーにあたる色グループです。特に base は使用頻度が高いため、充分なコントラスト比が必要です。 mosir では、日本国のウェブサイトによく使用されているブルー系を使用しています。
secondary
mosir ではカラーパレットをシンプルにするため、サブカラーを定義していません。 secondary は弱い注意、マーカー装飾等に使用する、アクセントカラーにあたる色グループです。 primary の補色、または対照色相を想定しており、 mosir ではゴールド系を使用しています。
important
エラー関連に使用する色グループです。日本国では慣習的に真紅（Vermillion or Crimson）が使われるため、 mosir でもレッド系となっています。単なる強い強調に使われることもあるため、BootstrapやMaterial Designとは異なり important としています。
明度
昨今のCSS設計では、明度は数値で命名されることが多いようです。 mosir は言葉で命名しています。わかりやすさを優先したためですが、代償として、 dark, lighter など、暗色系のサイトを作る際に矛盾が生じる命名になってしまっています。
dark
base よりも暗い色。反転背景色や小さな色付き文字の用途を想定しています。Tailwind CSSでの近似値は、 800 – 900 です。
base
基本色です。この明度は表記されず、色名が役割名のみのときに base であるとします。Tailwind CSSでの近似値は、 600 – 700 です。
light
base よりもわずかに明度が高い色です。文字を弱めるときやホバー時の背景色等の用途を想定しているため、 mosir では彩度がやや高くなっています。Tailwind CSSでの近似値は、 400 – 500 です。
lighter
base よりもかなり明度が高い色です。ボーダー色、マーカー強調等の用途を想定しています。Tailwind CSSでの近似値は、 200 – 300 です。
fade
base の色相のまま、地の背景色（白）に近似している色です。アクセント背景の用途を想定しています。Tailwind CSSでの近似値は、 100 – 50 です。