PCCSのSCSSでの使用**
use of PCCS with SCSS**

VCwareにおけるデザインの配色（カラーコーディネート）にはPCCSを用いる。CSSによる色彩定義は、SCSSファイル冒頭で"_pccs.scss"ファイルをインポートし、全変数を色彩名として用いる。

PCCSは、「色相(Hue)」「彩度(Saturation)」「明度(Lightness)」の3要素を、3次元で表現した色彩体系である点では、他の色彩体系と同様である。

PCCSにおいて、「色相」は24色に分けられる。

まず、色相環上に、心理四原色（ヘリングの4基本色相）＝赤・緑・黄・青を設定し、それらの心理補色を対抗位置に置く。

各色相間隔が等歩度となるように4色相を加え、計12色相とする。

さらにそれらの中間色相を加え、計24色相となる。

これらの色相のうち、赤・黄・緑・青・紫の5色は、形容詞として用いられる。たとえばpR(purplish Red)といえば「紫みの赤」であり、yR(yellowish Red)といえば「黄みの赤」である。この5色以外は形容詞として用いられない（例えば「橙みの赤」や「青紫みの青」は存在しない）。

後述する「ヒュートーンシステム」で用いるため、各色相に番号を割り振る。

1番から順に、［紫みの赤：pR：1］→［赤：R：2］→［黄みの赤：yR：3］→［赤みの橙：rO：4］→［橙：O：5］→［黄みの橙：yO：6］→［赤みの黄：rY：7］→［黄：Y：8］→［緑みの黄：gY：9］→［黄緑：YG：10］→［黄みの緑：yG：11］→［緑：G：12］→［青みの緑：bG：13］→［青緑：BG：14］→［青緑：BG：15］→［緑みの青：gB：16］→［青：B：17］→［青：B：18］→［紫みの青：pB：19］→［青紫：V：20］→［青みの紫：bP：21］→［紫：P：22］→［赤みの紫：rP：23］→［赤紫：RP：24］。

（「等歩度」を保つため、「青緑」と「青」が2種ずつあることに注意。ただし、基本的に、後述するヒュートーンシステムにおいては、ヴィヴィッドの24色をのぞき、偶数番号の色票のみ用いられる）

24色相環は、「純色」からなり、もっとも明度の高い「黄：8」を頂点とし、もっとも明度の低い「青紫：20」を底部として描く。左右の色相の明度は同じである。例えば、「赤：2」と「青緑：14」の明度は同じである。赤と青緑のように対称位置にある色のことを「補色」という（「心理補色」に対して「物理補色」という。物理補色同士を混色すると無彩色になる。心理補色は、ある色をしばらく見つめたあとで白い紙に目を転じた際に残像として現れる色）。補色は色相環上で12離れている。

PCCSの、他の色彩体系との大きな差異は、「色彩調和」（カラーハーモニー）に活用できる「ヒュートーンシステム」を採用している点だ。

「トーン」は「明度」と「彩度」を指し示すキーワードで、12種類（プラス2種類：後述）ある。

PCCSヒュートーンシステムにおけるトーン記号

v:ヴィヴィッド「さえた」：色相環上の各色票に、無彩色（白と黒を含めたグレースケール）をいっさい加えていない、純粋な有彩色。「純色」ともいう。この純色に、無彩色を加える事で、「トーン」が形成されていく。

b:ブライト「あかるい」：ヴィヴィッドに白色を若干混色した、高彩度・高明度のトーン。ブライトからライト、ペールにかけては、白色のみ（グレーではない）を混色することで、明度を高め、彩度を落としてゆく。この系列を「明清色(tint color)」という。

lt+:ライト+「あさい」：ブライトにさらに白色を混色して作られる高明度・中彩度のトーン。じゅうらい、次の項目「lt（ライト）」が用いられていたが、現在では若干彩度を高めにした、この「プラス」が用いられるのが通常である。

lt:ライト「あさい」：元来の高明度・中彩度のトーンであったが、明度が高まることで、他の中彩度トーンと「明度のグラデーション」による配色を行ったときに、色相がわかりにくい場合がある。そのため、現在では前項目の「lt+（ライトプラス）」が用いられることになった（あるいは、逆かもしれない。「明度のグラデーション」にはじゅうらいのライトトーンを用いるのが望ましいが、他のハーモニーをつくるときに「プラス」系統を使うのかもしれない。「プラス」が作成された経緯に関しては確認できていない）。

p+:ペール+「うすい」：ライトにさらに白色を混色して作られる高明度・低彩度のトーン。これに関しても「ライト」と「ライトプラス」の関係が成り立ち、現在では「ペール」よりも若干彩度を高めにした、この「プラス」が用いられるのが通常である。

p:ペール：「うすい」：元来の高明度・低彩度のトーン。「ライト（プラス）」と同様、色相がわかりやすい「プラス」を用いるのが現在では通例である。

dp:ディープ「こい」：ヴィヴィッドに黒色を若干混色した、高彩度・低明度のトーン。ディープからダーク、ダークグレイッシュにかけては、黒色のみ（グレーではない）を混色することで、明度を低め、彩度を落としていく。この系列を「暗清色(shade color)」という。

dk:ダーク「くらい」：ディープにさらに黒色を混色して作られる低明度・中彩度のトーン。

dkg:ダークグレイッシュ「くらいはいみの」：ダークにさらに黒色を混色して作られる低明度・低彩度のトーン。

s:ストロング「つよい」：ヴィヴィッドにグレーを若干混色した、高彩度・中明度のトーン。これにグレーを加えていくことでできるトーンのことを「中間色」または「濁色(dull color)」という。加えていくグレーには2種類あり、相対的に明度の高いグレーと低いグレーがある。これによって中間色にあたるトーンには2系列できることになる。

sf:ソフト「やわらかい」：ストロングに明るいグレーを混色した、中明度・中彩度のトーン。同一彩度の中間色「ダル」に比べて、明度が高い。

ltg:ライトグレイッシュ「あかるいはいみの」：ソフトにさらに明るいグレーを混色して作られる中明度・低彩度のトーン。同一彩度の中間色「グレイッシュ」に比べて、明度が高い。

d:ダル「にぶい」：ストロングに暗いグレーを混色した、中明度・中彩度のトーン。同一彩度の中間色「ソフト」に比べて、明度が低い。

g:グレイッシュ「はいみの」：ダルにさらに暗いグレーを混色した、低明度・低彩度のトーン。同一彩度の中間色「ライトグレイッシュ」と比べて、明度が低い。

有彩色で用いられる「トーン」は、以上の12（プラス2）種類ある。これに対し、無彩色（グレースケール）は、簡便な区分で5種類、黒を1.5、白を9.5としたときに等歩度になるように区分した9段階スケールがある。あるいはこの9段階スケールに純粋な白と黒を加えて、11段階のスケールとすることもある（VCwareではこのスケールを用いる）

変数で定義された全色

したがって：

@import "pccs";
					

>sass --watch .:.
					

body {
	article {
		h1 {
		font:{
			size: 1.5em;
			weight: 900;
			}
		color: $s18;
		}
	}
}
					

body article h1 {
	font-size: 1.5em;
	font-weight: 900;
	color: #005b9b; }