配色の事あれこれ

見出し右端の記号は?

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);
}
この例ではbody要素中の背景色が“#eef”に、文字色が“navy”になります。

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

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

※重要: 他の方法で上記CSS中の属性を変更すると、上記CSSより新しいDOM要素として生成されます。
つまり、次項の配色を目視で調整を行った後は、上記のスタイル切り替えを行っても反映されません。

ページ内の有る部分だけの色を動的に変更

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

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

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

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

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

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

フクシャ
ライム

なっからサイトの配色を目視で調整

HSV値を触ると、どの様にこのページの色が変化するのを試してみました。色相・彩度・明度の関係が目で確かめられます。

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

H 226
S 59
V 67

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

R 70
G 93
B 170

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

指定色
補色
反対色

なっからサイトは、指定色に応じて16段階で彩度を下げ・明度を上げる変化を行い、そこからRGB値をピックアップする方法にしました。結果として下の様な代物になりました。

  • 指定色


  • 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


ちゅんラヂ」の配色CSSを生成

時々配色を変えてみようかと思い、上記の基調色から生成しています。
なお、link色は手動で見やすい色に調整。