はじめに

この記事ではデザインの時点や、CSSに定義する際のカラーの命名規則についてまとめています。
こういった正解がないものは組織によって決めているパターンもありますが、そうでない場合、または個人開発の場合などの場合は設計者のセンス次第となります。

カラーを定義する際の命名規則にいつも迷ってしまう、そんな方にとって”迷ったらこれ”といった感じで参考になると幸いです。

やってはダメな例

正解はないと言っても以下のような例はアンチパターンとされていることが多いです。

.red {
  color: red
}
.white {
  color: #fff
}

理由は単純で、.redのカラーをblueに変更したいとなった際に、定義ではred、実際はblueという矛盾が生じてしまいます。

修正するにはclass名ごと変更が必要になり、class名を修正したらそのclassを利用しているhtmlも修正する必要となってしまい手間がかかってしまうからです。

本人はわかっているので修正せずにそのまま押し通すことも可能ですが、第三者がその定義を見た時には首を傾げることになってしまうでしょう。

そのため、カラーを定義するclass名は”どのような用途で使うか”が明確にわかるものとして定義してあげると良いです。

では適切な表現ってどういうのだろう？となった時に役立つのが既存のCSSフレームワークです。Material UI、Bootstrap等でのカラーの命名規則を参考にすると、以下のような使われ方が多いです。

使用する色数が少ない場合

• primary – メインで使用する色を割り当てます
• secondary – メインの次に使用する色を割り当てます
• info – 通知系のカラーを割り当てます
• success – 成功系のカラーを割り当てます
• warning – 注意や警告系のカラーを割り当てます
• dander – エラー系のカラーを割り当てます。シンプルにerrorでも。

使用する色数が多い場合

サイトやシステム内で使用する色数が多い場合、上記に加えて以下のようなバリエーションもよく利用されています。

• primary-variant – primaryの類似カラーを割り当てます
• secondary-variant – secondaryの類似カラーを割り当てます
• tertiary – メインの次の次に使用する色を割り当てます。accent等でもわかりやすいですね。
• text – テキスト用のカラーを割り当てます
• background – 背景色用のカラーを割り当てます

それでも足りない場合

上記で10種類の名称をご紹介しました。大体のケースでは事足りると思いますが、それでも足りない場合。

• light – 淡いカラーを割り当てます
• dark – 暗いカラーを割り当てます

さいごに

今回はサイトカラーをCSSで定義する際の命名規則についてをご紹介しましたがいかがでしたでしょうか？最後まで閲覧いただきありがとうございました。