最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū
最近はHEXコードから脱却して、色彩が豊かなOKLCH値のカラーを使用しているWebサイトやスマホアプリが増えてきました。さまざまなプロジェクトで使用できるOKLCHのカラーパレットをまとめたCSSを紹介します。 「uchū」は日本語の「宇宙」で、作者が日本のスタイルや美学などが大好きで、すべてのプロジェクトに使用するという意味を込めてこの名前にしたとのことです。 uchū uchū -GitHub uchūはWebサイトやスマホアプリのUIデザインで、OKLCHカラースペースを利用するために作成されたカラーパレットです。 ライセンスはUNLICENSEで、カラーにライセンスなんていらないでしょ笑、とのことです。
UIデザイン用のアクセシブルなカラーパレットを自動生成するツール -Accessible Color Palette Generator
UIデザイン用のカラーパレットを作成するのは、簡単そうに思うかもしれません。しかし、アクセシビリティの要件を満たし、ブランドのアイデンティティやスケールのバランスが取れたカラーパレットを作成するには手間と時間がかかります。ほとんどのツールを使用しても、これらの要件を満たせるものは数が少ないです。 UIデザイン用のアクセシブルで、ライトモードとダークモードにも対応、アクセントカラーやニュートラルカラーでスケールの取れたバリエーションも自動生成してくれる便利ツールを紹介します。 Accessible Color Palette Generator Accessible Color Palette Generatorは、UIデザイン用のアクセシブルなカラーパレットを自動生成する無料ツールです。Radix UIのカラーパレットからインスピレーションを得ており、WCAG 2.1に基づいてアクセシブル
AIだと簡単で便利！ UIデザイン用に色彩理論に基づいたカラーパレットやUIコンポーネントを生成してくれる無料ツール -ColorMagic
AIを使って日本語テキストや画像からカラーパレットやグラデーションやUIコンポーネントを生成してくれるツールColorMagicの日本語版が登場したので、紹介します。 入力されたプロンプトや画像を元に色彩理論に基づいてカラーパレットを生成し、配色の調整や配色を使用したグラデーション、UI要素に配色を適用した場合なども分かる便利ツールです。しかも、完全に無料で利用できます。 下記は「春っぽいパステルカラー」と入力して生成されたカラーパレットです。 AIカラーパレットジェネレーター AIを使ってテキストからカラーパレットを生成するツール AIを使って画像からカラーパレットを生成するツール アクセシビリティを確保するコントラストチェッカー AIを使ってテキストからカラーパレットを生成するツール ColorMagicは、AIを使用してテキストや画像からカラーパレットを生成できるオンラインツールです
これは和の配色本の決定版！ 日本の古来より伝わる伝統的な美しい色と言葉がまとめられた -配色アイデア手帖 日本の美しい色と言葉 第2版
※本ページは、アフィリエイト広告を利用しています。 デザインやイラストをはじめ、ビジネス、インテリア、ファッションなど、色に携わるすべての人にお勧めの配色アイデア手帖 日本の美しい色と言葉 第2版を紹介します。 初版から6年ぶりの第2版が本日発売です！ 日本の古来より伝わる伝統的な美しい色と言葉が一冊の本にまとめられており、基本となる色の使い方、実用的な配色、それを応用したさまざまなデザイン・パターン・イラストの配色などが掲載された完全保存版の一冊。第2版では特典も豪華、収録されている配色すべてのスウォッチデータもダウンロードできます。 配色アイデア手帖は当ブログでも大好評のシリーズですが、中でも私はこの「日本の美しい色と言葉」が一番のお気に入りです。日本の古来より伝わる伝統的な美しい色と言葉がたっぷり収録されており、第2版では新しい配色テーマが加わり、二十四節気や七十二候など、日本人が育
2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」、HTMLのコードは「#A47864」
2025年のトレンドカラーがPantoneから発表されました。 トレンドカラーは、温かみのある極上の茶色「モカムース（Mocha Mousse）」、穏やかなひとときを誘う控えめな色合いです。 モカムースのリッチなブラウンは大地の洗練を感じさせ、贅沢さと繊細で優雅な雰囲気を生み出すカラーです。
UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki
デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。 Flexoki Flexoki -GitHub Flexokiは先日リリースされたばかり。アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームで、MITライセンスで利用できます。 サイトのUIデザインにもこのカラースキームが使用されています。
Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
デザインやイラストに使える配色本の決定版！ 配色アイデア手帖 第2版は、Photoshopやクリスタのスウォッチデータ・ポケット版PDFなど豪華ダウンロード特典が満載
配色本の中で日本一（もしかしたら世界一）売れている（担当者様談）配色アイデア手帖、現在も好調に売れ続けている中、完全保存版となるべく改訂第2版が発売されました！ この第2版では、収録されているカラーすべてのスウォッチデータ、CSSファイル、ポケット版PDFと豪華ダウンロード特典が満載で、さらに新しい配色テーマやコラムが増え、紙面は最新版にブラッシュアップされています。まだ持っていない人はもちろん、すでに持っている人にもお勧めします。 本書は、本日発売の最新刊！ 5年ほど前に発売された配色アイデア手帖の第2版です。読者からの要望で多かった、カラー値を入力するのが面倒というのを解消するべく、さまざまなソフトウェア用のスウォッチファイルがサポートサイトからダウンロードできます。 Adobe Photoshop用のスウォッチ（CMYKとRGBの2種類）: .aco Adobe Illustrato
注目のWebデザイン用AIツール！ テキスト入力でWebサイトやスマホアプリ向けのカラーパレットをすぐに生成 -AI Colors
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。
Appleの白に見えるシーシェルグレー、レッドソールの魅力的な赤、世界でもっとも酷いと言われている色、デザインやイラストでよく使用する色の見識を深められる一冊 -色のコードを読む
色をどのような仕組みで感じていると思いますか？ 諸説ありますが、ヤングとヘルムホルツの学説によると、網膜の奥に赤・緑・青の波長を感知する錐体細胞があり、その波長の強弱の組み合わせを脳が色として解釈します。3種類の錐体細胞があるため「3色覚者」とよばれ、その色の組み合わせは100x100x100の100万色です。さらに4種類の錐体細胞をもつ「4色覚者」もごく僅かにいて、その人は1億の色相を見ることが可能です。 色に関するさまざまな役立つ知識、色の疑問や迷いを解決するヒントが満載の良書を紹介します。世界で最も酷い色と言われているPantone 448 Cは何のためにつくられたのか、iPhoneの白に見えるほどごく淡いグレー「シーシェルグレー」はどのようにできたのか、読んで楽しく学びもある一冊です。 本書は色に関する本ですが、よく紹介する配色本ではありません。色に関する知識やトリビアが詰まった、
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
UIデザイナーは要チェック！ 2023年、WebデザインのUIにお勧めの配色トップ7
ネオンカラーの大胆な配色、柔らかい色合いのパステルな配色、信頼感を与えるアースカラーの配色、UIのまとまりを与えるモノクロームの配色など、WebサイトのUIにお勧めの配色トップ7を紹介します。 Top 7 Colour Schemes that Will Make Your Website Stand Out in 2023 by Mohsen Kamrani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Webサイトを際立たせる色の組み合わせトップ7 終わりに はじめに Webデザインにおいて、競合他社のWebサイトから際立たせるための重要な要素の一つが「色」です。慎重に選ばれた配色はビジターを惹きつけ、ブランドのメッセージを伝え、さらには購買意欲にも影響を与えることができます。 この記事では、2023年にあなたの
2023年のトレンドカラーは、よろこびに満ちた鮮やかなレッド「ビバ マゼンタ」、HTMLのコードは「#be3455」
2023年のトレンドカラーがPantoneから発表されました。 トレンドカラーは鮮やかで紫がかったレッドの「ビバ マゼンタ（Viva Magenta）」、世界でもっとも明るい染料の一つコチニールの赤にインスパイアされたカラーです。 この活力に溢れたレッドはよろこびをあらわした新しいカラー、大胆でウィットに富み、すべての人を包み込みます。 Pantone Color of the Year 2023 PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 トレンドカラー「ビバ マゼンタ」を使用した配色 ビバ マゼンタのカラーデータ PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 2023年のトレンドカラーは、PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」です。 PANTONEのエグゼクティブ ディレクターであるLea
新しいトレンドカラーが満載！ たった3色でおしゃれな配色になるかなり使える配色本 -3色だけでセンスのいい色 Part 2
当ブログでも大好評だった「3色だけでセンスのいい色（紹介記事）」の第2弾が、ついに発売されました！ 配色が苦手な人でも、センスに自信がない人でも、たった3色だけでおしゃれな配色が完成する新発想の配色本です。 しかも早期購入キャンペーン（12/22まで）があり、書籍版を購入すると同じ内容の電子版（PDF）がもらえます。書籍版か電子版か悩む人には朗報ですね。 本書は先日発売されたばかりのアイスキャンディー本！ 第1弾は発売後Amazonで品切れが続いていたベストセラーの配色本。今回も早期購入キャンペーンがあるので、品切れになりそうな予感がします。 著者のingectar-e様は、「けっきょく、よはく。」「ほんとに、フォント。」など人気のデザイン書をたくさん手がけているので、知っている人も多いと思います。
すべてのページがワクワクする配色本！ 色の組み合わせで世界観を創り出すカラーパレットが満載 -ファンタジー配色アイデア事典
当ブログでもいろいろな配色本を紹介してきましたが、今回はイラストやデザインに役立つ魅力的な配色だけでなく、色の組み合わせで世界観を創り出す、カラーパレットを理論的に解説した配色本を紹介します。 まさに、イラストレーターや絵師さんにぴったりな最強の配色本！ 眺めているだけでもインスピレーションが刺激され、創作意欲が高まる一冊。 各ページに掲載されている描き下ろしのイラストには、実際に配色が適用されており、イラストレーターさんによると「この組み合わせで、こんなに引き立つのか」「このトーンでまとめると、統一感が出るんだ」と気づきの連続だったそうです。 配色アイデア手帖シリーズ（最新刊の紹介記事）でお馴染みの桜井 輝子氏による、ファンタジーの物語や文学のキーワードを元にした世界観設定にぴったりな配色本です。世界の美しい物語53編から、88項目のテーマと2376の配色見本が収録されたイラスト画集のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
すべてのページに美しい配色がいっぱい！ デザインで文字を扱うときにぴったりな配色本 -色数は少ないほうがかっこいい！
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
