はじめに

配色とは、ウェブサイトのイメージを作る上で大変重要です。
また、人によって色の見え方は異なるため、配色に合理的な配慮をすることも大切です。

https://qiita.com/umi_mori/items/ab412996210b67888d2c#4-配色デザイン

配色の決め方

配色を決めるためのツールは近年充実してきています。
もしもデザインやアートに自信がない場合は、以下のようなサイトが参考になると思います。

https://webdesign-trends.net/entry/11846

配色の設定方法

今回用いているmvp.cssのファイルの中に以下のようなコードがあります。

mvp.css
:root {
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color: #118bee;
    --color-accent: #118bee15;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}

以上のファイルのそれぞれ対応する色を自由に変更することで配色を変更することができます。