CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
VFXと色収差
この世界には電磁波（Electromagnetic waves）という、空間を伝わるある種のエネルギーの波があることが知られています。 電磁波には波長（Wavelength）というものがあります。文字通り、「波の長さ」です。これは波が一回振動したときの距離で、山から山、または谷から谷までの長さということになります。 さまざまな波長の電磁波があります。電磁波の波長の単位はm（メートル）ですが、波長が数千km（キロメートル）に及ぶものから、十億分の1mm（ミリメートル）以下のものまで、さまざまな種類があります。 ひょっとすると電磁波という呼び方をしないので、気づいていないかもしれませんが、電磁波はとても身近なものです。たとえば……。 ・ラジオやテレビ、Wi-Fi、Bluetooth、レーダーなどの「電波」も電磁波 ・電子レンジで食べ物を温める「マイクロ波」も電磁波 ・病院でレントゲン写真を撮る
PANTONE に直接聞いてみた。DICとの違い。 - 株式会社サンコー：おもいをカタチにする仕事｜印刷・WEB・デザイン
「DICとPANTONEの違いについて、色々と調べてブログにまとめましたが、どうもよくわからない。」ということで、PANTONE(パントン・パントーン)の日本総代理店のユナイテッドカラーシステムズさんに直接電話して聞いてみたら、驚きの結果が！これは日本中のデザイナーさんに知って頂きたい。 PANTONE のインキは無い！？ サンコー）「PANTONE(パントン・パントーン)で色指示があり、近似色ではなくPANTONE(パントン・パントーン)のインキで印刷して欲しいので、インキを作ってくれるところを紹介して欲しい。」 ユ：「ユナイテッドカラーシステムズではインキは製造していないのでパントン社とライセンス契約したインキ会社に相談して下さい。」 えっ？・・・ PANTONE(パントン・パントーン)はあくまでカラーシステム（色見本）のみを持っており、実際にインキを作るのはライセンス契約をしている国
次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients
すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar
業務システムでカラーユニバーサルデザイン（CUD）対応した話（進め方と変更例など） - ヴェルク - IT起業の記録
2019年5月19日から、board内で使われている色を調整し、色弱・色覚特性などと称される色覚「P型・D型」の方にも識別しやすい配色にしました。 こういった取り組みが、多くの製品・サービスで行われるようになれば良いなと思い、経緯や実際に行ったことなどを紹介したいと思います。 今回の取り組みは、NPO法人「カラーユニバーサルデザイン機構（CUDO）」に検証を依頼し、問題のある箇所は修正後、無事、同機構が発行するカラーユニバーサルデザイン（CUD）認証を取得することができました。 ちなみに、CUDOさんによると、請求書作成・販売管理・会計・SFAなどの業務支援システムとしてこの認証の取得は初めてらしいです。 カラーユニバーサルデザインとは 現在日本には、割合が最も多い一般色覚「C型」の他、色弱・色覚特性とも称される色覚「P型・D型」の方が男性の約20人に1人、女性の約500人に1人の割合で、
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
Google、Chromeブラウザのロゴを8年ぶりに変更
米GoogleのWebブラウザ「Chrome」のロゴが8年ぶりに変わる。同社のインタラクションデザイナー、エルヴィン・フー氏が2月4日（現地時間）、ツイートで予告した。開発者向けのCanaryバージョン（バージョン99）は既に新しくなっており、3月29日リリース予定のバージョン100の公式版からこのロゴになる見込み。 隣接する色の境目にあったシャドウがなくなり、中心の円が大きくなり、色も明るくなる。「Googleのより現代的なブランド表現に沿ったものになる」とフー氏は説明する。LinkedInによると、同氏は2019年からGoogleの「Material Design」に携わっている。 GoogleがChromeのロゴを変更するのはこれで3回目になる。徐々にフラットになってきているが、シャドウが気になっていた人も多いのではないだろうか。
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
なぜ、ハイパーリンクは青色なのか?
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
人間が想像すらできない「色」を鳥が見ていることが3年にわたる実験で示される
人間の目は赤・緑・青という3つの光の波長を知覚し、それを組み合わせることで多くの「色」を識別していますが、自然界には人間が知覚できない色を識別している生物も存在します。3年にわたる実験で、鳥が人間に識別できない「紫外線」まで識別し、人間とは全く異なる世界を見ていることを示した驚くべき論文が、新たに発表されています。 Wild hummingbirds discriminate nonspectral colors | PNAS https://www.pnas.org/content/early/2020/06/09/1919377117 Hummingbirds Can See Colours We Can't Even Imagine, Experiment Reveals https://www.sciencealert.com/hummingbirds-can-see-colour
「白い製品」に「白いケーブル」を添付できないメーカーの裏事情
機器本体と、ケーブルやACアダプターの色が一致していないことはよくある話。ユーザーから見ると「なぜそんな簡単なことができないのか」と不思議に思ったりもするが、企画担当や開発担当などからすると、そう簡単な話ではない。 「なぜ日本のメーカーは、海外のメーカーのように、白いボディーの製品に白のケーブルを添付することができないのだろう」──このような趣旨のツイートが話題になった。同じような疑問を持つ人は多いようで、何千件とリツイートされるとともに、メーカーで開発に従事していると思われる他のユーザーが、さまざまな視点からの回答を寄せていた。 この疑問はSNSで1～2年周期で話題になる、一種の「あるある」ネタである。中には、自分で製品を使っていればこのくらいのことは気付いて当然で、それはつまり自分で開発した製品を使っていないのではないかと、とっぴな方向に考えを飛躍させる人もいるようだ。 とはいえ、少な
あなたには、何色が見えていますか？
どうやら、あなたと私では見えている色が違うようです。 回転するディスクのGIF画像、白黒の中にちょっと色が見えませんか？ この色、人によっては、青に見えたり赤や黄色に見えるんですって。 これはベンハムの独楽と呼ばれるもの。錯視の実験として有名な画像で、イギリスの玩具メーカーから発売された独楽が由来となっています。完全に白黒なので他の色は一切ついていません。でも、なぜか人によってさまざまな色が見えてしまう不思議な現象なのです。ちなみに、なぜこのような錯視が起こるのかは解明されていません。一説では、赤、緑、青の光に対して、眼における光を受け取る神経細胞が異なる変化率で反応するからとも言われています。 何色が見えました？ 私は、黄土色に近い黄色が見えました。 image by Aleksandar Mijatovic/Shutterstock Casey Chan - Gizmodo SPLOI
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など
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
人物イラストの肌の色を調べてみたら、ここ10年での大きな変化が見えてきた「凄い調査」「実感と合ってる」
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo