カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
Interactive color picker comparison
Almost all color pickers are based on HSL or HSV, but that might not be the best choice. Here standard HSV and HSL color pickers are compared with Oklch, Okhsv, Okhsl and Hsluv. For background and more information about the color spaces used, check out the accompanying blog post. The source code is available on Github here.
HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい - Qiita
CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。 https://luncheon.github.io/lch-color-wheel/ この記事はその経緯です。 HSL 色表現と色相変数 CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。 色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。 .btn { background-color: hsl(var(--hue), 100%, 60%); border: 2px solid hsl(var(--hue), 100%, 40%); } .btn:hover { box-shadow: 0 0 8px hsl(var(--
色弱の見え方シミュレーター - 文字色と背景色
色弱の見え方シミュレーター - 文字色と背景色 コンピュータの発達と普及により、プレゼン資料・ホームページなど、情報発信する機会が増加しました。このとき、文字色と背景色の組み合わせによって、文字が見づらくなってしまうことがあります。一般色覚の人には見分けやすくても、色弱の人には見分けにくい、という色の組み合わせもあるので、注意が必要です。 色弱の人には見分けやすいかどうかは、色弱の人に確認してもらうのが一番好ましいですが、すべてチェックしてもらうのは現実には難しいでしょう。 そこで、文字色と背景色の組み合わせから、色弱の人の見え方を模擬体験するシミュレータを作成しました。コントラスト比(明るさの差)も計算します。 使い方の画像はこちら(ポップアップ表示します) 文字色: 背景色: C: 人にやさしい色づかいをすすめる会 文字: #000000 ([赤,緑,青]=[[0,0,0]]) 背景:
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Palx