[Misc] KOLOR – 色当てゲーム
画面内に出てくる色が、カラーパレットの中で言うとどの色なのかを当てるというシンプルなゲーム。最初は簡単です。「こんなもん簡単じゃねーかナメてんのか」とか思いながらゲームを進めて行くと、カラーパレットは増えるわ似たような色ばかりラインナップされるわでどんどん難しくなっていきます。最終的にスコアが出るんだけど、わたくし370でした。デザイナーのくせして色の判別に関しては結構いいかげんなようです。いやこれ結構難しいですな・・・。
Tag Archives: ColorPalette
[Color Palette] Tint UI – プラットフォームやブランドごとのカラーパレット
各種プラットフォームやブランドごとのカラーパレットをまとめたサイト。プラットフォームに関してはiOSやAndroid、Windowsが、ブランドとしてはTwitterやFirefoxなどが紹介されてます。またPantone 2015やフラットUIなどの流行色的なものも紹介されてます。それぞれのカラーパレットはクリックする事でHEX指定でクリップボードでコピーされるので、Photoshopなどのグラフィックツールで使いやすいです。
[UI Design] Material Palette – マテリアルデザインに対応したカラーパレットツール
Googleの新しいデザインルールであるマテリアルデザインに準拠した、カラーパレット生成ツール。表示される各色の中から2色を選ぶと画面右側にプレビュー画面が出るので、それを見ながら配色を選ぶという仕組み。チョイスした色は画面右下の「Your Palette」エリア内に残るので、そこをクリックするとHEX指定で色の値をクリップボードにコピーできます。Androidアプリ作る際の配色決めに使えそうです。GoogleアプリのiOS版にもこのデザインルールは部分的に導入されつつあるので、Android AppっぽいUIのiOS Appを作る際にも使えそう。個人的にはiOSの文化にAndroidのルールを持ち込むのってあんまし好きじゃないですが。ハンバーガーメニューとかiOSユーザーには「？？？」ですしね実際。
[Color Palette] BrandColors – 様々なブランドのカラーパレットを集めたサイト
様々なブランドのカラーパレットを集めたサイト。ここで言うブランドというのは、いわゆるオンラインのものだけではなく、例えばコカ・コーラとかIKEAなどのリアルなブランドや店舗のものも含まれます。また商号レベルのものだけでなく、ExcelやXBOXなどの商品レベルのものも多く紹介されてます。各パレットをクリックすると、HEX形式での色指定を確認する事が可能。サイトの左端からは、CSSやSCSS、LESS形式での各ブランドカラー指定を一括で出力できたりもします（用途がよく分かりませんが・・・）。ロゴやWebデザインの際のカレーパレットの参考になりそうです。
[Color Palette] PLTTS – カラーパレットの共有サイト
カラーパレットの共有サイト。サインインすれば自分でもカラーパレットを投稿できるようになるみたいです。興味深いのが、投稿した人がそれぞれのカラーパレットに名前を付けている点。これが洋楽ロックの曲名みたいでなんかイイです。各パレットは詳細画面に入る事でHEX指定を見る事ができるので、気に入ったものがあったら自分の作品にサクっと適用できます。ちょっと分かりづらいですが、画面上部中央に検索ボタンがあるので、そこから#始まりのHEX指定をする事で、任意の色を使ったパレットを抽出する事もできます。これ系のサイトだとCOLORloversとかが有名ですが、これはこれでイイですね。
[Color Palette] Color Calculator – 色相環を使ったカラージェネレーター
色相環を使ったカラージェネレーター。これすっごい便利です。Step1で任意の色をまずは選んで、Step2で配色形式を選ぶ事で簡単にカラーハーモニー（配色）を抽出する事ができるというもの。配色形式はボタンで表されているので分かりやすいです。左から補色色相、彩度違い（これなんて言うのか分かんない）、隣接色相、対照色相、中差色相、テトラード（4色配色）となっており、最初に選んだ1色をキーカラーに、それぞれ対応する色を吐き出してくれます。色はHEX指定で生成されますが、クリックするとCMYKとRGBでの指定値も見ることができます。配色に困った時にとってもナイスです。けどまぁあまりこうしたセオリーに頼りすぎるのも良くないとは思うんですけどね。
[Color] HSL COLOR PICKER – HSL色空間によるカラー作成ツール
HSL色空間によるカラー作成ツール。HSL色空間についてはこちらを参照。まぁアレですね、Photoshopで言う「色相・彩度」ツールで出てくるアレです。色相・彩度・輝度の3つのスライダーを使って色を作るやつです。1番目は色の種類、2番目は色の強さ、3番目は色の明るさを指定できます。加えて4番目はアルファ値（透明度）が指定できるので、半透明な色も作成可能。作った色は画面左にあるカラーパレットに反映され、作ったカラーを人に伝えたい場合はURLを教えるだけでOK。またページ下部には、作成した色のHEX指定、RGBA指定、HSLA指定の3種類の数値がリアルタイムに反映されます。サクっと色作って共有できる点がナイスです。
[Color Palette] Colorpeek – カラーパレットを作ってサクっと共有できるサイト
任意のカラーを入力し、できたカラーを他人とサクっと共有できるサイト。カラーはHEX指定（16進法）でもRGBA指定でも可。RGBAの場合はアルファ値についてもちゃんと反映してくれます。カラーは何個でも作る事ができ、他者と共有する際はページのURLを送るだけでOK。TwitterやFacebookなどへの投稿もできます。サイトやロゴデザインの際、色の組み合わせなどを相談する際に便利かも。ちなみにトップページ内でロゴをクリックすると、様々なWebサービスのカラーパレット例を見る事ができます。