Color Theory

明度

色相や彩度に関係なく、色の相対的な明るさや暗さを表す属性。

Value is one of the three fundamental properties of color alongside hue and saturation. A high-value color is light (closer to white), while a low-value color is dark (closer to black). Artists use value to create contrast, depth, and the illusion of form in their work. In grayscale, value is the only property visible. Understanding value is crucial for ensuring readability and visual hierarchy in design, as strong value contrast draws the eye more effectively than hue contrast alone.

試してみる

シェードジェネレーター

デザインシステム向けに、あらゆるベースカラーからTailwind CSSスタイルのシェードスケール（50～950）を生成します。

関連記事

CSS color-mix()：ブラウザでネイティブにカラーをブレンド

CSS color-mix()を学んでブラウザでネイティブにカラーをブレンドします。構文、カラースペース、実践的な使用例をマスターし、JavaScriptなしで動的パレットを作成します。

カラーピッカーWebコンポーネントをゼロから構築する

アクセシブルなカラーピッカーをWebコンポーネントとして構築する。Canvasレンダリング、色相スライダー、アルファチャンネル、Shadow DOMを使ったカスタムイベントの実装方法を解説。

知覚的色空間：Lab、LCH、Oklab、OKLCH

知覚的に均一な色空間について探索します——CIE Lab、LCH、Oklab、OKLCH。それぞれがどのように設計されたか、どこで優れているか、およびCSSとデザイン作業で使用するものを学びます。

プリント設計でのホイルスタンピングおよびメタリックカラー

ホイルスタンピング技術、メタリックインクオプション、金および銀ホイルの選択、プレミアムプリント材料のデザイン考慮事項について学びます。

データストーリーテリングのための色: デフォルトのグラフ色を超えて

データストーリーテリングのためのデフォルトのグラフ色を超えてください。順序付け、発散、カテゴリ別パレット、datavizのアクセス可能性、およびD3/Chart.js色スケールについて学びます。

エメラルド vs ジェード vs フォレストグリーン：グリーン比較ガイド

エメラルド（#50C878）、ジェード（#00A86B）、フォレストグリーン（#228B22）を比較します。これらの人気のある緑の色合いの視覚的および 16 進数コードの違いを学びます。