配色の事あれこれ

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

HTMLの各要素ごとに色を指定していると、色合いの調整段階で苦労します。
それを緩和してくれて便利なのが“:root”で色を記述しておく方法です。
なおCSS Level3(CSS3)とECMAScript 2015(ES6) 以降の構文を使っていますのでIEでは動作いたしません。IE対応はもういいですよね。:-P

cssのrootで配色を設定

具体的なCSS記述は下記のとおりです。この利点は配色調整はroot部分の値を変更するだけで可能になります。

:root {
	--basic-text-color: navy;
	--basic-background-color: #eef;
	--active-background-color: #ccf;
	--outlined1-background-color: #8F77E7;
	--outlined2-background-color: #4731B3;
	--outlined3-background-color: #8F77E7;
}
body {
	color: var(--basic-text-color);
	background-color: var(--basic-background-color);
}
.docs_footer {
	box-sizing: border-box;
	color: white;
	z-index: 1000;
	height: 23px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	opacity: 0.8;
	text-align: right;
	padding-bottom: 3px;
	background-image: linear-gradient(to top, var(--outlined1-background-color) 0%, var(--outlined2-background-color) 40%, var(--outlined3-background-color) 100%);
}
この例ではbody要素中の背景色が“#eef”に、文字色が“navy”になります。
.docs_footerの部分は、このページの脚書きで、白抜き背景グラデーションで、グラデーション色をCSS Variablesで指定しています。

この方法なら配色を:rootで一括指定しているので、ページの全体のテーマ色を変えるのも楽です。

cssのrootに色の値を動的に変更

CSSの:rootの“--basic-text-color”の値を変更することで、“var(--basic-text-color)”で文字色を指定している箇所の文字色を動的に一括変更できます。

document.documentElement.style.setProperty('--basic-text-color', 色指定);
下記の色指定をクリックして動作が確認できます。

フクシャ
ライム
ページ内の有る部分だけの色を動的に変更

タグ要素のstyleの“var(--basic-text-color)”を置換することで、その要素の文字色が変わります。
例えば、背景色を変更したい場合は、変更したいCSS Variablesに書き換えれば良いのです。

エレメント.style.backgroundColor = 'var(--xxxxx-xxxxxx-color)';
下記のクリックすると、背景色切り替え動作が確認できます。

ここをクリックで背景色が切り替わる

CSS自体を入れ替えて配色を一括変更

CSSファイルを指定しているlinkタグにID名を付与しておきます。

<link rel="stylesheet" href="style1.css" type="text/css" id="chg_css">

JavaScriptでcssファイルを指定しているlickタグのhref属性(プロパティ名はurl)を別のcssファイルに置換することで入れ替えられます。
下記の色指定をクリックすると切り替わります。この同長の詳細はこのページのhtmlソースを読んでください。

<input type="button" value="スタイル切り替え" onclick="changeStyle('style2.css');" />

green
bule
olive
silver
なっからサイトの配色の決め方

行き当たりばったりで色を指定していました。そこでサイト全体の配色デザインを一括で管理させたと考えました。
問題は、ここの落書き人に配色デザインの知識が無いことです。配色本から色を選んでRGB値をコーディングし始めましたが、色合いの調整が地道に大変だを気づきました。

そこで基調色のHSV値を決めて、機械的に色相を変えずに彩度と明度にみ変化させて、その中からRGB値を選択するという方法を試みました。
基調色はここのサイトを参考にHSVで色を目で確認しながら決める方法にしました。
https://www.petitmonte.com/javascript/rgb_hsv_convert.html

基調色はこちらのサイトを参考にして決めることにしました。
http://www.hp-stylelink.com/news/2013/07/20130708.php#lowList27

基調色に応じて16段階で彩度を下げ・明度を上げる変化を行い、そこからRGB値をピックアップする方法にしました。
色相に変化をもたせる方法もと思ったのですが、配色デザインセンスがないので色がごちゃごちゃになることから、それは今後の課題です。
結果として下の様な代物になりました。HSVとRGBの関係がスライダーの動きで理解できたのが収穫です。できればCMYKでも思ったのですが、それは光三原色とは別次元なので止めました。

色相(Hue),彩度(Saturation),明度(Value)

H 226
S 59
V 67

赤色(Red),緑色(Green),青色(Blue)

R 70
G 93
B 170

スライダーを動かすことで色が選べます。細かい数値は矢印キーで選んでください。

  • 基調色


  • No.1


  • No.2


  • No.3


  • No.4


  • No.5


  • No.6


  • No.7


  • No.8


  • No.9


  • No.10


  • No.11


  • No.12


  • No.13


  • No.14


  • No.15


  • No.16


  • No.17


※RGB値文字色が変わるのは判読できなくなるのを防ぐ為です。

「ちゅんラヂ」の配色CSSです。

なっからサイトの配色CSSです。時々配色を変えてみようかと思い、上記の基調色から自動計算しています。 なお、link色は手動で見やすい色に調整