[CSS] カラーユニバーサルデザイン16進カラーコード一覧
- 使いやすいデザインを考えるとき、色使いへの配慮が重要になります
- 色使いの参考として、色覚の違いに配慮した色使いのガイドラインとして「カラーユニバーサルデザイン」という考え方があります
- このカラーユニバーサルデザインデザインを制定したCUDO（カラーユニバーサルデザイン機構）では「カラーユニバーサルデザイン推奨配色セット」という配色パターンが公開されています
- これらの色パターンをCSSでさっと使えるように、16進コードに置き換えたリストを作成しました
16進カラーコード一覧（推奨配色セットver.4より）
アクセントカラー
赤（255, 75, 0）
background-color: #ff4b00;
黄色（255, 241, 0）
background-color: #fff100;
緑（3, 175, 122）
background-color: #03af7a;
青（0, 90, 255）
background-color: #005aff;
空色（77, 196, 255）
background-color: #4dc4ff;
ピンク（255, 128, 130）
background-color: #ff8082;
オレンジ（246, 170, 0）
background-color: #f6aa00;
紫（153, 0, 153）
background-color: #990099;
茶色（128, 64, 0）
background-color: #804000;
ベースカラー
明るいピンク（255, 202, 191）
background-color: #ffcabf;
クリーム（255, 255, 128）
background-color: #ffff80;
明るい黄緑（216, 242, 85）
background-color: #d8f255;
明るい空色（191, 228, 255）
background-color: #bfe4ff;
ベージュ（255, 202, 128）
background-color: #ffca80;
明るい緑（119, 217, 168）
background-color: #77d9a8;
明るい紫（201, 172, 230）
background-color: #c9ace6;
無彩色
白（255, 255, 255）
background-color: #fff;
明るいグレー（200, 200, 203）
background-color: #c8c8cb;
グレー（132, 145, 158）
background-color: #84919e;
黒（0, 0, 0）
background-color: #000;
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。