この色をあと10%暗く(明るく)したい

j140301-1.gif

ウェブデザインを作っているときに、「この色をもう少し暗く(明るく)したいんだよなー」と思うことってよくありますよね。今日は、そんなときに使えるカラージェネレイターをご紹介します。

サイト自体は英語ですが、直感的に操作でき、とても簡単なので、ぜひトライしてみてくださいね。

SPONSORED LINK


それじゃ、いきますよ。Hex Color Toolというサイトを使います。

j140301-2.gif
Hex Color Tool

最初の画面。ものすごくシンプルですね。

今回は「#B163A3」の10%暗い色を作ります。

ちなみに、「#B163A3」はPANTONE社が決めた2014年のトレンドカラー「ラディアント・オーキッド」という色です。



j140301-3.gif

黒い六角形のロゴの下にある、6 DIGIT HEX の欄に、6文字のカラーコードを入力します。

頭に#を付けず、6文字だけを入力します。


j140301-4.gif

カラーコードの頭に#を付けてしまったり、文字数が多すぎたり少なすぎたりして、カラーコードを間違って入力した場合は、入力欄の下にエラーメッセージが出ます。

英語がニガテな人もひるまないでね! notが付いてるとダメだと言ってるということだよ。^^


j140301-5.gif

ここでは、10%暗い色を作ります。だから、Darkenにチェックを入れます。


j140301-6.gif

PERCENTAGE(パーセンテージ)の部分で、何%かを指定します。バーを左右にスライドすると数値が変わります。

今回は10%でいきますので、そのままSubmitボタンをクリックします。


j140301-7.gif

オリジナル(最初に入力したカラーコード)から10%刻みで暗くなる色相ができました! とっても簡単ですね! 

カラーコードとSubmitボタンをクリックしただけというあまりに簡単な作業なので、ついでに10%ずつ明るくなるコードも作ってみましょう。^^


j140301-8.gif

Resetボタンは触らずに、Lightenのラジオボタンにチェックを入れ、Submitをクリックします。


j140301-9.jpg

さっき作った10%ずつ暗くなる色相の下に、10%ずつ明るくなる色相ができました!


色作りはときに悩ましい作業でもありますが、この記事があなたの作業を少しでも楽しくラクにすることができたら嬉しいです。^^


人気ブログランキングへ

[参照サイト]

この記事へのコメント

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/390106228

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK