ゆるっと広告業界

デザイナーのじたばた。

日本の伝統色、とCSS。

こんばんは、さじです。

 

印刷関連で和のパターンを作る時は

文様を意識した色遣いをしますが

印刷する紙によって印象がぐっと変わります。

 

和紙はオフセット印刷に向いてないので

それっぽいものを選びたいところですが。。

たいてい、マットコートに落ち着きます。安いですからね。

 

歌舞伎のような原色、または水墨画のようなグレートーン、

そして、藍色や若草色など日本古来の色なども

見ているだけでも楽しい色の世界です。

 

自分の中では、デザインだけでなく色の使い方も

デザイナーの仕事と思ってますので

近年の企業ブランディングは正直振り幅が狭く

悲しいものです。

予備色をたくさん使えるところもありますが

ほとんどは基調色が決まったガイドライン

企業イメージを壊さないように作らなければいけません。

おっと、愚痴になります(笑)。

 

外国人も含め、日本文化をこよなく愛する人

色を紹介するサイトがあります。

なんとこのサイト、DTPCMYKだけでなく

webカラーも拾えます。

印刷関係者にはとても便利ですね。

 

これを使って、CSSで遊びます。

ついこの前書いた自力で出来なかったCSS

LSSさん(id:little_strange)が

物凄いスピードで再現してくれました。↓注:CSSです

小田原城の寄木細工

 

コードをまた考えてくださいましたので

伝統色の紹介がてら練習してみました。

色の名前、いくつ知ってます?

 

aiiro × kamenozoki

藍色×甕覗

 <div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#105779 50%,#C5E4Ed 50%) , linear-gradient(90deg,#C5E4Ed 50%,#105779 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">藍色×甕覗</div>

 

tanpopoiro × kokeiro

蒲公英色×苔色

 <div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#FFE200 50%,#78882d 50%) , linear-gradient(90deg,#78882d 50%,#FFE200 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">蒲公英色×苔色</div>

 

geppaku × komachinezu

月白×小町鼠
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#F6F7F8 50%,#E5E2E4 50%) , linear-gradient(90deg,#E5E2E4 50%,#F6F7F8 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">月白×小町鼠</div>
 
柄を細かくしてみますね。
 

asagiiro × shiraai

浅葱色×白藍
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#00A5BF 50%,#D4ECEE 50%) , linear-gradient(90deg,#D4ECEE 50%,#00A5BF 50%); background-size: 20px 10px , 20px 10px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">浅葱色×白藍</div>
 
あれっ。なんか離れました!
これはこれで可愛いですね。まいっか。
(原因がわかったら追記しておきます。)
6/10追記:background-positionが間違っていたようです。差をsize指定した10にする必要があるのですね!LSSさんありがとうございます!くっくけたコードは以下です。
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#00A5BF 50%,#D4ECEE 50%) , linear-gradient(90deg,#D4ECEE 50%,#00A5BF 50%); background-size: 20px 10px , 20px 10px; background-position: 0% 35px , 0% 45px; background-repeat: repeat-x;">浅葱色×白藍</div>
浅葱色×白藍
 
おう。遊んでいるうちに9時を過ぎてしまいました。
今日はここまでにします。
 
コードの詳しい説明はLSSさんちです↓
アレンジしやすく書いてくれてます。お世話になります!

 
ということで(?)さらなるアレンジは後日に。
伝統色をネタにしたCSSのトライ記事でした。
 
さじ