配色デザイン本が全国の書店で発売中!

【まとまりやすい配色】トーン・オントーンとは

1年生

2022.11.262024.05.27

今回は前回のドミナント・カラーに続き、同じくまとまりやすい配色であるトーン・オントーンについて解説していきます!

目次

トーン・オントーンとは
トーンとは
トーン・オントーンの作り方
1. トーン・オントーンの配色例①
2. トーン・オントーンの配色例②
まとめ

トーン・オントーンとは

トーン・オントーンとは色相（カラー）はほぼ変えずに、トーンだけ変えた色の組み合わせのことをいいます。

先日解説したドミナントカラーの配色の一部です。

ドミナント・カラーは彩度差と明度差の変化のある配色ですが、トーン・オントーンは明度差だけ変化のある配色になります。

トーンとは

トーンとは、色を明度と彩度の割合が似ているものでグループ化したもののことです。

トーンについてはこちらの記事で詳しく解説しています!

トーン・オントーンの作り方

まず、基本の色を決めます。基本の色が決まったらそこから色相はほとんど変えないことを意識しながらトーンだけ変えていきます。

トーン・オントーンの配色例①

#007f85
#29a7a3
#4ea497

トーン・オントーンの配色例②

#7a2b7a
#985b97
#cd9fc4

まとめ

トーン・オントーンの配色はまとまりがありつつ、デザインに変化をつけることが出来ます!

是非参考にしてみて下さい!

こばやし

こばやし

デザイン本が全国の書店で発売中です!

頑張って作ったので、手に取って頂けたら嬉しいです!

デザイン本発売中!

デザイン本発売中!

Amazonはこちら

楽天はこちら

コメント

見出し（hタグ）


<h1>見出し（優先度①）</h1>
<h2>見出し（優先度②）</h2>
<h3>見出し（優先度③）</h3>
<h4>見出し（優先度④）</h4>
<h5>見出し（優先度⑤）</h5>
<h6>見出し（優先度⑥）</h6>

箇条書き（ul・ol・liタグ）

数字ありリスト


<ol>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ol>

数字なしリスト


<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

丸（数字）を消す。
CSSでul（またはol）に対して「list-style:none;」を指定


ul{
	list-style: none;/*ドットを消す*/
}

画像（imgタグ）


<img src="画像がある場所（相対パスまたは絶対パスで指定）" alt="画像の説明">

リンクタグ（aタグ）


<a href="リンク先">このテキストがリンクになる</a>


<!--別タブで開く-->
<a href="リンク先" target="_blank">このテキストがリンクになる</a>

タイトルとURLをコピーしました