WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

配色のルール

配色には色々なルールがありますが、まずはこの3つを覚えましょう

1、コントラスに気を付ける

2、色数を抑える

3、トーンを合わせる


HSBを使った配色

photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是非覚えておきましょう。
HSBは色相(Hue)、彩度(Saturation)、明度(Brightness)の3つの値を調整していきます。

トーン(色調)を合わせる方法

トーン(色調)とは彩度と明度の2つの値を合わせた物です。なので上記の「トーンを合わせる」場合は彩度(Saturation)、明度(Lightness)の2つの値は動かさずに色相(Hue)を動かして色を決めていきます。




webnaut.jp



www.slideshare.net


hue360.herokuapp.com


配色を考えるのは非常に難しい作業ですが、今はキーワードでカラーパレットを生成してくれるAIなどが豊富にあるので、これらを使って作業を効率よく進めましょう



キーワードから配色を提案するColor Magic(日本語可)

colormagic.app

キーワードから配色を提案するHuemint(英語のみ)

aicolors.co



プロジェクトにあった配色を自動で提案してくれるツールHuemint

色の組み合わせを確認できるサンプルイメージが豊富。
huemint.com


クリックするだけのお手軽AIカラーツール Colormind

colormind.io