お絵かきアプリの基本パレット色の選定

この記事は グラフィックス全般 Advent Calendar 2024 4日目の記事です。

どうも。個人でElectron＆Webなお絵かきアプリを作っていたりいなかったりする者です。もう８年くらいやってます。

背景

お絵かきアプリでは大抵の場合、基本のパレットが最初から用意されています。
しかし自作のアプリでは、初期からずっと特に理由もなく黒白赤青緑の５色しか基本パレットに色を用意していませんでした。

去年末あたりにアプリを一般公開したんですが、多くのユーザーにとって「とっつきやすく」するために基本のパレットの色数を増やすことにしました。

絵の具を参考に考えてみた

「とっつきやすく」するには、ユーザーの使いたい色がそろっていればいいのでしょうが、ユーザーがどんな絵を描くのかはわからないし、想定しきれるものでもありません。それで、市販の絵の具や色鉛筆などはどういった基準で色を選んでいるのかネットで調べてみました。

真っ先に目に入ったのはビリジアンのトリビアで、これはNHKの某番組でも見たことがありました。また、絵の具は色相環というものベースに、混色して作ることのできない色が選ばれているのだとか。戦後の早い時期から基本の色は変わっていないという情報もありました。

なるほど、貧しかった小学生のころを思い出せば、親に買ってもらった絵の具では色が少ないので、二つ以上の色を混ぜてほしい色を巧みに作り出していましたね・・・ってんな記憶はない（笑）アホなので、色の混ぜ方は何も知らずに適当に混ぜてしたね。なぜか作れたお気に入りの色が二度作れなくてがっかりした記憶もある気がする。

しかし、よく考えてみると、絵の具で色を混ぜる場合とコンピュータ上で色を混ぜる場合ではちょっと事情が違います。コンピュータ上の色は光の三原色をベースにした加法混色ですが、絵の具は減法混色です。色の混ざり方が違いますから、絵の具の色をそのまま採用しても狙った色が作りやすいわけではなさそうです。
あと、日本の絵の具の色の選定は日本の景色を描くときに便利な色がけっこう選ばれていて、赤茶色は赤松の幹の色なんだとか聞いたことがあったような、ないような。そういう見方で見ると、空色とか桃色とか、具体的に存在するモノの色が名前についている色は多いですね。

まとめると、以下のことがいえるようでした。

• 絵の具は混色して作れない色が基本色に選ばれている
• 絵の具の色の混ぜ方（減法混色）とコンピュータ上での色の混ぜ方（加法混色）は異なる
• 色によっては具体的に何の色か名前で分かるものも多い

色を選定する

上記を踏まえて方針を考えました。

色を混ぜて作ることはあまり重視しないで、基本パレットそのままで描けるものが多いように選定することで「とっつきやすく」します。

でもまあ、基本は一般的な絵の具の色をベースにします。

それと、自分で色を適当に決めないで、名前のついている既存の色から選ぶことにしました。歴史的に実績のある色だということと、名前があったほうが誰にでも分かりやすいと思ったからです。

方針

• 絵の具の基本の色（赤、オレンジ、黄、緑、青、紫、茶）を中心にする
• そのまま使える（具体的な描く対象がある）色にする
• 名前の知られている色を選ぶ

結果

以下、1行ずつ説明します。

肌色系

色	説明
肌色（光）	肌の共通のハイライト色。
肌色（色白）	色白（いろじろ）の日本人の肌の色。
肌色（色白薄暗）	色白の日本人の肌の暗部。
肌色（色黒濃）	色黒の日本人の肌の色。
肌色（色黒暗）	色黒の日本人の肌の暗部。

インターナソナルでウニバーサルなアプリを目指すなら赤褐色や超黒い人の肌の分も用意しないとカドが立つんでしょうけど、全部入れるだけのスペースがありません！そこで日本発のアプリということで割り切って日本人の肌の色ということにしました。

なお、いきなりですが、肌色の行は一般的な名前のある色は一つもありません。いくつかのアニメを参考に自分で作成しました。つ、次の行からは方針通りに行きますよ！

赤系

色	説明
もも いろ	桃の花の色ということだが、一般的なイメージで花の色を塗るのに使えると思う。口の中の色とかにも使える。肌色っぽいので紅潮した頬の色にもできるかも。
あかむらさき	濃いめの花の色に使える。彩度を調節して桜の花の色にしやすい。目立つ色なのでメモ用に赤の代替としても使える。
あか	やや落ち着いた鮮やかな赤。Rがマックスの赤よりは現実味のある色で絵を描くのに適している気がする。チューリップでも消防車でも赤いものは基本なんでもこれでOK。
べに いろ	「あか」よりもしっとりした印象が欲しいときに使える。バラはこちらのほうがそれっぽい印象になる。たぶん。
しゅ いろ	定番なので入れたのだが、本来は鳥居とか漆器とかの色に使うものらしい。お絵描きではコミカルな夕焼け空に使える。お絵描き以外の場面では、カレンダーの休日の赤もこれに近い色がけっこうある。メモ用のオレンジ色としても使いやすい。

オレンジ、黄系

色	説明
クリームイエロー	月、星、窓の明かりなど、光の色によい。また、そのまんまだがカスタードクリームの色として使える。あと〇ーパー〇イヤ人（初代）の髪の色にも使える。
レモンイエロー	レモンの色に使える。ひまわりの花びらに使えるときもある。だが基本的にレモンの色だと思っていい気がする。
イエロー	やや落ち着いた鮮やかな黄色。RとGがマックスの黄色より現実味がある。ひまわり、黄色い紅葉、ショベルカーなど重機の黄色に使える。
やまぶき いろ	もとは花の色らしいのだが、蜜柑やオレンジ（果物）、夕日の色として使える。亀〇流の道着はこの色らしい。
だいだい いろ	これも蜜柑やオレンジ、夕焼けの色として使える。

緑系

色	説明
きみどり	草や葉。葉に日光が当たっている部分の色。
はいみどり	草や葉。日光が当たっていない部分の色。
みどり	落ち着いた鮮やかな緑色。草原やコケの地面の色に向いている。
ときわ いろ	松や杉のような常緑樹の葉の色に使える。
ふかみどり	ときわ色の陰の部分に使える。

青系

色	説明
そら いろ	空の色。特に空の下のほうの色。本来は空の上から下へとグラデーションさせて空らしい色にすると思うが、このアプリにはまだ広い面積のグラデーションを描く機能がないので、いまいち使えない…
ぐんじょう いろ	空の上のほうの色。
あお	明るい青色。空の色や水の色に使える。なんとなく印象の良い色なのでメモ用にも使える。
マリンブルー	リアルめな海の色。
ウルトラマリンブルー	深い海の色。

紫系

色	説明
ふじむらさき	藤の色。
すみれ いろ	すみれの色。紫系は基本的に花の色である。
むらさき	代表的な紫色。実はパレットの中心の列は、最も基本的な色を並べている。
パープル	赤寄りの紫で明るい色。むらさきの明るい部分に使用できる。
ロイヤルパープル	赤寄りの紫で暗い色。むらさきの暗い部分に使用できる（でもちょっと色が濃すぎるかも）。

茶系

色	説明
ベージュ	非常に明るい茶色。砂浜、服の色、家具の色など。
カーキー	明るい茶色。木材の色。
ブラウン	代表的な茶色。木の幹。
フォーン	由来は子鹿の毛の色らしい。家具、皮製品の明るい部分などに使えそう。あまり聞いたことない名前だが、いい色だったので採用。
フォーン（暗）	フォーンに対して陰にできる色を探したがいまいち見つからなかったので自作した色。

おわりに

なんとまあ誰得っぽい内容……だったかもしれませんが、自分好みのお絵かきアプリを作りたいという人はこれからもいるでしょうし、車輪の再発明とかでなく自分で作ることでしか接種できない栄養素というものがあるので良いことにします。いつか誰かの参考になったらうれしいです。

ちなみに、下の絵はパレットの色をなるべくたくさんそのまま使って描いてみた絵です。カオス。

まだまだアドベントカレンダーは続きます。今年もよろしくお願いいたします。

参考サイト

色の名前と値は主に以下のサイトを参考にさせていただしました。