個人開発サービスのカラー決めの際のロジック

サービスの顔となる色（ブランドカラー）を1〜2色決める

サービスのコンセプトを彩る色を決めます。

Adobe Colorを使用して、もう1色追加します。

類似色や補色などから選び出すと良いでしょう。

Material Palette Generatorを使用して、色を 10段階に展開します。

Material Palette Generator は 900 から 50 に 10段階に展開しますが、今後の使いやすさを考慮して、100, 90, 80, 70,...という形に変更します。

サービスのカラーと敵同率の高い色をベースにしたグレーを生み出します。

Adobe Colorに、サービスカラーを入力して、類似色を算出します。

次に、算出した色のカラーモードを HSB に変換した値を、HSL/HSV カラーピッカーに入力します。

入力した値から H 値を固定した状態で、S 値, V 値を調節して、グレー色（文字色として使用する色）を決定します。

再度、Material Palette Generatorを使用して、色を 10段階に展開します。

この階調をそのままに、Gray 100 を Opacity 変更を 100%, 90%, 80%,... で色展開して、透過色を作成します。