Color Models

HSL

色相・彩度・輝度（明度）で色を記述する円筒形カラーモデルで、人間が直感的に色を選べるよう設計されている。

HSL represents color as an angle on the color wheel (hue, 0-360), a percentage of color intensity (saturation, 0-100%), and a percentage of lightness (0-100% where 0% is black and 100% is white). At 50% lightness, the pure hue is displayed. HSL is widely used in CSS (the hsl() function) because it makes it easy to create tints, shades, and tones by adjusting a single parameter. It is more intuitive than RGB for design work but has the limitation of not being perceptually uniform, meaning equal numeric changes do not always produce equal visual changes.

試してみる

カラーコンバーター

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

関連記事

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

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

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

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

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

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

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

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

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

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

色 API の設計：色データの REST エンドポイント

色の変換、検索、コントラストチェック、パレット生成のためのエンドポイントで RESTful 色 API を設計します。スキーマ設計とベストプラクティスを学びます。