はじめに
デザインの知見がまったくないので今月からちょっとずつ勉強を始めたいなと思ってやっている。
ランダムに配色を提案してくれる系のサイトは本当に好き
見てるだけで楽しい
そこで、今まで勉強で使ってみたサイトとこれから使いたいとと思っている配色系のサイトをまとめておく。
Colorable
- Aaの部分が見やすさの評価になっている
- Randomボタンを押すとランダムに配色を提案してくれる
- Textの下のバーを調節するとテキストの色を調整できる
- Backgroundを調整すると背景色を調整できる
テキストと背景を調整することでコントラストを確認できる
コントラストの評価が低いと数値が低くなる
例えばこれは 1.34Failと表示される
逆に1枚目の写真は見やすいので7.84AAAと表示されている
配色や見やすさ大丈夫かな？という確認に使えそう(V)o￥o(V)
RandomA11y
名前の通りアクセシビリティを考慮した配色をランダムで提案してくれる
これはもう見た目がかっこよくて好き
グラフが表示されていたりするので、プレゼン資料の参考になりそう。
- 右上のGenerate→ボタンを押すとランダムで表示される
- Pinned colorに設定したカラーを基準に配色をランダムで提案してくれる
Pinned colorを#000にしてみた
黒をベースに何色か提案してくれる
Pigment
これまた見ているだけで楽しいやつ・・・！
カラーコードをクリックするとコピーできて、そのままサイトデザインに反映できる。
Colors
5色の組み合わせを試してみることができる
クリックすると近しい色を選択でき、簡単にグラデーションを試すことができる。
ColorSpace
1色選択するとランダムに配色を提案してくれる
#235B75を選択して生成してみた
他にもドットを描くときにおすすめなDotting Paletteとか親しみのあるFriend paletteとかが、いろんなテーマで生成される。
なんかWebデザインだけでなく、ネイルとかの配色の参考にもなりそうな感じ👀
さいごに
今月からデザインに触れ始めて配色とかデザインは本当に難しいと感じたので、こういう便利なツールに頼れるのはよい。