和色のスイート色変換

和色（日本の色）・洋色・原色の一覧

和色のスイート色変換の使い方

これは色の変換やデザイン配色パターンと色相環を自動で生成します。
最初にカラーコード（HTML・RGB・CMYK・HSL・HSV・XYZ）を入力します。
入力は和色（日本の色）の一覧の名前にも対応しています。
ある程度の明度や彩度があると配色の生成が綺麗になります。

カラーピッカーからの直接入力もできます。
入力するところはカラーピッカーの色になっています。
カラーピッカーで色を調整するにはHTMLのコードを入力します。

入力された色はHTML・RGB・CMYK・HSL・HSV・XYZの表色系に
相互変換されて色見本が表示されます。


配色と色彩調和の説明

配色は複数の色を組み合わせることをいいます。
良い色や悪い色というものは元々無くて配色によって
色彩が調和しているか不調和かの違いになります。
色彩は何らかの規則的な関係や共通性があったり自然に
なじんでいたり適度な対比があると調和します。
完全な調和では物足りないものになるので調和と不調和の
統一感と変化に適度なバランスがある配色が良い配色になります。


カラーコードの説明

HTMLは16bitやHEXともいいます。16進数で色を表したものです。
#ff0099やff0099の形式で入力します。

RGBはレッド・グリーン・ブルーの3色の10進数で色を表したものです。
rgb(112,188,63)やrgb 112 188 163等の形式で入力します。

CMYKはシアン・マゼンタ・イエロー・ブラックの4色で色を表したものです。
cmyk(0, 215, 157, 40)やcmyk 0 215 157 40等の形式で入力します。

HSLは色相（角度）・彩度（%）・輝度（%）で色を表したものです。
hsl(5, 81%, 54%)やhsl 5 81 54等の形式で入力します。

HSVは色相（角度）・彩度（%）・明度（%）で色を表したものです。
hsv(174, 100%, 47%)やhsv 174 100 47等の形式で入力します。

XYZはX（赤）・Y（緑と輝度）・Z（青）で色を表したものです。
xyz(122, 151, 287)やxyz 122 151 287等の形式で入力します。


色に関する用語の説明

色相は赤・青・黄などの色合いのことです。
明度は色の明るさです。高くすると白、低くすると黒になります。
彩度は色の鮮やかさです。高くすると純色、低くすると灰色になります。
トーンは明度や彩度を合わせた色調のことです。
グレースケールは彩度を無くした色のことです。
輝度はグレースケールでの明るさです。人の目で見た明るさになります。


デザイン配色パターンの自動生成

アイデンティティー（同一色相配色）
同じ色相の配色でトーン違いの柔らかい配色になります。

アジェイセント（隣接色相配色）
近い色相の配色で目立たないのでトーンを変えて調和させます。

アナロジー（類似色相配色）
似た色相の配色で自然な配色になります。

インターミディエート（中差色相配色）
中間のコントラストの配色であいまいな配色になります。

オポーネント（対照色相配色）
適度なコントラストの配色ですっきりした配色になります。

マルチコンプリメンタリー（多色補色配色）
すっきりとした自然でカラフルな配色になります。

スリーポイント（多色3色配色）
トライアドの逆の配色でカラフルな配色になります。

コンプリメンタリー（補色色相配色）
反対の色とその隣の色の配色で派手でバランスが取れた配色になります。

スプリットコンプリメンタリー（分裂補色配色）
反対の隣の色の配色でバランスが取れた配色になります。

ダイアード（2色配色・補色）
反対の色の配色でもっとも派手な配色になります。

トライアド（3色配色）
3色の配色でバランスが取れたカラフルな配色になります。

テトラード（4色配色）
4色の配色でバランスが取れたカラフルな配色になります。

ペンタード（5色配色）
5色の配色でバランスが取れたカラフルな配色になります。
トライアドに白と黒を足した配色もあります。

ヘクサード（6色配色）
6色の配色でバランスが取れたカラフルな配色になります。
テトラードに白と黒を足した配色もあります。

トーナル（中間色配色）
ダル・ソフト・ライトグレイッシュ・グレイッシュの4つのトーンからの
落ち着いた配色になります。

カマイユ（単色画配色）
遠くから見ると一色に見える微妙な配色になります。

フォカマイユ（偽りの単色画配色）
カマイユより少し色相やトーンに差がある配色になります。

ナチュラルハーモニー（ナチュラル配色）
自然な配色で黄色を明るく青紫を暗くした配色になります。

コンプレックスハーモニー（コンプレックス配色）
ナチュラルの逆で黄色を暗く青紫を明るくした配色になります。

オンブレ（陰影配色）
少しずつ陰がついて行くグラデーションの配色になります。

ウェブデザイン（Webデザイン配色）
メイン・ベース・サブ・アクセントの配色になります。
Webサイトを制作するときに使う組み合わせです。


色相環（カラーホイール）とPCCSトーンマップの自動生成

12色相環
色相を色相差で12に分けて円形に自動で生成したものです。

24色相環
色相を角度で24に分けて円形に自動で生成したものです。

PCCSトーンマップ
色相環をトーン毎に自動で生成したもので色を探すときに使います。
上に行くほど明度が高くなり、右に行くほど彩度が高くなります。
色相の輝度により黄色からシアンを暗く青を明るく補正しています。


左上の色をクリックすると和色のスイート色変換の上部に
右上の色をクリックするとPCCSトーンマップに移動します。


既知のバグ

和色の名前を入力したとき和色によって違う名前が表示される。
（黒が蝋色、紅掛空色が紅碧、白茶が名前なし等）
これはリスト内に同じカラーコードの色があるときに起こる現象で
表示される名前は違いますが色自体には問題ありません。

配色の自動生成の関係で入力した色が白や黒に近いときトーンが変わる
トーンオントーン配色では明度が範囲を超えて色が黒くなります。
（アジェイセント、カマイユ、フォカマイユ、オンブレ等の配色）
トーンが同じトーンイントーン配色や色相環等では大丈夫です。

和色（日本の色）・洋色・原色の一覧

クレジット
和色のスイート色変換　スイートドロップ かず
jscolor　 shapelib　 TinyColor　 jQuery xColor　 mjijackson.com

このサイトはリンクフリーです。

  リンクは  http://sweetdrop.net/  にお願いします。

管理人　かず