Tailwind CSS Color Generator | UI ColorsPress spacebar, enter a hexcode or change the HSL values to create a custom color scale Enter a hexcode to create a custom color scale
配色に迷ったらこれ！配色イメージを言語化して論理的に伝えられるスケールがめちゃくちゃ役に立つ「語彙力ない私にうってつけ」
リンク www.ncd-ri.co.jp イメージシステム | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 日本カラーデザイン研究所はオリジナルのカラーシステム「HUE&TONEシステム」やイメージ分析システム「イメージスケール」を開発、発展させてきました。 62 users かたおか＠LP専門Webデザイナー / 著者 @kataokadesign 「Webデザインを学び始めたばかりで配色がうまく決められない」という悩みがあるなら、日本カラーデザイン研究所のイメージスケールを活用すると良いでしょう。 各キーワードに関連する配色が体系化されているので、配色で大失敗する可能性はひとまず減らすことができます。 ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
大雨警戒レベルの配色 色が見分けにくい人に配慮し統一 | NHKニュース
大雨に関する防災情報の5段階の警戒レベルについて、国はレベルごとの色を新たに定めました。色が見分けにくい人にも配慮したもので、今後、自治体やメディアなどに統一した色を使うよう求めています。 このうちすでに災害が発生していることを示すレベル5は「黒」で、特別警報や氾濫発生情報などが発表され、命を守る行動を取る必要があります。 次に、避難指示や勧告が出され、危険な場所から避難する段階のレベル4が「紫」、高齢者など、避難に時間がかかる人が避難する段階のレベル3が「赤」などとなっています。 また、これまでレベル4で取るべき行動を示すキーワードを「全員避難」としていましたが、災害のリスクが無い場所にいる人まで避難が必要だという誤解が生じたとして、新たに「危険な場所から全員避難」と改めました。
新海カントク『面白い分析ですね』／／ 新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。
あいうち@サークルスイミー @Aiuti01 【プロイラストレーターが多用する明度彩度の領域】 複数人のプロイラストレーターの作品で、明度彩度だけサンプリングした結果、見えてきた明度彩度の傾向となぜその領域が使用されるかの分析をしてみた。 pic.twitter.com/mnJ4QY0cKY あいうち@サークルスイミー @Aiuti01 昨日バズった『プロイラストレーターが多用する明度彩度の領域』ですが、新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 商業イラスト（ソシャゲ・ラノベ表紙・キャラデザ）などを請け負うプロイラストレーターの方と、新海誠監督が多用する明度・彩度の領域がここまで違うとは… pic.twitter.com/Kn4msZqxse
Orange You Accessible? A Mini Case Study on Color Ratio | Bounteous
Orange You Accessible? A Mini Case Study on Color Ratio I recently completed work for a client who used orange heavily in their branding: it was in their print ads, brochures, posters, and signage, and they wanted to incorporate it on their website. This led to a comparison of orange buttons. Can you guess which button is more accessible? If you guessed the left button, congrats! You are an access
文字色と背景色のコントラスト
コントラストに配慮した色の指定 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 明度差 （color brightness difference） を求める計算式 色の差 （color difference） を求める計算式 計算例 － コントラスト計算例 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 文字の色とその背景色のコントラスト（色の差、明度差）を十分にすると、文字の読みやすさが良くなります。すなわちアクセシビリティの面で考慮しなければならないことです。 適切なコントラストを適用するには、2000年4月26日付けで W3C 草案 （Working Draft） として公開されている 「Techniques For Accessibility Evaluation And Repair Tools」 のなかで紹介されて
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
イメージスケールの基本 | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所
※一部のInternet Explorerで「データベースシステム」「Hue&Toneシステム」を閲覧できないケースが発生しております。 お手数ですが、別のブラウザでお試しください。 イメージスケールとは イメージスケールは日本カラーデザイン研究所が研究・開発した感性マッピングツールです。 色に対して抱くイメージは人によって微妙に異なりますが、共通する部分も多く認められます。そのイメージの共通感覚を心理学的研究の蓄積で明らかにしたものが、イメージスケールです。 基本のイメージスケールは、イメージの判断基準であるWARM－COOL、SOFT－HARDの座標軸上に単色、形容詞、形容動詞を表現した配色が配置されています。(本来は第3軸としてCLEAR-GRAYISHの軸があり、3次元のイメージ空間となっています) ■カラーイメージスケール すべてのイメージスケールの元となっている単色イメージスケ
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
新しい配色トレンド「カラーブレンド」の効果的な使い方と参考サンプル例30個まとめ
ブラジルの国鳥であるオオハシのくちばしは、鮮やかで発色のよいマルチカラーとなっています。今回は、この色の組み合わせについて詳しくみていきましょう。グラデーションではありません。カラーブレンド（英: Color Blends）の世界へようこそ。 カラーブレンドって一体なに？ まずは以下のSlackロゴを見て見ましょう。 このロゴでは何色が使われているでしょう。4色ですか。いいえ違います、もっとよく見てみましょう。 ここでは、4つのベースカラーが重なり合っています。重なっているところには、新しい色「ブレンド（英: Blend）」が作成され、合計8色が使われています。カラーブレンドは、2つの重なり合う色を交差させることによって作成されます。 ある意味では、グラデーションの逆と言えるでしょう。グラデーションは２つのカラーが段階的に変化するのに対し、ブレンドは2つの異なる色の重なり方によって配色が変
色覚異常補正レンズを買った
私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scale — color scale generator
http://www.asahi-net.or.jp/~gx4s-kmgi/page04.htm
CUDガイドブック.pdf
カラーユニバーサルデザイン推奨配色セットガイドブック
色のイメージを表す「トーン」 - 株式会社ノイエ〈NOIE〉