カラーパレット/カラーコードとは
カラーパレットとは、ディスプレイに表示させる色の組み合わせを定義した色情報のこと。コンピュータが内部に持つ色のデータで、描画や画像編集用のアプリケーションソフト(グラフィックスソフト、ページレイアウトソフト等)の操作画面にて、カラーチャートを表示するパレットの形で提供される。色を指定するためのツールボックスである。
ディスプレイは、光の三原色(RGB)の各色の比率を変化させて色を表現する。ディスプレイの各画素にRGBの比率を直接指定すると、扱うデータが膨大になって処理に時間がかかってしまう。そこで、表示させる色の組み合わせを事前にカラーパレットに登録することで、色を表示させるためのデータ量を大幅に減らすことができる。
カラーパレットを用いたディプレイの表示方法をインデックスカラーと呼ぶ。
カラーコードとは、HTMLなどのコンピュータ言語において、色を表示するためにそのRGB値を十六進法で表記した文字列。ウェブコンテンツの視覚的な表現に関して指定するスタイルシート(CSS)や、Scalable Vector Graphics(SVG)において、色を指定する方法に用いられる。
ディスプレイは、光の三原色(RGB)の各色の比率を変化させて色を表現する。
- R: 赤(Red)
- B: 青(Blue)
- G: 緑(Green)
RGBの各色ごとに明るさが調節されることで、様々な色と様々な明るさの色が表現される。表現できる色数は、各色に割り当てられた容量によって異なる。例えば各色に2ビットが割り当てられると64色、4ビットでは4096色、8ビットになると1677万7216色が表現可能となる。
6桁の16進数で表される「カラーコード」#FFFFFF ⇔ R:255 B:255 G:0 は相互に変換可能である。
・色料の3原色(CMY)
RGBは3色が255階調で組み合わされるが、印刷の場合は、ブラック(K)を加えた CMYK が4色の100階調で組み合わされて表現される。
- C: シアン(Cyan)
- M: マゼンタ(Magenta)
- Y: イエロー(Yellow)
- K: ブラック(Black)
CMYKカラーは、専用のグラフィックソフトを使わない限りモニター画面で表示することができない。また、RBGとCMYKは扱う色数と範囲が異なるため非可逆式となり変換式を用いて近似値を出しても、同色とすることが困難である。
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/7875dd6e8178f7b0107dbd8c35c33f8e.png)
カラーサンプル/カラーテーブル サイト
- 色見本:原色、和色、洋色、パステルカラー、ビビッドカラーなど、色見本から好みの色を探すことができる
- 配色:文字と背景の配色をチェックすることができる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/7c242b59eb7be4b9345ca9478d536f7c.png)
- 好みの配色、イメージから様々なカラーパレットを探すことができる
- マンガ配色検索、カラー成分測定などのお楽しみ・便利ツールもある
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/4d17555201c59ef71b8a80684734d124.png)
- Web上のフルカラーで表現できる1600万色の色見本
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/c9de9428369a4cf6ab1444f9b59b511c.png)
- マテリアルカラー以外にも、メトロや企業などのカテゴリで配色を選択できる
- 色以外に、アイコンなどの素材もダウンロード可能
カラーコード一覧表 simple
- 基本的なカラーコードを確認することができる
カラーコード表 simple
- HTML用カラーコードテーブル
HTML Color Codes simple
- HTMLカラーチャート
- HTMLカラーピッカー
- Webセーフカラー、color name(HTMLで名前で色指定できる色)、JIS慣用名日本工業規格で規定している「物体色の色名」、日本の伝統色、色の名称(日本語、中国語、フランス語、英語)を調べることができる
- わびさびの風流が好みの人向け
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/b7e9fc0f80f793e1fa253e58196746c4.jpg)
- 画面いっぱいの色サンプルをクリックすると、その色のグラデーションのカラーコードが表示される
- カラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツール
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/59cee22f331ed2a7ae02a3215a5777e8.jpg)
カラーパレットツールサイト
- EXPLORE: お好みの配色を探し、カラーコード付きの配色パターンをダウンロードできる
- MAKE A PALETTE: 自分が作成したパレットを登録・共有できる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/650c7b3fddc67d58202f4682fdc6bcaf.png)
- 2万を超える配色パターンを、New, Trendy, Popular, Random の分類から探すことができる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/62e4c13e68e466c2dd63d8abcde17584.png)
- PhotoshopやIllustratorなど、他のAdobeサービスと同期して利用できるアプリツール
- iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成できる
- 好みの配色カラーパレットを選ぶと、直感的に色味の違いが分かる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/9a3a6847597c97d4a2151db8cc55dffa.jpeg)
- 1万種類以上のカラースキームを公開しており、細かいソート機能で好みのパターンを探すことができる
- 配色の編集やダウンロードもできる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/b98ce13970e3e72474bf4ff4d3a7e4c0.png)
- Explore: お好みのカラーパレットを探すことができる
- Gradient Game: 自分好みのグラデーションの作成ツール
- 4色のカラーパレットを集めたサイトで、表示されたカラーコードをクリックでさくさくコピーできる
- Pigment(顔料)とLighting(光量)を調整して、使いやすいナチュラルな配色カラーパターンを探すことができるオンラインツール。左端のコンソールで調整する
- 右上の検索ボックスから選んだ写真をベースに配色を探すこともできる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/d3784938d3700180908fbbc87a2df071.jpg)
- カラーパレット作成ツール。「Brightness」で色の明るさを決め、右側のカラーホイールで色をクリックで選択していく
- ページ下より選択した色のHEX値をまとめて確認できる
- 配色パターンをクリックしてカラーコードを調べることができる
- ユーザが作成した配色パターンを登録・共有することができる
Material Design Color Palette Generator – Material Palette
- 2色選択すると自動的にマテリアルデザインに最適化された配色パターンを提示してくれる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/494389c42406b32638e0b2d27a930abb.png)
colourcode – find your colour scheme
- クリックで色選択後、マウス上下移動で明暗、スクロールで彩度を調整できる
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/59b39f66061f966abd0202be3dd46919.png)
カラーについて学べるサイト
- カラーチャートの検索はもちろんのこと、カラーやデザインの解説が豊富
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/5caed01453efeeb3a88fb2d75ce34af2.png)
- カラー配色で迷わない!シーン別配色見本32パターン
- デザインに関わるすべての人が知っておくべき色と配色の基本|ベイジの社長ブログ
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/a6a067b145f85bad1b0112531bf2d0c0.png)
RGB と CMYK の変換ツール
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/9643cd7c076dbc92537881d7fb88a8b8.png)
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/4fef4e96863434f2974922c0240e43ca.jpg)
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/6594b94f615eca9a8f492130a4b03c32.png)
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/c3aae60aca36e1d383aae329767f0eb2.png)
配色・デザインに関するリンク集
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/4989d98d3e0a910ebd515e2ebe46f8c5.jpg)
![](https://management-accounting.biz/wp-content/uploads/cocoon-resources/blog-card-cache/0466de022f761902c3c3acaa362e1c81.jpg)
あわせて読みたい
![](https://management-accounting.biz/wp-content/uploads/2022/01/Corporate-Color-320x180.jpg)
![](https://management-accounting.biz/wp-content/uploads/2020/11/free-photo-320x180.jpg)
![](https://management-accounting.biz/wp-content/uploads/2020/07/link-site-320x180.jpg)
コメント