サイトの色をツールを使ってサクッと決定。Coolorsの使い方をステップバイステップで解説します

Create-a-palette-Coolors

新しくサイトを作ろう!と先日ドメインやWPの設定を行いました。

サイトの色も少しはカスタマイズしようと思い、前回組み合わせに大変悩んだので海外の自動で色を提案してくれるツールCoolorsを使いました。

全て英語なのですが、慣れれば簡単です。訳して説明していきます。

サービス名の由来はきっと、Cool と colorをかけてるんだと思います。

目次

Coolors使い方

https://coolors.co/にアクセスします。

サインインなど不要で、[Start a generator]を押します。

公式のチュートリアルがわかりやすいのでそちらを使って解説していきます。

スペースバーを押し続ける

好きな色の組み合わせが出るまで、スペースバーを押し続けます。たくさん組み合わせが出てくるので楽しいです。

大体欲しい方向性に近い組み合わせが出てきたら、またはどれか一つ好みの色が出てきたら止めます。

Ctrl + z で一つ前の組み合わせに戻れます。

Create-a-palette-Coolors

気に入った色をロックする

気に入った色を、鍵マークを押してロックします。

この状態でスペースを押すと、ロックした色は変わらず、ロックした色に合わせた組み合わせが出てきます。

Create-a-palette-Coolors

一つずつ(複数でも)ロックして色を決めていきます。

Create-a-palette-Coolors

クリックしてスペースキー、クリックしてスペースキー、クリックしてスペースキー・・・

Create-a-palette-Coolors

「これにハマって一日中キーボードを叩きたくなっちゃうのがわかるので、そろそろストップしよう・・」

Create-a-palette-Coolors

使いたい色が決まってる場合

すでに自分が使いたい色が決まっている場合はインスペクターから、#コードを打つこともできるし、RED / GREEN / BLUE のバーを左右にいじって色を決めることもできます。

色が決まったら

写真のマーク:この色味をカラーパレットとして書き出す

Create-a-palette-Coolors

サングラス&太陽っぽいマーク:色の彩度(鮮やかさ)と暖色系vs寒色系の色味調整ができますCreate-a-palette-Coolors

Exportのマーク:色々なフォーマットに書き出し&URLでのシェアもできますCreate-a-palette-Coolors

Save 保存:全てのデバイスでアクセスできるパレットとして保存しておくことができます( サインアップが必要)Create-a-palette-Coolors

保存されたカラーパレットは、右上のハンバーガーメニューからチェック

あなたの写真と作ったパレットでコラージュ画像が作れます!

実際にパレットを作ってみる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

旅するフリーランス。外資系でマーケ。元米国ディズニー勤務。イギリス留学、スペインワーホリ経験者。海外経験やグローバルキャリアの発信をしています。趣味はダンスと旅行で、渡航国は約50ヵ国。ブラジルで海に目覚め、エジプトのダハブでダイビングの資格取得しました。世界中の海で潜るのが夢。
詳しいプロフィールはこちら!

コメント

コメントする

目次