Color Theory

彩度

色の強度や純粋さを表す属性で、鮮やかな色相から無彩色のグレーまでの範囲で示される。

Saturation describes how pure a color appears relative to gray. A fully saturated color contains no gray and appears vivid and intense, while a completely desaturated color is a shade of gray. In the HSL model, saturation is measured as a percentage from 0% (gray) to 100% (pure color). Saturation differs from chroma in that it is relative to the color's own lightness. High-saturation colors demand attention and are effective for calls-to-action, while low-saturation colors create calm, professional atmospheres.

試してみる

カラーコンバーター

HEX、RGB、HSL、HSV、CMYK、OKLCHのカラーフォーマット間を即座に変換します。

シェードジェネレーター

デザインシステム向けに、あらゆるベースカラーから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 進数コードの違いを学びます。

シアンとターコイズの違い

シアン (#00FFFF) とターコイズ (#40E0D0) は似ていますが、色モデルの位置、彩度、用途が根本的に異なります。完全な分析です。