色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。 Color Color -GitHub Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。 既存のWebページをベースに 指定したカラーをベースに カラーボックスをベースに 画像をベースに JSONをベースに 生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。 まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」
TOP > Design , WebDesign , WebService > トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」 デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。 基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。 詳しくは以下 「Trendy Palettes」では、Trendy、popular、Randomと様々な形でカラーパレットを参照することができ、個別ページではカラーコードを参照できる他、PN
色のセンスがない人でも大丈夫、色を段階的に変化させるカラーパレットを簡単に作成できる便利ツール
Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介します。
シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。 さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。
配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax
UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。 例えばグレーはよく使用されるカラーですが、選ぶのが難しいカラーです。ブルーに合ったグレー、グリーンに合ったグレー、さらにその中から可読性が充分な明るいグレーや暗いグレーなども自動的に生成されます。
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える
ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr
2色の相性を簡単にチェックできるカラーツール「Pigment」
デザインで色を決めるという行為は非常に重要なもの。選択や組み合わせをミスしてしまうと、思ったようなデザインに仕上げることができません。今回はそんなカラー選定の際にぜひ役立てたい「Pigment」を紹介したいと思います。 2色の相性を簡単にチェックできるカラーツールです。 詳しくは以下 非常に豊富なカラーサンプルが準備されており、気になったカラーをクリックするとカラーを拡大して見ることができます。DIC、PANTONE、RGBのカラーナンバーも明記されており、そのまま色を再現したり指示するのに便利。また、2色がグラデーションになった際のサンプルや、流行のデュオトーンを取り入れた際のイメージをチェックできたりと、カラー選定＋αの要素が準備されているのも嬉しいポイントです。他、スウォッチ共有用.ase形式などのダウンロードも可能。 オンラインで手軽に色をチェックでき、さらにクリエイティブな想像を
春向けのデザインやイラストに取り入れたい！2018年春のトレンドカラーはワクワクする楽しいカラーがいっぱい！
2018年、Pantoneがセレクトしたトレンドカラーは「Ultra Violet」 独創的で想像力に溢れるスミレ色をはじめ、2018年春のトレンドカラーも楽しくなるような色合いの12色が選ばれています。 デザインやイラストのメインカラーとして使えるトレンドカラー、ベースとなるクラシックカラーを紹介します。
PANTONEが選ぶ2018年の色「Ultra Violet」を使った配色例
2017年12月22日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました！2018年は「Ultra Violet」に決まりました。なんだかおしゃれで神秘的。そんな「Ultra Violet」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Ultra Violet」ってどんな色？ 無限に広がる宇宙のような、近未来や不思議な力、芸術的で個性的。そんな魅力がつまった色ですね。単色で使うだけでもおしゃれ度アップ！ 色の具体的な数値は以下の通り： PANTONE：18-3838 Ultra Violet カラーコード：#5f4b8b RGB：R95, G75, B139 CMTK：C71, M73, Y7, K8 グッズも販売されています 「Ultra Violet」カラーのグッズいろいろ！お気に入りの色で生活環境を彩ってみては？ ノー
Color Thief
Color Thief by Lokesh Dhakar Grab the color palette from an image using just Javascript. Works in the browser and in Node. Github Getting started The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the /dist folder and what formats they support: color-thief.js - CommonJS module for use in Node. col
配色えらびも人工知能の時代！素敵なカラーパレットを自動生成できるツール Khroma
デザインに欠かせない配色選びは、デザイナーにとって頭を悩ませる問題のひとつ。もしコンセプトにあった色の組み合わせを素早く、しかもたくさんのサンプル案と一緒に確認できるとしたら？ Khroma は、そんなデザイナーの想いを人工知能をつかって解決したオンライン配色ツールです。お好みの色を追加することで、より精度の高い組み合わせを実現できる、まさに「育てる」配色ツールと言えます。 Khroma とは。 Khroma とは、人工知能 Ai を利用することで、選択した色を解析し、実用性の高いカラーパレットを生成するオンライン配色ツールです。 このツールを使えば、以下のようなスタイリッシュな配色をほんの数分で作成することができます。今回は、Khroma の使い方を詳しくみていきましょう。 Khroma の使い方 まずは、お好みの色を50色選んでいきます。「50色」と聞くと多いように感じるかもしれません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近見つけた素敵なデザイン書、色への造詣が深まるデザイナーやイラストレーター向けのかわいい豆本 -色の辞典
Webデザイン・紙デザイン用のナチュラルなカラーの組み合わせを見つけることができるオンラインツール -Pigment
フラットなUIデザイン用に作成された、世界各国の有名デザイナーが使用しているカラーパレットのまとめ
CSS GEARS - Gradients Cards
美しいグラデーションをリスト化、編集やCSSコードのコピーも出来る・「CSS GEARS」
デザインやイラストに使える新しい配色の教科書！色の組み合わせ・色の知識がたっぷり詰まった完全保存版
The Colorbook