ネットギアリング比率(Net Gearing Ratio)追加しました

カラーパレット/カラーサンプルの定番サイト

カラーパレットツールのサイトまとめWeb メディア

カラーパレット/カラーコードとは

カラーパレットとは、ディスプレイに表示させる色の組み合わせを定義した色情報のこと。コンピュータが内部に持つ色のデータで、描画や画像編集用のアプリケーションソフト(グラフィックスソフト、ページレイアウトソフト等)の操作画面にて、カラーチャートを表示するパレットの形で提供される。色を指定するためのツールボックスである。

ディスプレイは、光の三原色(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は扱う色数と範囲が異なるため非可逆式となり変換式を用いて近似値を出しても、同色とすることが困難である。

RGBとCMYKっていったい何のこと?5分でわかる解説!
紙媒体やWebサイト制作で、RGBやCMYKを正しく理解していますか?どちらも色を表現する仕組みですが、使い分けないと色が鈍くなることも。この記事では、RGBとCMYKの使い分け、PhotoshopやIllustratorでの設定方法を解説します。

カラーサンプル/カラーテーブル サイト

色の名前とカラーコードが一目でわかるWEB色見本

  • 色見本:原色、和色、洋色、パステルカラー、ビビッドカラーなど、色見本から好みの色を探すことができる
  • 配色:文字と背景の配色をチェックすることができる
WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

配色の見本帳

  • 好みの配色、イメージから様々なカラーパレットを探すことができる
  • マンガ配色検索、カラー成分測定などのお楽しみ・便利ツールもある
配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...

color-sample.com

  • Web上のフルカラーで表現できる1600万色の色見本
色見本と配色サイト - color-sample.com
More than 16 million colors

Material UI Colors

  • マテリアルカラー以外にも、メトロや企業などのカテゴリで配色を選択できる
  • 色以外に、アイコンなどの素材もダウンロード可能
🎨 Material Design Colors, Color Palette | Material UI
Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material Design Guidelines.

カラーコード一覧表 simple

  • 基本的なカラーコードを確認することができる
HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

カラーコード表 simple

  • HTML用カラーコードテーブル
カラーコード表

HTML Color Codes simple

  • HTMLカラーチャート
  • HTMLカラーピッカー
HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

色の名前と色見本

  • Webセーフカラー、color name(HTMLで名前で色指定できる色)、JIS慣用名日本工業規格で規定している「物体色の色名」、日本の伝統色、色の名称(日本語、中国語、フランス語、英語)を調べることができる
日本語 - 色の名前と色見本
色の名前とweb色見本。日本語、英語、フランス語、中国語の色名と色見本

NIPPON COLORS – 日本の伝統色

  • わびさびの風流が好みの人向け
NIPPON COLORS - 日本の伝統色
The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

Oto255

  • 画面いっぱいの色サンプルをクリックすると、その色のグラデーションのカラーコードが表示される
A Most Useful Color Picker | 0to255
Find lighter and darker colors based on any color. Discover why over two million people have used 0to255 to choose colors for their website, logo, room interior...

ウェブ配色ツール Ver2.0

  • カラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツール
ウェブ配色ツール Ver2.0
1色選ぶと勝手に配色をしてくれるツールです。どなたでも無料でご利用いただけます。フォルトゥナが制作しました。

カラーパレットツールサイト

COOLORS

  • EXPLORE: お好みの配色を探し、カラーコード付きの配色パターンをダウンロードできる
  • MAKE A PALETTE: 自分が作成したパレットを登録・共有できる
Coolors - The super fast color palettes generator!
Generate or browse beautiful color combinations for your designs.

Color Hunt

  • 2万を超える配色パターンを、New, Trendy, Popular, Random の分類から探すことができる
Color Palettes for Designers and Artists - Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

Adobe Color CC

  • PhotoshopやIllustratorなど、他のAdobeサービスと同期して利用できるアプリツール
  • iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成できる
https://color.adobe.com/ja/create/color-wheel

Happy Hues

  • 好みの配色カラーパレットを選ぶと、直感的に色味の違いが分かる
Happy Hues - Curated colors in context.
See color palette inspiration on a real example website. As you click on different palettes every color on this site updates to give you context of how that col...

Scheme Color

  • 1万種類以上のカラースキームを公開しており、細かいソート機能で好みのパターンを探すことができる
  • 配色の編集やダウンロードもできる
SchemeColor.com: Download, create & share beautiful color combinations
SchemeColor.com is a top-rated website to download, create and share thousands of beautiful color combinations. Get detailed information on hexadecimal colors c...

Color Kitty

  • Explore: お好みのカラーパレットを探すことができる
  • Gradient Game: 自分好みのグラデーションの作成ツール
https://colorkitty.com/

ColorDrop

  • 4色のカラーパレットを集めたサイトで、表示されたカラーコードをクリックでさくさくコピーできる
ColorDrop - New colors
Thousands of curated colors, palettes for use in your products

Pigment

  • Pigment(顔料)とLighting(光量)を調整して、使いやすいナチュラルな配色カラーパターンを探すことができるオンラインツール。左端のコンソールで調整する
  • 右上の検索ボックスから選んだ写真をベースに配色を探すこともできる
Pigment by ShapeFactory | Simple Color Palette Generator
A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off yo...

Hue 360

  • カラーパレット作成ツール。「Brightness」で色の明るさを決め、右側のカラーホイールで色をクリックで選択していく
  • ページ下より選択した色のHEX値をまとめて確認できる
[ HUE / 360 ] The Color Scheme Application

COLOURlovers

  • 配色パターンをクリックしてカラーコードを調べることができる
  • ユーザが作成した配色パターンを登録・共有することができる
Just a moment...

Material Design Color Palette Generator – Material Palette

  • 2色選択すると自動的にマテリアルデザインに最適化された配色パターンを提示してくれる
Material Palette - Material Design Color Palette Generator
Choose your favorite colors and get your Material Design palette generated and downloadable.

colourcode – find your colour scheme

  • クリックで色選択後、マウス上下移動で明暗、スクロールで彩度を調整できる
ColourCode: Color Palette Generator | Toptal®
Browse and discover beautiful color combinations and color palettes for your designs with Colourcode.

カラーについて学べるサイト

色カラー 色の興味を解決するホームページ

  • カラーチャートの検索はもちろんのこと、カラーやデザインの解説が豊富
色カラー | 色彩とデザインのホームページ
色の箱を開けよう!色の話題や色彩を含めたデザイン、カラーチャートなど、色々な色情報を伝えるサイトです。「好きな色と嫌いな色」や「男女による色の認識」など色の嗜好の統計データも扱っています。何気ない日常に変化を与えてくれるのが色です。色が持っている性格や与える影響などを知り、色について詳しくなりましょう。イロカラ

渋谷のWeb制作会社 style

  • カラー配色で迷わない!シーン別配色見本32パターン
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。

baigie

  • デザインに関わるすべての人が知っておくべき色と配色の基本|ベイジの社長ブログ
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie

RGB と CMYK の変換ツール

RGBと16進数カラーコードの相互変換ツール
WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。16進数カラーコードとRGBを変換する計算式の解説も。
RGB CMYK 変換オンラインツール(無料)
簡単にRGB画像をCMKYにオンラインで変換・確認するフリーソフトです。デザインを行う際に最終的な色味を確認したり、CMYK環境がない環境で仕上がりイメージを確認するために無料でお役立ていただけます。看板のデザインをしていて入稿段階でCMYKに変換したデータを確認したら、色味が違う!?とお困りの方にご利用いただきたいツ...
RGB⇒CMYK変換ツール|シメケンプリント
画像ファイルをRGBからCMYKに変換するフリーウェブツールです。
カラーコード変換ツール | Hex、RGB、HSV、CMYK、XYZ、LAB、HSLに対応
オンライン上で、RGB、HEX、CMYK、HSV、HSL、XYZ、LABを相互変換できるツール。補色、反転色の抽出にも対応!
RGB→CMYK変換ツール(無料ツール)【プリントネット】
JPEG形式やPNG形式のファイルを簡単にCMYK変換することが出来る無料ツールです。ファイルをドラッグ&ドロップするだけで所定の用紙に配置した際の解像度が表示されます。あとはサイズを選択して『CMYK変換→PDF出力』ボタンをクリックするだけ。
【みんなの知識 ちょっと便利帳】16進数カラーコード、CMYK、RGB相互変換
16進数カラーコードとCMYK、RGBを相互に変換するツールです。『みんなの知識 ちょっと便利帳』の一部です。
カラーコード変換ツール
カラーピッカーで動かしてRGB,RGBA,HEX,CMYKのカラーコードを取得変換出来るオンラインツールです。
カラーコード変換|カラーサイト.com
RGB、HSV、HSL、CMK、CMYKを相互に変換し、色見本、カラーコードで確認することができます。

配色・デザインに関するリンク集

もう配色アイデアには迷わない!無料ですごい配色ツール110個まとめ【2022年版】
配色がなかなか決まらないと悩んでいる人は、多いのではないでしょうか。しかし、どの配色ツールを使えばいいかわからないという声をよく聞きます。そこで本記事では、苦手な人も多い配色えらびに使える無料オンラインツールをまとめてご紹介します。7年越しで見つけた、実践向け110の配色ツールが揃います。
誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選
今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットツールをご紹介します。あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、自身に合うものを探してみましょう。

あわせて読みたい

この記事を書いた人
肩の力を抜いて楽しんでいます!
ビジネスハッカー(Biz-H)

FIRE達成のブログ職人
主な経歴:電機メーカー(当時東証1部/現プライム)、監査法人(BIG4)、外資系IT企業、外資系コンサルティングファーム、日系コンサルティングファーム、PEファンド(ハンズオンの企業再生担当)

ビジネスハッカー(Biz-H)をフォローする
Web メディア
スポンサーリンク
ビジネスハック 戦略/経営/会計

コメント