カラートーンジェネレーターを作りました

こんにちは。
自主制作で「カラートーンジェネレーター」なるものを制作したのでご紹介します。
スマホ対応は微妙です。PCでみてください！

制作したサイトのリンクはこちらです。アカウントの登録など無しで使えます。
https://harmonious-beignet-e3fb3a.netlify.app/

まずは画面左のトーン名を選択します。トーンの種類は下記の通りです。

トーン名をクリックすると画面中央のカラーパレットに5色生成されます。
各カラーをクリックすると「#○○○○○○」のHEX値がクリップボードにコピーされます。

パレットにカーソルを合わせると、少し見にくいですが「他の色を生成」というボタンが現れます。クリックするとその色だけをランダムで生成できます。
（見やすく修正しました）

画面右上にボタンが3つあります。
「カラー生成」は5色全てを再度ランダムで置き換えることができます。
その左の「お気に入り」をクリックすると、今表示されているカラーパレットを保存できます。
保存したカラーパレットは、右上の「お気に入りを表示」をクリックすると一覧で表示できます。

保存したカラーパレットは、画像として書き出したり、カラー生成画面に読み込んだり、お気に入りから削除したりすることができます。
お気に入りの情報はブラウザに保存されているので、キャッシュクリアなどすると全て消えるのでご注意ください。

デザイン初学者が、Pinterestや他サービスのカラーパレットなどから色を決めているのをよく見かけます。
デザインを作る上でカラーは大事なので、なんとなくで選んではいけません。
参考を真似するのもいいですが、次のステップアップとして、「トーンからカラーを選ぶ」ということが大事になります。

自分自身、トーンから選びたい派だったので世の中のサービスやアプリを探しました。
しかし、これといって良いものが無かったので作りました。

制作はAIのbolt.newで行い、大枠は10分くらいで完成しました。
本当にいい世の中になりましたね。

おしまい

綴りの一覧へ