美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
マテリアルデザインに使える配色をまとめたサイト「Material UI」 | ライフハッカー・ジャパン
「Material UI」はマテリアルデザインに使える配色をまとめたサイトです。アクセスすると様々な色が表示されます。どれもマテリアルデザインに合う色合いになっていますよ。クリックするとカラーコードをコピーできます。 以下に使ってみた様子を載せておきます。まずMaterial UIへアクセスしましょう。マテリアルデザインに合う色がずらっと一覧で表示されています。 このようにさまざまな色が表示され、クリックするとカラーコードをコピーすることができます。流行りのマテリアルデザインを採用する際、どの色を使おうか困ったときにぜひご活用ください。 Material UI | Material Design | Material UI Colors （カメきち）
配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
Webで見るデジタル色彩見本として 配色の見本帳は無料のインターネットツールです。各色のページでは、Webカラー（RGBカラー）をベースとした色の系統（色相）と色の鮮やかさ（彩度）・明暗の度合い（明度）を数値で表しています。各種カラーモードでの色数値を掲載しています。DTPでチラシや看板を作るとき、ホームページといったWEBサイト作成、パワーポイントでの資料作成など、各種デザインでのカラーマネージメントに便利なカラーコードが一目でわかるWebで見るデジタル色見本です。 色を扱うときに頻繁にぶち当たるのが配色ですが、色の法則に沿った色の組み合わせがテンプレートとなり色彩設計の手助けをしてくれます。 色検索で見つかる新配色 ベースとなる色、キーカラーを選ぶとそこからおすすめな相性の良い色をマッチングしてくれるのが当サイトの色検索です。メインに使う色が決まっているとき求める配色がすぐに見つけられ
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
必要なのはノート1冊。時間管理&マインドフルネスが同時にできる「インタースティシャル・ジャーナリング」
指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。
きれいに調和した色彩のカラーパレットを誰でもすぐ簡単に自動生成できる「Coolors」
ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ
ColorBlender.com | Your free online color matching toolbox
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
配色に役立つ11のサイト
WEBデザインを行う上で重要なファクターの一つである配色：カラーリング。ロゴやブランドイメージなどから導きだすケースが多いと思うが、困ってしまうのは明確なイメージがなく、キーカラーが決まらないとか、キーカラーとの組み合わせがイマイチしっくりこないなど、配色で頭を悩ませることは結構あるのではないだろうか。 そこで今回は、そういう時に役立ちそうな10サイトを紹介したい。各サイト共に試してみたが、思わぬ組み合わせや自分では積極的に使わない色や自分の好き嫌いを再確認できて結構面白い。こういったサイトを活用して効率化を図ったり、新境地を開いてみてはいかがでしょうか。
「調和のとれた色」だけを集めたカラーパレットが誰でも簡単に作成できる「Paletta」
「特に, とりあえずといって#ff0000赤や#00ff00緑などの極端な色を選びがちなプログラマーの皆さんに使っていただけるといいなぁと思います.」ということで、非常に秀逸で便利なカラーパレットがクリックするだけであっという間に完成するのがプログラマーのためのカラーパレットツール「Paletta」です。 Paletta - HSV Color palette for every Programmer http://paletta.mrk1869.com/ 使い方は極めて簡単、「この色がいいなぁー」と思ったカラーをクリックするだけ。 すると一発で非常にバランスのいいカラーパレットが完成 いろいろな色がどんどん作れます また、右上にある「Reset」をクリックすればカラーパレットはリセットされ、さらにカラーコード部分をクリックすればコードがコピーされます 一体どういう仕組みでカラーが選ばれて
Colordot - A color picker for humans
How toBack & Forth for Hue Up & Down for Lightness Scroll for Saturation
配色を考えるときに便利なオンラインツール10個集めてみました | WP-E (仮)
最終更新: 2018年4月14日 皆様こんにちは！最近WP-Eメンバーに本名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。 さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。 Adobe Kuler まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります) 「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。 Color Hexa Colo
Color Hex - ColorHexa.com
ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes). Just type any color value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent in Hexadecimal, RGB, CMYK, HSL, HSV, CIE-LA
おおお、それっぽい！ 言葉をカラーパレットに変換するサービス「色色」が楽しい
言葉を入力すると、そこからイメージされる色を提案してくれるサイト「色色[:iroiro]」がこのほどオープンしました。ブランド名や国、感情、人名など、抽象的な言葉から具体的な言葉まで「なんとなくそれっぽい」カラースキームを自動的に生成します。 「冬」だとこんな感じ それでは実際に試してみましょう。「冬」は白や青で表現され、見ているだけで寒そうな感じ。「恐怖」で調べると、黒や灰色などダークな色に混ざって、濃い緑も提案されました。これらのカラーパレットはツイートしたり、ダウンロードして壁紙としても使ったりできます。 なるほど、雰囲気が出ています 安定の黒 かなりイメージ通りですぞ！ さらにそれらと似た色の洋服を提案してくれるコーディネートページも用意されています。バレンタインが近いということで「チョコレート」でコーディネートを考えてもらうと、茶色やベージュのおしゃれアイテムが表示されました。こ
色色 [:iroiro] - 「言葉」からカラーパレットを自動生成しよう！
色色[:iroiro]とは、「言葉」からカラーパレットを生成するサービスです。
![色色 [:iroiro] - 「言葉」からカラーパレットを自動生成しよう！](https://cdn-ak-scissors.b.st-hatena.com/image/square/af968f100788dea6e8fc8badabc54f2003dd7bb9/height=288;version=1;width=512/http%3A%2F%2Fsynthsky.com%2Firoiro%2Fimgs%2Firoiross.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意の2色を指定するとマテリアルデザインのパレットを作ってくれる『Material Palette』 | 100SHIKI
Manugarri
カラーホイール | カラースキーム - Adobe Color CC
ColourCode: Color Palette Generator | Toptal®
【配色 - デザイン】 - Adobe Kuler
色色[:iroiro]