Advertisement

html-color-codes-top

 

デザイン制作において頭を悩ますひとも多い、配色。困ったときに色を選ぶ手助けをしてくれるツールやチュートリアルをまとめたサイト、HTML Color Codesを今回はご紹介します。

 

 

カラーピッカーで直感的に色を選んだり、人気のあるフラットデザインやマテリアルデザインから色を選択したり、HTMLカラーコードから選んだりと、さまざまな配色の選び方を提案してくれます。選択した色のHEXやRGB、HSL値を一発でコピー&ペーストできるなど、うれしい機能が充実しています。

 

 

 

詳細は以下から。

 

 

 

HTML Color Codesのサービス特長

 

HTML Color Codesは、用意されたカラーピッカーや、カラーチャート、HTMLカラーネームから、自由にお好みの色のHEXカラーコードとRBG、HSL値をコピー&ペーストし、ウェブサイト制作に役立てることができるサービスです。

01. カラーピッカー

color-picker-1

 

 

PhotoshopやIllustratorなどのデザインアプリで見かける機会も多い、カラーピッカー。選択した色の類似色(英: Anagous)や、補色(英: Complementary Colors)など、カラーホイールから抽出された色をまとめて確認できる、オススメ機能のひとつ。

 

color-picker2

 

 

02. カラーチャート

ウェブサイトやモバイルアプリ向けデザインを制作するときに参考にしたい、トレンドを押さえたフラットスタイルとマテリアルデザインのカラーチャートの他に、実用的なWebセーフカラーをまとめたチャートも用意されています。

 

 

フラットスタイルのカラーチャート。お好みの色をクリックし、コピー&ペーストするだけのお手軽さ。

chart-flat

 

 

 

2015年に入り、よく見かけるようになったマテリアルデザインのカラーチャート。

chat-material-design

 

 

 

Webセーフカラー。

chart-web-safe-color

 

 

03. HTMLカラーネーム

そのままCSSに記述することができる、HTMLカラーネーム140種類をまとめた一覧ページ。もちろんRGB、HEX値の入力にも対応しています。

 

color-names

 

 

04. 色に関するデザインチュートリアル

HTMLをこれからはじめようという人を対象に、HTML/CSSによるコード記述方法から、Sassを利用した拡張性の高いColor Variablesの使い方まで、基本的なテクニックをまとめて紹介しています。

 

color-tutorial

 

 

05. 各種リソース

配色を選ぶときに活用したいツールやサービスなどを、目的別にまとめたリソースまとめ。これだけあれば、色選びに迷ったときにも安心です。

 

resource-1

 

 

色からイメージ写真を検索する方法や、オンラインツールをまとめて紹介しています。

resource-serach-image-by-color

 

 

配色と一緒に考えることが多いイメージ写真も、デザイン性の高いフリーストックサイトがまとめられています。

resource-stock-photo

 

 

 

もう配色デザインには迷わない!すごい無料カラーツール13個まとめ

当サイトでも、配色選びに役立つオンライン・カラーツールをまとめています。

color-tool2015-top

 

 

 

遊んで学ぼう!配色やデザイン力をアップする無料オンラインゲーム11個まとめ

ゲームをして楽しみながら、色の基礎を学んでみてはいかがでしょう。

design-game-top2

 

 

 

参照元リンク : HTMl Color Codes