メインコンテンツまでスキップ

色の選び方

知っておくと仕上がりの質が変わる色選びの豆知識をまとめています。

ベースカラー
#9fc6d6
#9fc6d6
ベース(70%)
#d3dbde
サブ(25%)
#ff7842
アクセント(5%)
#9fd6ca
類似色 −30°
#9fc6d6
ベース
#9fabd6
類似色 +30°
#d6ae9f
補色
光源カラー#ffff99
設定なし(= 0)
_MonochromeLighting: 0.5
有彩色ライトが当たったとき、設定ありだとライト色の影響が抑えられます

70:25:5 の法則

配色の基本的な比率として広く使われています。

役割割合
ベースカラー70%髪・メインの衣装色
サブカラー25%衣装のサブパーツ・アクセント素材
アクセントカラー5%ボタン・宝石・差し色
アクセントカラーは面積が小さいからこそ目を引きます。主張の強い色はここに絞るのが効果的です。

原色は避ける

RGB 値が極端な色(255, 0, 0 のような純赤など)は、VRChat のライティング環境やワールドのポストエフェクトの影響を強く受けます。明るいワールドでは飽和して潰れ、暗いワールドでは不自然に浮くことが多いです。

少し彩度を落とし、明度を調整するだけで馴染みが大きく改善します。

色の三属性

色は 色相・彩度・明度 の3つの要素で成り立っています。多くのペイントソフトやUnityのカラーピッカーでHSV/HSLモードとして操作できます。

属性英語意味
色相Hue赤・青・緑など「何色か」を表す。色相環上の位置で示される
彩度Saturation色の鮮やかさ。高いほど原色に近く、低いほどグレーに近づく
明度Value / Brightness色の明るさ。高いほど白に、低いほど黒に近づく

色相の選び方

類似色でまとめる

隣接する色相(例:青 → 青紫 → 紫)でまとめると自然に調和します。

初心者でも失敗しにくい配色です。まず類似色でまとめ、慣れてきたら補色を少量加えるのがおすすめです。

補色でアクセントを入れる

色相環の反対側の色(例:青に対してオレンジ)を少量入れると視線を集めます。

アクセントカラーに補色を使うのが定石です。上のパレットツールで「補色」欄を参考にしてください。

色温度を統一する

暖色系(赤・橙・黄)と寒色系(青・青緑)が混在すると印象がまとまりにくくなります。

全体をどちらかの色温度に寄せたうえで、アクセントに反対側を使うのが扱いやすい構成です。

彩度・明度のコントロール

彩度は揃える

ベースカラーとサブカラーの彩度レベルが大きく乖離すると、パーツごとに「浮いて」見えます。

既存テクスチャの彩度を参考に、追加マテリアルも同じレンジに収めると統一感が出ます。

明度差でメリハリをつける

同じ色相でも明度を変えることで立体感や重心が生まれます。

上半身を明るく・下半身をやや暗くするだけでシルエットが引き締まります。

ライティング設定を前提に色を決める

3+1は _LightMinLimit: 0.05 により暗いワールドでも最低限の明度が保たれ、_MonochromeLighting: 0.5 により有彩色のライトが半分グレーに補正されます。

自分の制作環境(Directional Light 一灯)だけで色を決めると VRChat 内で想定外の見え方になりやすいので、複数のライティング環境で確認することを推奨します。

元テクスチャの色域を参考にする

新しい衣装やアクセサリのテクスチャを作る際は、元の SA_CLOTH_A.psdSA_HAIR_A.psd の色域(彩度・明度のレンジ)を参考にすると統一感が出ます。

元テクスチャから色をスポイトで拾い、そこから派生させる方法が馴染みやすいです。

もっとよくできるポイント

状況改善の考え方
色数が多すぎる色相は3〜4種に絞り、明度差でバリエーションをつくる
全体が同じ彩度ベースを低彩度にしてアクセントだけ高彩度にする
原色の多用純色から少し白・黒・グレーを混ぜると馴染みやすくなる
コントラストが弱い明度差を意識的につくると読みやすいシルエットになる