色、いわゆるカラー
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*混色 [#w8c39ca7]
**色の見え方 [#z9b95160]
厳密な話を除けば人間の目は赤と青と緑の3色をベースに様々な...
色が見えるというのはその色の光（または色を構成する光の集...
RGBなんて言葉を聞いたことあると思うけどこれはRED, GREEN, ...
**加法混色 [#ec9ad69a]
光の三原色による。光を足し合わせることで色を表現する方法...
RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE
とりあえずこれを理解しておけばOK。CYANは所謂水色、MAGENTA...
液晶モニタを良く見れば赤と青と緑の光から成り立っているこ...
**減法混色 [#ebec113f]
色の三原色による。絵の具の混色と同じ。加法混色と異なり反...
RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE
を逆に考えると
CYAN = WHITE - RED
MAGENTA = WHITE - GREEN
YELLOW = WHITE - BLUE
となる。つまりCYANはREDの光を吸収しGREENとBLUEを反射、MAG...
GREENの光を吸収しBLUEとREDを反射、YELLOWはBLUEの光を吸収...
例えばCYANとMAGENTAを混色すると、REDとGREENを吸収すること...
プリンタのインクの色がCYAN, MAGENTA, YELLOW, BLACKである...
よく赤・青・黄を色の三原色などと呼んでけど、赤・青・黄の...
*色の3要素 [#d4b4e9aa]
-色相
-明度
-彩度
を色の3要素（3属性）と呼ぶ。
**色相 [#z43fd0a5]
色相とは色合いを示すものである。可視光のスペクトルをイメ...
色合いを~
RED->YELLOW->GREEN->CYAN->BLUE->MAGENTA->RED~
のような形で円状に描いたものを色相環と呼ぶ。
***色相名 [#f5970631]
日本色研配色体系（PCCS）では色相環を作る二四色相を次のよ...
|1:pR|2:R|3:yR|4:rO|5:O|6:yO|
|7:Y|8:gY|9:gY|10:YG|11:yG|12:G|
|13:bG|14:BG|15:BG|16:gB|17:B|18:B|
|19:pB|20:V|21:bP|22:P|23:rP|24:RP|
全部略称。そのうち色と名前つけます。
***系統 [#l736ad45]
色相のうち色相名の1~7を暖色（系）、13~19を寒色（系）と呼...
**明度 [#w476845f]
色の明るさ。WHITEが最も明るく、BLACKが最も暗い。CYAN, MAG...
加法混色では混ぜれば混ぜる程明るく、減法混色では混ぜれば...
**彩度 [#c25c6b57]
色の鮮やかさ。WHITEやBLACKは彩度は0である。RED, GREEN, BL...
彩度の高い背景色のWebサイトは大変目に悪いため、Webデザイ...
*応用 [#u919b607]
**トーン [#z8d519e8]
「トーンは、明度と彩度の複合概念といえるものです」とPCCS...
明度と彩度により分けられた色の場所によって、色から受ける...
|記號|英|和|彩度|明度|>|>|>|>|>|>|>|>|>|>|>|色|h
|W|white|白|BGCOLOR(#C0C0C0):0s|BGCOLOR(white):9.5|>|>|>|...
|ltGy|light gray|明灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#B0B0...
|mGy|medium gray|灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(gray):5...
|dkGy|dark gray|暗灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#40404...
|Bk|black|黒|BGCOLOR(#C0C0C0):0s|BGCOLOR(black):1.5|>|>|>...
|~----|~----|~----|~----|~----|>|>|>|>|>|>|>|>|>|>|>|~----|
|p|pale|薄い・淡い|BGCOLOR(#D4CD9C):2s|BGCOLOR(#E0E0E0):9...
|ltg|light grayish|明るい・灰み|BGCOLOR(#D4CD9C):2s|BGCOL...
|g|grayish|灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(#707070):5|BG...
|dkg|dark grayish|暗い・灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(...
|lt|light|浅い|BGCOLOR(#F3D943):5s|BGCOLOR(#E0E0E0):9|BGC...
|sf|soft|浅い・穏やか|BGCOLOR(#F3D943):5s|BGCOLOR(#909090...
|d|dull|鈍い|BGCOLOR(#F3D943):5s|BGCOLOR(#707070):5|BGCOL...
|dk|dark|暗い|BGCOLOR(#F3D943):5s|BGCOLOR(#101010):2|BGCO...
|b|bright|明るい|BGCOLOR(#FFDF0D):8s|BGCOLOR(#C0C0C0):8|B...
|s|strong|明瞭な|BGCOLOR(#FFDF0D):8s|BGCOLOR(gray):5.5|BG...
|dp|deep|濃い|BGCOLOR(#FFDF0D):8s|BGCOLOR(#303030):3|BGCO...
|v|vivid|冴えた|BGCOLOR(#FFE100):9s|BGCOLOR(gray):5.5|BGC...
// |~| は無彩色と彩色の境目
明度は適当です。無彩色はタダの色ですね。幾つかは知ってい...
このトーンはさっきの色相名の数字と合わせて色を指定できま...
**補色 [#ba98100c]
**色彩調和 [#wa904517]
*** 同系 [#teee699f]
*** 類似 [#i128b6c5]
*** 対照 [#ycb6087f]
**色の錯視 [#u5355a01]
*頻出する色の扱い [#kd7a6a91]
コンピュータ上で色を扱う場合、加法混色か色の3要素を扱うも...
**RGB [#d30c2eb9]
RED, GREEN, BLUEの光の強さを数値にして色を表す。HTML(CSS)...
各色0〜255の値を指定出来るとすると
|R|G|B|color|h
|FF|00|00|&color(red){RED};|
|00|FF|00|&color(lime){GREEN};|
|00|00|FF|&color(blue){BLUE};|
|FF|FF|00|&color(yellow){YELLOW};|
|FF|00|FF|&color(magenta){MAGENTA};|
|00|FF|FF|&color(cyan){CYAN};|
|00|00|00|&color(black){BLACK};|
|80|80|80|&color(gray){GRAY};|
|FF|FF|FF|&color(white){WHITE};|
のように表現できる。
※HTMLでは&color(#00FF00){#00FF00};は&color(green){green};...
**HSV・HSB [#ocb8d674]
色相（Hue）、彩度（Saturation）、明るさ（Brightnessまたは...
色相は赤→黄→緑→青→紫→赤という円環（色相環）で表現可能であ...
その場合、補色同士は色相環の反対側に位置するため、Hueの値...
Saturationは0%から100%までの値で表現する（100%をどの値に...
Brightnessも同じく、0%から100%までの値で表現する（100%を...
[[HSV色空間 - Wikipedia:http://ja.wikipedia.org/wiki/HSV%...
**HSL [#h4714eec]
色相（Hue）、彩度（Saturation）、輝度（Lightness）によっ...
HSBとHSVは同じものを指すが、非常に似た体系であるHSLは前述...
HSLとHSBの最大の違いは明度の扱い。~
HSLの輝度（Lightness）の値を大きくすると、必ず白に近づい...
しかしHSBの明度（Brightness）の値を大きくしても、彩度（Sa...
**YCbCr [#w4045323]
輝度信号（Y）と、2つの色差信号（Cb,Cr）を使って表現される...
映像信号の伝達に用いられたり、JPEGの内部で使用されたり。...
RGBからYCbCrの変換式は以下のとおり。~
輝度: Y = 0.299*R + 0.587*G + 0.114*B~
色差: Cb= 0.564*(B-Y) = -0.169*R - 0.331*G + 0.500*B~
Cr= 0.713*(R-Y) = 0.500*R - 0.419*G - 0.081*B~
変換式がR、G、Bに関する一次式であることに注意。この点でYC...
Yの計算式においてRGBの定数がすべて異なっているのは、人間...
Cb、Crはだいたい色の青み（負の値の場合は黄み）、赤み（負...
人間の目の感度は輝度に敏感な反面、色差にはあまり敏感では...
[[コンポーネント映像信号 - Wikipedia:http://ja.wikipedia....
**CMYK [#l99f5c47]
印刷用の色空間。~
シアン（Cyan）、マゼンタ（Magenta）、黄（Yellow）、黒（Ku...
シアン、マゼンタ、黄はそれぞれRGBの原色である赤、緑、青の...
理屈のうえではシアン、マゼンタ、黄を混ぜて黒を作り出せる...
[[CMYK - Wikipedia:http://ja.wikipedia.org/wiki/CMYK]]
*頻出ではなさそうな色の扱い [#h9ecc6f3]
ちょっとマイナーな表色系たち。
**XYZ [#db30a84d]
表色系の中でとても重要な地位にいて、カラーキャリブレーシ...
*参考ページ [#ba5ac9f5]
日本色彩研究所・日本色研配色体系（PCCS）：http://www.siki...
終了行:
*混色 [#w8c39ca7]
**色の見え方 [#z9b95160]
厳密な話を除けば人間の目は赤と青と緑の3色をベースに様々な...
色が見えるというのはその色の光（または色を構成する光の集...
RGBなんて言葉を聞いたことあると思うけどこれはRED, GREEN, ...
**加法混色 [#ec9ad69a]
光の三原色による。光を足し合わせることで色を表現する方法...
RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE
とりあえずこれを理解しておけばOK。CYANは所謂水色、MAGENTA...
液晶モニタを良く見れば赤と青と緑の光から成り立っているこ...
**減法混色 [#ebec113f]
色の三原色による。絵の具の混色と同じ。加法混色と異なり反...
RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE
を逆に考えると
CYAN = WHITE - RED
MAGENTA = WHITE - GREEN
YELLOW = WHITE - BLUE
となる。つまりCYANはREDの光を吸収しGREENとBLUEを反射、MAG...
GREENの光を吸収しBLUEとREDを反射、YELLOWはBLUEの光を吸収...
例えばCYANとMAGENTAを混色すると、REDとGREENを吸収すること...
プリンタのインクの色がCYAN, MAGENTA, YELLOW, BLACKである...
よく赤・青・黄を色の三原色などと呼んでけど、赤・青・黄の...
*色の3要素 [#d4b4e9aa]
-色相
-明度
-彩度
を色の3要素（3属性）と呼ぶ。
**色相 [#z43fd0a5]
色相とは色合いを示すものである。可視光のスペクトルをイメ...
色合いを~
RED->YELLOW->GREEN->CYAN->BLUE->MAGENTA->RED~
のような形で円状に描いたものを色相環と呼ぶ。
***色相名 [#f5970631]
日本色研配色体系（PCCS）では色相環を作る二四色相を次のよ...
|1:pR|2:R|3:yR|4:rO|5:O|6:yO|
|7:Y|8:gY|9:gY|10:YG|11:yG|12:G|
|13:bG|14:BG|15:BG|16:gB|17:B|18:B|
|19:pB|20:V|21:bP|22:P|23:rP|24:RP|
全部略称。そのうち色と名前つけます。
***系統 [#l736ad45]
色相のうち色相名の1~7を暖色（系）、13~19を寒色（系）と呼...
**明度 [#w476845f]
色の明るさ。WHITEが最も明るく、BLACKが最も暗い。CYAN, MAG...
加法混色では混ぜれば混ぜる程明るく、減法混色では混ぜれば...
**彩度 [#c25c6b57]
色の鮮やかさ。WHITEやBLACKは彩度は0である。RED, GREEN, BL...
彩度の高い背景色のWebサイトは大変目に悪いため、Webデザイ...
*応用 [#u919b607]
**トーン [#z8d519e8]
「トーンは、明度と彩度の複合概念といえるものです」とPCCS...
明度と彩度により分けられた色の場所によって、色から受ける...
|記號|英|和|彩度|明度|>|>|>|>|>|>|>|>|>|>|>|色|h
|W|white|白|BGCOLOR(#C0C0C0):0s|BGCOLOR(white):9.5|>|>|>|...
|ltGy|light gray|明灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#B0B0...
|mGy|medium gray|灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(gray):5...
|dkGy|dark gray|暗灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#40404...
|Bk|black|黒|BGCOLOR(#C0C0C0):0s|BGCOLOR(black):1.5|>|>|>...
|~----|~----|~----|~----|~----|>|>|>|>|>|>|>|>|>|>|>|~----|
|p|pale|薄い・淡い|BGCOLOR(#D4CD9C):2s|BGCOLOR(#E0E0E0):9...
|ltg|light grayish|明るい・灰み|BGCOLOR(#D4CD9C):2s|BGCOL...
|g|grayish|灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(#707070):5|BG...
|dkg|dark grayish|暗い・灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(...
|lt|light|浅い|BGCOLOR(#F3D943):5s|BGCOLOR(#E0E0E0):9|BGC...
|sf|soft|浅い・穏やか|BGCOLOR(#F3D943):5s|BGCOLOR(#909090...
|d|dull|鈍い|BGCOLOR(#F3D943):5s|BGCOLOR(#707070):5|BGCOL...
|dk|dark|暗い|BGCOLOR(#F3D943):5s|BGCOLOR(#101010):2|BGCO...
|b|bright|明るい|BGCOLOR(#FFDF0D):8s|BGCOLOR(#C0C0C0):8|B...
|s|strong|明瞭な|BGCOLOR(#FFDF0D):8s|BGCOLOR(gray):5.5|BG...
|dp|deep|濃い|BGCOLOR(#FFDF0D):8s|BGCOLOR(#303030):3|BGCO...
|v|vivid|冴えた|BGCOLOR(#FFE100):9s|BGCOLOR(gray):5.5|BGC...
// |~| は無彩色と彩色の境目
明度は適当です。無彩色はタダの色ですね。幾つかは知ってい...
このトーンはさっきの色相名の数字と合わせて色を指定できま...
**補色 [#ba98100c]
**色彩調和 [#wa904517]
*** 同系 [#teee699f]
*** 類似 [#i128b6c5]
*** 対照 [#ycb6087f]
**色の錯視 [#u5355a01]
*頻出する色の扱い [#kd7a6a91]
コンピュータ上で色を扱う場合、加法混色か色の3要素を扱うも...
**RGB [#d30c2eb9]
RED, GREEN, BLUEの光の強さを数値にして色を表す。HTML(CSS)...
各色0〜255の値を指定出来るとすると
|R|G|B|color|h
|FF|00|00|&color(red){RED};|
|00|FF|00|&color(lime){GREEN};|
|00|00|FF|&color(blue){BLUE};|
|FF|FF|00|&color(yellow){YELLOW};|
|FF|00|FF|&color(magenta){MAGENTA};|
|00|FF|FF|&color(cyan){CYAN};|
|00|00|00|&color(black){BLACK};|
|80|80|80|&color(gray){GRAY};|
|FF|FF|FF|&color(white){WHITE};|
のように表現できる。
※HTMLでは&color(#00FF00){#00FF00};は&color(green){green};...
**HSV・HSB [#ocb8d674]
色相（Hue）、彩度（Saturation）、明るさ（Brightnessまたは...
色相は赤→黄→緑→青→紫→赤という円環（色相環）で表現可能であ...
その場合、補色同士は色相環の反対側に位置するため、Hueの値...
Saturationは0%から100%までの値で表現する（100%をどの値に...
Brightnessも同じく、0%から100%までの値で表現する（100%を...
[[HSV色空間 - Wikipedia:http://ja.wikipedia.org/wiki/HSV%...
**HSL [#h4714eec]
色相（Hue）、彩度（Saturation）、輝度（Lightness）によっ...
HSBとHSVは同じものを指すが、非常に似た体系であるHSLは前述...
HSLとHSBの最大の違いは明度の扱い。~
HSLの輝度（Lightness）の値を大きくすると、必ず白に近づい...
しかしHSBの明度（Brightness）の値を大きくしても、彩度（Sa...
**YCbCr [#w4045323]
輝度信号（Y）と、2つの色差信号（Cb,Cr）を使って表現される...
映像信号の伝達に用いられたり、JPEGの内部で使用されたり。...
RGBからYCbCrの変換式は以下のとおり。~
輝度: Y = 0.299*R + 0.587*G + 0.114*B~
色差: Cb= 0.564*(B-Y) = -0.169*R - 0.331*G + 0.500*B~
Cr= 0.713*(R-Y) = 0.500*R - 0.419*G - 0.081*B~
変換式がR、G、Bに関する一次式であることに注意。この点でYC...
Yの計算式においてRGBの定数がすべて異なっているのは、人間...
Cb、Crはだいたい色の青み（負の値の場合は黄み）、赤み（負...
人間の目の感度は輝度に敏感な反面、色差にはあまり敏感では...
[[コンポーネント映像信号 - Wikipedia:http://ja.wikipedia....
**CMYK [#l99f5c47]
印刷用の色空間。~
シアン（Cyan）、マゼンタ（Magenta）、黄（Yellow）、黒（Ku...
シアン、マゼンタ、黄はそれぞれRGBの原色である赤、緑、青の...
理屈のうえではシアン、マゼンタ、黄を混ぜて黒を作り出せる...
[[CMYK - Wikipedia:http://ja.wikipedia.org/wiki/CMYK]]
*頻出ではなさそうな色の扱い [#h9ecc6f3]
ちょっとマイナーな表色系たち。
**XYZ [#db30a84d]
表色系の中でとても重要な地位にいて、カラーキャリブレーシ...
*参考ページ [#ba5ac9f5]
日本色彩研究所・日本色研配色体系（PCCS）：http://www.siki...
ページ名:
