CSS relative color syntax | Blog | Chrome for DevelopersBuild with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
【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全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
Colord — JavaScript library for color manipulations and conversions
Getting Startednpm i colordimport { colord } from "colord"; colord("#ff0000").grayscale().toRgbString(); colord("rgb(192, 192, 192)").isLight(); colord("hsl(0, 50%, 50%)").darken(0.25).toHex(); 📦 SmallJust 1.7 KB gzipped (3x+ lighter than color and tinycolor2)💨 Dependency-freeFast CI and no vulnerability risks🚀 Fast3x+ faster than color and tinycolor2😍 SimpleChainable API and familiar patterns
Pika • Super High Fives
Pika, an open-source colour picker app for macOS.Omg Pika (pronounced pi·kuh, like picker) is an easy to use, open-source, native colour picker for macOS. Pika makes it simple to quickly find colours onscreen, in the format you need, so you can get on with being a speedy, successful designer. Download Pika for freelanguagesEnglish, French, Germansize5.76MBreleased30/11/2023versionv0.0.16 (Flight t
Color Designer - Simple Color Palette Generator
From Inspiration to Creation: Ignite Your Design Journey with Color Designer Welcome to the most comprehensive color tools platform. Unleash your creativity using color wheel, devise harmonious palettes with the Color Palette Builder, and create depth with the gradient options. It's a designer's playground. Enjoy exploring!
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
UXデザイナーのための15の配色ツール | UX MILK
色は、デザイナーが使う手段の中で、もっとも強力なツールの１つです。同時に、色という概念は習得するのが難しく、また、色の組み合わせは無限にあるため、サイトやアプリに使用する色を決めるのは難しいものです。そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 判断できるカラースキームを作る １. インスピレーションを受ける 自然 あなたの周りには、たくさんのひらめきの種があります。インスピレーションを受けるには、周りを見回すだけでいいのです。印刷されたデザイン、インテリアデザイン、ファッションなど、魅力的なものがたくさんあります。その中でも、最高の色の組み合わせは自然にあります。美しい
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
配色を考えるのが面倒ならhsl()を使おう - Qiita
hsl()ではhue：色相、saturation：彩度、lightness：輝度の3要素で色を指定します。 RGBより直感的な色指定方法としてCSS3で追加されました。 キーとなるhueさえ最初に決めておけば、あとは彩度と輝度の割合を変えるだけでそれなりにまとまったサイト配色になります。 モックや社内用管理画面をゴリゴリ作る際に覚えておくとべんり！ 指定方法 hue：色相 0～360°の角度の値で指定。 角度のため、例えば400と指定すると40に変換されます。 0=360=red saturation：彩度 0～100%の割合で指定。 100％＝純色、0%＝灰色 lightness：輝度 0～100%の割合で指定。 100%=白、50％=純色、0%=黒 （明度とは異なるので注意。明度は100%=純色、0%=黒。） 例）hue=0 の場合の変化 See the Pen hsl() による色の
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
ブロガー必見！配色を決めてくれる人工知能【Khroma】がスゲーー！！ | OMGmag
配色を決めるのは難しい ブロガーの皆さんはカスタマイズをとかすると思うんですが、配色ってどうやって決めていますか？いい感じの色使いって難しいんですよね。そういう仕事してるぼくでさえ、悩むポイント。ちょっと苦手です。 今日紹介するのは配色ツール。 このブログの場合は自分の好きな色でまとめた感じなんですけど、やはり見やすい色の組み合わせってあるので、好きな色をいくつも入れたら見た目がド派手になってしまった！なんてことも起こりがち。 そういうのを一気に解決してくれるやつを紹介します！ AI（人工知能）です！未来ですね。 しかも無料！（素晴らしい） Khromaっていいます！！（読めねーよ！） Khroma – The AI color tool for designers 使い方はとても簡単 サイトを開いて【Personalize】をクリック するとカラーパレットがズラッと出てくるので好きな色を
【Webデザイン】配色に悩んだ時に見て欲しい便利なサイト5つ紹介 - YUUU BroG
2018.6.20 更新 突然ですが、Webサイトを作成する時や、ブログのデザインをカスタマイズするときに「どんな色を使うか」で悩んだことはありませんか？ 背景色、文字色、メニューの色、見出しの色...何となく決めてしまいがちですよね。デザインを決めるうえで配色というのは、見た人に与える印象を決定づけるもので、とても大切な要素です。 パソコンのモニターが表示できる色の数は「約1677万色」あり、数ある色の中から理想の配色をピックアップするのは非常に困難です。 「明るくて柔らかい印象を与えられるような配色にしたい」 「青系をメインカラーとし、クールなサイトを作りたい」 漠然とした理想や、イメージはあるものの、どうやって決めていけばいいのか悩みますよね。 そんな悩みを解決してくれるかも！？配色に悩んだときに見てほしい、無料のオススメなサイトをご紹介します！ 配色に悩んだときに見てほしいサイト
MacBook Pro 「ディスプレイキャリブレータ・アシスタント」
システム環境設定によるディスプレイのキャリブレーション 明日から専門学校の新年度が始まります。私は2年生を担当しているので、Macを使い始めて1年は経っているのですが電源アダプタを持ち歩くのも面倒なのか、省エネルギー設定でディスプレイを暗くして作業している生徒も見受けることがあります。そんなんで色が確認できてるのかなぁと思うのですが、明日の授業ではちゃんとディスプレイの設定をしてもらおうと思うので、手順をまとめておこうと思います。 私自身は「i1 Display Pro」でプロファイル作って用途に寄って切り替えて使うようにしています。 前準備 ディスプレイの輝度の調整 アップルメニューから「システム環境設定」を選択し、輝度のスライダーを動かして調整します。Touch Barや輝度調整のキーボードとも連動しています。ディスプレイの輝度は80cd/m2は必要ですが測定できないので、私が「i1
無料で配色シミュレーションができるカラーパレット系サービス6選【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回はデザインの重要な要素の一つである、色選びの時に使える配色シミュレーションができるツールやサイトをご紹介します。Webカラーのカラーパレット系サービスを中心にチョイスしましたので、配色などでお悩みの方はぜひご参考にしてみてください！ 独学でつまずいていませんか？ 配色やデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 coolors https://coolors.co/ 直感的な操作で色の組み合わせのシミュレーションができるサイト。スペースキーを押すことで自動で配色を行なってくれます。何度でも押せる
「クールなデザインがいい」「落ち着いた雰囲気で」etc・・・上司からの曖昧なデザイン指示に対応するためのポイント
ホームページの制作やリニューアルを行う際、どのようなデザインにするかは悩みどころです。 デザインは誰でも理解でき、すぐに見える部分のため、社内でも多くの意見が出てきて振り回されてしまうこともあるかもしれません。 上司から*「落ち着いた雰囲気にして」「女性受けするデザインがいい」*というような曖昧な指示を受けた時、Web担当者の皆様はどうされていますか？ イメージが固まらないまま制作に取り組んでしまうと、完成時に「予想していたイメージと違う」と社内からクレームがきてしまうこともあります。 今回は、デザインについて曖昧な指示をされた時の対応方法について解説します。 ホームページの制作を成功させるためにも、感覚的になりがちなデザインをできるだけ言語化できるようにしましょう。 曖昧な指示は突き詰めてヒアリングしよう *「カッコよく」「女性受けするような」*などとイメージの固まっていない表現で依頼さ
簡単にきれいな配色デザインが作れる無料ツール「ColorHexa」 | WordPressやWebデザインなど紹介 Ocadweb
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
Skala Color
Skala Color is on hold for now There are some bugs in Skala Color that we don’t think we can fix while keeping it a macOS color picker. The solution is probably to turn it into a full Mac app as a compete reboot that adds lots of cool new features. However, we don’t have time to do it right now. If you’d like Skala Color as a Mac app, please let us know. If you really, really want to download the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Color & Contrast
pppalette: friendly color palette generator for beautiful colors | fffuel
【センス不要】非デザイナーでもプロっぽくできる！簡単配色テクニック | ナナシログ
