リリースされたばかりのカラースキームツールが簡単・便利で使いやすい! -Colour Code

画面は非常にシンプルですが、カラーに関して豊富な機能が備わったオンラインツールを紹介します。

サイトのキャプチャ

Colour Code

http://colourco.de/ 、いいドメインだ!

使い方は簡単です。

カラーの変更

  • マウスの左右で、色相を変更
  • マウスの上下で、光度を変更
  • スクロールで、彩度を変更
    ※スクロールはMagic Mouseじゃないとできないかも

基本操作

  • クリックで、カラーをロック
  • ロックされた鍵アイコンをクリックで、ロックの解除
  • カラーをクリックで、保存して新しいカラーを作成
  • ゴミ箱をクリックで、カラーの削除

まずは、流行のサーモン(#F38268)を右上のボックスにセットしてみます。

サイトのキャプチャ

サーモン(#F38268)をセット

サーモンをクリックするとカラーを保存し、次の新しいカラーをどんどん作成できます。

サイトのキャプチャ

カラーを3色に増やしてみました。
増やせる数は、ブラウザの幅が許すならいくらでも増やせるようです。

Colour Codeは単にカラーをセットするだけでなく、カラーセオリーに基づいたカラースキームを作成することもできます。
サーモンをベースに展開してみます。上部の「Scheme mode」を順番にクリックするだけです。

サイトのキャプチャ

サーモンベースのmono
同一の色相を使用、全体の色味を統一した配色。

サイトのキャプチャ

サーモンベースのmono & dark gray
monoに暗いグレイを加えた配色。

サイトのキャプチャ

サーモンベースのmono & light gray
monoに明るいグレーを加えた配色。

サイトのキャプチャ

サーモンベースのanalogic
類似した配色を使用、自然な調和の配色。

サイトのキャプチャ

サーモンベースのcomplement
対照の補色を使用、調和のとれた配色。

サイトのキャプチャ

サーモンベースのanalogic&complement
類似色と補色を組み合わせた配色。

サイトのキャプチャ

サーモンベースのtriad
3等分した配色を使用、バランスのとれた配色。

サイトのキャプチャ

サーモンベースのquad
4等分した配色を使用、バランスのとれた配色。

top of page

©2017 coliss