「自由に色を組み合わせて!」「あなたの個性を発揮して!」と言うのは簡単でも、
実際に自分で色を組んでみると何となくセンスに欠けたダサい見映えになりがちな昨今、
皆さまいかがお過ごしでしょうか。私は元気です。
おかげさまで最近は『Khroma』というオンラインカラーパレットのお世話になっています。
Khroma(クロマ)
いわく『ユーザーの好みをAIで学習し、最適な色の組み合わせを無限に提案してくれる』Webサービス。
AIで学習…と言うと途端にうさんくささを感じる人もあるかもしれませんが、
まずは軽く使い勝手を見てみましょう。
トップページから「Generate」ボタンをクリックすると…

こんなページに遷移しました。ここから「自分の好きな色50色」を選びます。
青メインで色を探しているなら青系の色を。
コントラストのはっきりした組み合わせを探しているなら濃い色と淡い色を、
バランスよく選んでいくのがよさそうです。
無心にクリックしていくと今どこまで来たか分からなくなりそうで心配ですが、
右上のカウンターが色数を数えてくれてるので地味に助かる…
終わったら右上の「Generate」をクリック!

おおー!
カッコいい色の組み合わせが生成されました!
しかも色名までカッコいい。シャムロック、アザレア、ボッティチェリですって。
スクロールしていけば更に何通りも組み合わせが出てきます。助かる!
それぞれのタイルをホバーして「i」の情報アイコンをクリックすると
HEXやRGBをコピーできます。
「WCAG Ratio」とは背景および文字コントラストの達成基準。そこまでチェックしてくれるとは…
ちなみに現在はまだベータ版のためか
ユーザー登録などはなく、ブラウザごとに履歴が保存されるようです。
なのでうっかりブラウザを閉じてしまっても安心ですが、別の50色を試してみたい場合は
別ブラウザやシークレットモードからサイトを開き直しましょう。
上部ナビからアイコンをクリックすることで、更にバリエーションを確認できます。
ポスター
グラデーション
(CSSのコピーまでできる)
一時期トレンドを席巻したデュオトーンも、この通り!
(これもCSSコピーできる)
パレット
しかもナビゲーション右側にある月アイコンをクリックすれば、
ナイトモードでの見栄えを確認することも可能です。
至れり尽くせり!
気に入った色の組み合わせを「お気に入り」すれば、いつでもまた見ることが可能。
「Bias」と数値を設定するフォームもありますが、こちらは
自分が最初に選択した色から『どこまでズレてもいいか?』を規定する部分とのこと。
この数値が大きければ大きいほど、
当初選択の色に幅を持たせた寛容な提案となります。
いくら色選びが苦手とはいえ、これだけ多彩な提案をもらえれば
なんとかなりそうな気がしてきますね。私もです!
困ったときはありがたいツールの手を積極的に借りつつ、よいものを作っていきましょう。
