Color Properties

不透明度

色または要素が背後のコンテンツを遮断する度合いで、100%が完全不透明、0%が完全透明。

Opacity is the inverse of transparency. In CSS, opacity can be set using the opacity property (which affects the entire element and its children) or using alpha-channel color values like rgba() and hsla(). Opacity is essential for creating layered visual effects, overlay patterns, glass-morphism designs, and subtle background tints. When compositing semi-transparent colors, the visible result depends on both the foreground color and whatever is behind it, following the alpha compositing formula defined by Porter and Duff.

試してみる

カラーコンバーター

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

関連記事

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

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

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

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

CSS light-dark()関数：ネイティブテーマ切り替え

CSSのlight-dark()を使用してネイティブテーマ切り替えを行います。JavaScriptトグルとメディアクエリを、ライトモードダークモードのカラーの単一CSS関数で置き換えます。

色分解とは何か：印刷用ファイルを準備する

CMYK 色分解、スポット色プレート、トラッピング、レジストレーション マークを理解します。正しい色分解で印刷対応ファイルを準備します。

ウェブアニメーションにおける色：GSAP、Framer Motion、CSS

CSSトランジション、GSAP、Framer Motionで色アニメーションをマスターします。OKLCH補間、キーフレーム技術、パフォーマンス最適化について学びます。

CSS での色アニメーション：トランジションとキーフレーム

CSS での色アニメーション、トランジション、キーフレームアニメーション、HSL 色相回転、知覚的な滑らかさのための OKLCH 補間、パフォーマンスのベストプラクティスをマスターしてください。