<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>坂本邦夫の「基礎からわかるホームページの配色」&#187; 色相環</title>
	<atom:link href="http://www.webcolordesign.com/tag/%e8%89%b2%e7%9b%b8%e7%92%b0/feed" rel="self" type="application/rss+xml" />
	<link>http://www.webcolordesign.com</link>
	<description>自分でウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイトです。</description>
	<lastBuildDate>Thu, 26 Aug 2010 14:47:59 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/tag/%e8%89%b2%e7%9b%b8%e7%92%b0/feed" />
		<item>
		<title>HSBの色相</title>
		<link>http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html</link>
		<comments>http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html#comments</comments>
		<pubDate>Tue, 26 Jan 2010 04:21:41 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[HSB配色の基礎]]></category>
		<category><![CDATA[HSBカラーモデル]]></category>
		<category><![CDATA[色相]]></category>
		<category><![CDATA[色相環]]></category>

		<guid isPermaLink="false">http://cpfortuna.heteml.jp/webcolor/?p=120</guid>
		<description><![CDATA[HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルでもあります。そのHSBの特徴を知ることで配色に活かします。 HSBの色相環 HSBは色相を角度で表しますので、色相環を... <a href="http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルでもあります。そのHSBの特徴を知ることで配色に活かします。</p>
<p><a id="more-120"></a></p>
<h3>HSBの色相環</h3>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/wheel_hsb.gif" rel="lightbox[120]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/wheel_hsb-281x300.gif" alt="HSB色相環" title="HSB色相環" width="281" height="300" class="alignnone size-medium wp-image-122" /></a>HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。</p>
<p>しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。</p>
<h3>HSBの色相環と均等な色相環</h3>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/wheel_munsell1.gif" rel="lightbox[120]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/wheel_munsell1-281x300.gif" alt="見かけが均等な色相環" title="見かけが均等な色相環" width="281" height="300" class="alignnone size-medium wp-image-123" /></a>ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。</p>
<table border="1" cellpadding="3" cellspacing="0">
<caption>色相とHSBの色相値の対応表</caption>
<tr>
<td>　</td>
<th>HSB</th>
<th>Windows</th>
</tr>
<tr>
<th>赤</th>
<td>341-17</td>
<td>230-11</td>
</tr>
<tr>
<th>橙</th>
<td>18-37</td>
<td>12-25</td>
</tr>
<tr>
<th>黄</th>
<td>38-60</td>
<td>26-40</td>
</tr>
<tr>
<th>黄緑</th>
<td>61-113</td>
<td>41-76</td>
</tr>
<tr>
<th>緑</th>
<td>114-165</td>
<td>77-110</td>
</tr>
<tr>
<th>青緑</th>
<td>166-181</td>
<td>111-121</td>
</tr>
<tr>
<th>青</th>
<td>182-202</td>
<td>121-135</td>
</tr>
<tr>
<th>青紫</th>
<td>203-259</td>
<td>136-172</td>
</tr>
<tr>
<th>紫</th>
<td>260-310</td>
<td>173-208</td>
</tr>
<tr>
<th>赤紫</th>
<td>311-341</td>
<td>209-229</td>
</tr>
</table>
<p> <strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html" rel="bookmark" title="2010年1月26日">色相とは</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/sub_color/%e8%89%b2%e7%9b%b8%e3%81%a0%e3%81%91%e3%82%92%e5%a4%89%e3%81%88%e3%81%a6%e3%82%b5%e3%83%96%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b.html" rel="bookmark" title="2010年1月27日">色相だけを変えてサブカラーを作る</a></li>
<li><a href="http://www.webcolordesign.com/color_check/website_analysis/%e8%89%b2%e7%9b%b8%e3%82%92%e5%88%86%e6%9e%90%e3%81%99%e3%82%8b.html" rel="bookmark" title="2010年1月26日">色相を分析する</a></li>
<li><a href="http://www.webcolordesign.com/color_point/usability/%e9%9d%a2%e7%a9%8d%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e5%a4%89%e3%82%8f%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ab%e6%b3%a8%e6%84%8f%e3%81%99%e3%82%8b.html" rel="bookmark" title="2010年2月14日">線の太さと色のコントラストから強調を考える</a></li>
<li><a href="http://www.webcolordesign.com/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e8%a8%ad%e5%95%8f%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html" rel="bookmark" title="2010年5月18日">「文字の読みやすさ」に関するアンケートの設問について</a></li>
</ul>
<p><!-- Similar Posts took 4.358 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html" />
	</item>
		<item>
		<title>色相とは</title>
		<link>http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html</link>
		<comments>http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html#comments</comments>
		<pubDate>Tue, 26 Jan 2010 02:59:13 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[色の三属性を知る]]></category>
		<category><![CDATA[色の三属性]]></category>
		<category><![CDATA[色相]]></category>
		<category><![CDATA[色相環]]></category>
		<category><![CDATA[補色]]></category>
		<category><![CDATA[類似色相]]></category>

		<guid isPermaLink="false">http://cpfortuna.heteml.jp/webcolor/?p=99</guid>
		<description><![CDATA[赤、青、緑と言った色みの違いを表すものです。また類似色相と補色についても説明しています。イメージを決定するのに最も重要な属性です。 色相と色相環 色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違い... <a href="http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>赤、青、緑と言った色みの違いを表すものです。また類似色相と補色についても説明しています。イメージを決定するのに最も重要な属性です。</p>
<p><a id="more-99"></a></p>
<h3>色相と色相環</h3>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/colorwheel1.gif" rel="lightbox[99]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/colorwheel1-300x300.gif" alt="色相環と補色" title="色相環と補色" width="300" height="300" class="alignnone size-medium wp-image-102" /></a>色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違いを最も表現することが出来る属性です。</p>
<p>また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。</p>
<h3>類似色相</h3>
<p>よく似た色相のことを表します。厳密にどこまでを似ているというかは大きな問題ではありませんが、色相環の上の5を基準にすると、3～4と6～7くらいまでを、類似色相として覚えておけばよいでしょう。</p>
<h3>補色<br />
</h3>
<p>この色相環の正反対に位置する色のことを補色と呼びます。補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えます。しかし使いどころを間違えると、まぶしくかえって見えにくくなってしまいます。</p>
<p> <strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%81%ae%e8%89%b2%e7%9b%b8.html" rel="bookmark" title="2010年1月26日">HSBの色相</a></li>
<li><a href="http://www.webcolordesign.com/color_basic/attribute_color/%e6%98%8e%e5%ba%a6%e3%81%a8%e3%81%af.html" rel="bookmark" title="2010年1月26日">明度とは</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/sub_color/%e8%89%b2%e7%9b%b8%e3%81%a0%e3%81%91%e3%82%92%e5%a4%89%e3%81%88%e3%81%a6%e3%82%b5%e3%83%96%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b.html" rel="bookmark" title="2010年1月27日">色相だけを変えてサブカラーを作る</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/sub_color/%e5%bd%a9%e5%ba%a6%e3%81%a0%e3%81%91%e3%82%92%e5%8b%95%e3%81%8b%e3%81%99%e4%be%8b.html" rel="bookmark" title="2010年1月27日">色の三属性の２つを動かす</a></li>
<li><a href="http://www.webcolordesign.com/color_point/%e7%92%b0%e5%a2%83%e3%81%ab%e3%82%88%e3%82%8b%e8%a6%8b%e3%81%88%e6%96%b9%e3%81%ae%e9%81%95%e3%81%84.html" rel="bookmark" title="2010年1月27日">環境による見え方の違い</a></li>
</ul>
<p><!-- Similar Posts took 4.155 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/color_basic/attribute_color/%e8%89%b2%e7%9b%b8%e3%81%a8%e3%81%af.html" />
	</item>
	</channel>
</rss>

