search
LoginSignup
1

More than 3 years have passed since last update.

posted at

updated at

カラー・ホイールのRGB値を調べた

きっかけ

ノンデザイナーズ・デザインブック第4版
を読んでいたところ、
色と色の関係にカラーホイールというものが、
大いに絡んでくることが分かりました。

カラーホイールとは、
黄色」「」「」を基準とした、
12色をサークル上に配置したものです。

あるとき仕事で、
簡単なWeb画面のデザインをすることになったのですが、
RGB値とその色が頭の中で紐づけられず、
色抽出ツールを使って抜き出した調べました。

注意

  • このRGB値は私が私の為に私の環境で調べたものです
  • 環境によって微調整は必要かと思います
  • その為このRGB値はあくまで調査した際に得られた結果という位置づけです
  • とはいえ私はすごく使うので、個人的には調べてよかったと思っています

カラー・ホイールについて、かるく

図:ノンデザイナーズ・デザインブック第4版
素晴らしいカラー・ホイールより引用
image.png

先ほどもすこし触れましたが、
基準となる隣通しを混ぜ合わせ、12色作られたものです。

向かい合わせの色が「補色」の関係で片方をメインにできます。
Blue,orange
Red,green
Lime-green,violet
etc..

黄、赤、青の組み合わせを「プライマリー・トライアド」と言います。
この関係を崩さずに回転した組み合わせの色はうまく調和します。
プライマリー(Yellow,red,blue)
その他(Lime-green,red-orange,bluish-purple)
その他(Orange,green,purple)
その他(Yello-orange,violet,aqua)
etc..

これはあくまで基準となる12色「ヒュー」というもので、
黒を加えていくと「シェード」、
白を加えていくと「チント」と呼ばれるグラデーションになります。

カラー・ホイールのRGB値

番号はサークルに時計の数字を振ってます。(12,1,2..10,11)
種別は下記です。
 P:原色(Primary color)
 S:2次色(Secondary color)-原色の合色
 T:3次色(Tretiary color)-2次色と原色の合色

R G B hex 種別
249 190 1 #f9be01 T
241 150 1 #f19601 S
236 108 1 #ec6c01 T
228 1 46 #e4012e P
165 0 130 #a50082 T
86 27 133 #561b85 S
3 79 164 #034fa4 T
0 106 181 #006ab5 P
0 163 173 #00a3ad T
0 169 60 #00a93c S
171 205 6 #abcd06 T
253 217 2 #fdd902 P

使用ツール

Adbe XD

参考資料

ノンデザイナーズ・デザインブック第4版

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1