【動画】 明日から使えるデザイン基礎理論【ロゴ・名刺制作編】 - Schoo（スクー）オンラインの無料動画で学ぼう！丸山 貴明先生・中村 将大先生
美術専門学校講師による「配色・色彩・彩度明度」の基本 - 2014/11/14 [Schoo]
本記事ではデザイン・アートの基本中の基本、「配色・色彩・彩度明度」という色にまつわる基礎知識をスクーの授業を元にご紹介。中学校の美術の時間に少し取り組んだくらいで、美術系の大学や専門学校に通っていないと触れる機会がない色についての知識。情報を正しく伝達するデザインをするために、誰もが知っておきたい理論ありきの配色選びを東洋美術学校の授業、『明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】』から学んでいきます！ ■目次 1.配色ってなに？ 2.色相、色相環ってなに？ 3.明度ってなに？ 4.彩度ってなに？ 1. 配色ってなに？ ”種々の色を取り合わせること。色のとり合わせ。”(wikipedia「配色」より引用） 色相・明度・彩度という色の三属性、モノサシを調整し、然るべきところに置くこと。 デザインや、イラストレーションに取り組むときに専門知識があると拠り所になりそうで
![美術専門学校講師による「配色・色彩・彩度明度」の基本 - 2014/11/14 [Schoo]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f872d92f2d2ec05a85011ccc9d4ac49a293e06e7/height=288;version=1;width=512/http%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fi.schoo%2Fimages%2Farticle%2Fdesign%2Fwdkj11_1.jpg)
RGBとカラーコードの変換ツール : 数値が何色か調べることもできます
ツールの使い方 WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツールです。 カラーコードをRGB値に変換したい場合は上の欄にカラーコードを入力してください。 RGB値をカラーコードに変換したい場合は下の欄にRGB値を入力してください。 このツールはカラーコード・RGB値どちらか一方のパラメータを編集すると、その内容にあわせて反対側のパラメータが自動的に書き換えられる仕組みとなっておりますので、即座に変換結果を求めることができます。 上側の入力欄がカラーコード。6桁もしくは3桁の16進数を入力します。 下側の入力欄はRGB値の入力欄です。0から255まで10進数の数字が入ります。 Rが赤色、Gが緑色、Bが青色を表しています。 RGB値は、入力欄の横にあるスクロールバーで調整することもできます。 そして、一番下にあるボックスに現
RGBカラー209万7152色を1枚の画像に入れるとこうなる
RGBによって画像が表現される液晶ディスプレイなどのディスプレイは小さな光の点で構成されていて、その1つ1つが赤・緑・青の3色の組み合わせで表現されています。1つの点にある赤・緑・青の明るさを調節することでより多くの種類の色を表現できるのですが、「生粋のギークである」というJozsef Fejesさんは、RGBで表現できる209万7152色を1枚の画像に入れるというチャレンジに挑戦し、作成した画像およびムービーを公開しています。 All RGB colors in one image | Joco blog http://joco.name/2014/03/02/all-rgb-colors-in-one-image/ まず、Fejesさんが取り組んだのは、1原色当たり32階調の明るさを割り当て、合計3万2768色になる15ビットカラーで解像度が256×128pxの画像の作成です。画像は全
色空間を表す「RGB(赤・緑・青)」と「HSL(色相・彩度・輝度)」の値の関係が視覚的に分かる「RGB & HSL」
色の表現範囲を表すのが「色空間(カラースペース)」です。例えば、赤(Red)・緑(Green)・青(Blue)の3原色を混ぜて幅広い色を再現する「RGB」はウェブ上やソフトウェアなどで頻繁に使用されており、シアン・マゼンタ・イエロー・ブラックの4成分による色表現「CMYK」は製版・印刷などの分野で使われていたり、色相(Hue)・彩度(Saturation)・輝度(Lightness)の3つの成分からなる「HSL」はCSSなどで使用されていたりします。 このように色空間にはさまざまな成分を持つものが存在するわけですが、「HSL」の彩度と輝度をいじると「RGB」ではどのように色が変化するのかを直感的に分かるようにカラーモデルで数値をいじりながら変化を見られるようにしたのが「RGB & HSL」です。 RGB & HSL http://smallhadroncollider-labs.githu
Darkblue (ダーク・ブルー) の色見本 | HTML Color Name - color-sample.com
HTML Color Name891B00 891B00 893700 893700 895200 895200 896E00 896E00 898900 898900 6E8900 6E8900 528900 528900 378900 378900 1B8900 1B8900 008900 008900 00891B 00891B 008937 008937 008952 008952 00896E 00896E 008989 008989 006E89 006E89 005289 005289 003789 003789 001B89 001B89 00008B 00008B 1B0089 1B0089 370089 370089 520089 520089 6E0089 6E0089 890089 890089 89006E 89006E 890052 890052 890037
カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる「Paletton」
色の組み合わせによって人を信頼させたり安心感を与えたりすることが可能ですが、複数の色を使う場合に統一感のある組み合わせを生み出すのはなかなか難しいもの。「Paletton」は簡単な操作で直感的に色の組み合わせることが可能で、実際にウェブサイトに採用したらどうなるのか？ということもサクッと確認でき、HTML・CSS・LESS・XML・TEXT・PNG・ACO・GPLなどさまざまな形式で出力することも可能という、かなり使えるサービスとなっています。 Paletton - The Color Scheme Designer http://www.paletton.com/ ページにはカラーホイールと、その隣に選んだ色の組み合わせが見られるパレットが表示されています。 ホイールの上にあるボタンからピックアップする色の数や組み合わせ方を選ぶことが可能。初期設定では1色だけをピックアップするようになっ
なぜインターネットでは「青色」が多用されているのか？
普段何気なく使用しているインターネット上のさまざまサービスをよく見てみると、至る所に「青色」が使われていることに気づきます。なぜ、インターネットではこれほどまでに青色が多用されているのか、IT関連のニュースサイトThe Awlがその理由を公開しており、興味深い内容になっていました。 Internet, Why So Blue? - The Awl http://www.theawl.com/2014/06/internet-why-so-blue こちらはGoogleが頻繁に自社のサービスに使用している青色です。カラーコードをHTMLなどで使う16進数で書くと「4385f5」になります。 試しに、Google検索を確認してみると、至る所に上記の青色が使用されているのがわかります。実は、Googleのデザイナーは上記の青色とは違う種類の青色をサービスのメインカラーに選んだのですが、上司から「
カラーコード・カラースキームを簡単にサクサク作成できる「Colourco.de」
ぐるぐるとカーソルを動かして色を決定、どんどん色を増やしてカラースキームを作成し、PNGファイルで作ったカラースキームを保存するだけでなく、LESSファイルでカラーコードまで保存できるのが「Colourco.de」です。 Colourco.de - find your colour scheme http://colourco.de/ 使い方は色の上でカーソルを動かすだけという簡単なもの。カーソルを垂直に動かすと明度が変化し、真ん中にカラーコードとRGB、HSL、HCL、LABという4パターンのカラーモデルが表示されます。 水平に動かすと色調が変わります。なお、彩度はスクロールで変えられるということですが、スクロールのできないマウスやタッチパッドの場合は「Shift＋上下の矢印」で調整することが可能。 欲しい色の上でクリックすると色が保存され、画面が2つに。右側に出現した画面で次の色を調整
「調和のとれた色」だけを集めたカラーパレットが誰でも簡単に作成できる「Paletta」
「特に, とりあえずといって#ff0000赤や#00ff00緑などの極端な色を選びがちなプログラマーの皆さんに使っていただけるといいなぁと思います.」ということで、非常に秀逸で便利なカラーパレットがクリックするだけであっという間に完成するのがプログラマーのためのカラーパレットツール「Paletta」です。 Paletta - HSV Color palette for every Programmer http://paletta.mrk1869.com/ 使い方は極めて簡単、「この色がいいなぁー」と思ったカラーをクリックするだけ。 すると一発で非常にバランスのいいカラーパレットが完成 いろいろな色がどんどん作れます また、右上にある「Reset」をクリックすればカラーパレットはリセットされ、さらにカラーコード部分をクリックすればコードがコピーされます 一体どういう仕組みでカラーが選ばれて
入力した言葉に合わせてイメージカラーを自動生成してくれる「色色 [:iroiro]」
どんな服を着ようか迷ったり、お絵描きやデザインでどんな色を使うか迷ったりした時に使えるサービスが「色色 [:iroiro]」。入力した言葉のイメージカラーを自動生成して表示してくれます。 色色 [:iroiro] http://synthsky.com/iroiro/ 使い方はとても簡単で、画面下部にテキストボックスがあるので…… こんな感じに文字を入力してルーペアイコンをクリックすればOK。 すると、その文字からイメージされる色を表示してくれます。これらの色は、入力した文字で画像検索をし、出てきた画像から主要な画像成分を抜き出してできあがるようです。 というわけでいろんな文字で検索してみます。 「ガチャピン」のイメージカラーはこんな感じ。 「ムック」は少しイメージと違います。 適当に文字を入力して、その日のコーディネートに利用したりしてもOK。 言葉のイメージ通りの色が出てくることもあれ
![入力した言葉に合わせてイメージカラーを自動生成してくれる「色色 [:iroiro]」](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ace35add2db160e7dd1d9291fd853da90027ea9/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2014%2F02%2F05%2Firoiro%2F00.png)
Apple・Google+・WordPressなど各社のブランドのカラーをまとめた「Guideline Colour」
知名度の高い企業やブランドなら「あのブランドといえばこの色」というブランドカラーが存在します。Twitterであればプライマリカラーのカラーコードは#55ACEE、Facebookの場合は#3b5998といったことが規定されているわけですが、各企業がブランドの指針について記すガイドラインでどんな色を規定しているのか？ということをカラーコード付きで調べられるのが「Guideline Colour」です。 Guideline Colour http://guidelinecolour.com/ トップページには各社のガイドラインの色見本が企業のカテゴリごとに並べられています。Vine・Google+・SoundCloudなどは「SOCIAL(ソーシャル)」のカテゴリ。 「SERVICE(サービス)」にはSkypeやDropbox、Spotifyなど。 Apple、BBC、WordPressなど
Webセーフカラー web216 - Web Safe Colors
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
あなたの色彩感覚をテストできる「Online Color Challenge」
日本人の場合、女性の500人に1人、男性の20人に1人が色覚異常だと言われていますが、日常生活で自分の色彩感覚がどれくらいのものかを知る機会はほとんどありません。そんな色彩感覚をオンラインで簡単にチェックできるのが「Online Color Challenge」です。 Color Test - Online Color Challenge | X-Rite http://www.xrite.com/online-color-test-challenge Online Color Challengeは、色の明度・彩度をそろえた異なる色相の色コマを順に並べていくことで、微妙な色の違いを判断する能力を調べられる「Farnsworth-Munsell 100 hue test」を利用したテストで、ディスプレイのカラーキャリブレーションを簡単に行えるツール「i1Display Pro」を販売している
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Harmony - Chrome Web Store
Gradient Creator! - Chrome Web Store
自然をイメージさせる配色のカラースキーム | Web カラー 配色パターン 一覧リスト | iso.labo