歴代オランダ首相(Minister-presidents van Nederland)追加しました
PR

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

カラーパレットツールのサイトまとめ 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...

カラーコード一覧表 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 color...

ウェブ配色ツール 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 upd...

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 deta...

Color Kitty

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

ColorDrop

  • 4色のカラーパレットを集めたサイトで、表示されたカラーコードをクリックでさくさくコピーできる
ColorDrop
Explore thousands of color palettes or create your own. Ideal for designers and artists seeking inspiration. Start your ...

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...

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パターン
http://www.hp-stylelink.com/news/2013/07/20130708.php

baigie

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