スマートフォンでも使えますか？

はい。CSSカラー関数ガイドはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

透明度（アルファ値）は扱えますか？

CSSカラー関数ガイドの処理内容によりますが、rgba()やhsla()の表記が必要な場合はそれぞれに対応したツールを使用してください。HEXの8桁形式（#RRGGBBAA）もアルファ値を含みます。

カラー無料登録不要

CSSカラー関数ガイド

CSSの色指定関数(rgb/hsl/hwb/oklch/color-mix等)の書き方と例を表示する無料オンラインツール。

Input

Result

--- 従来の書き方 ---
color: #3b82f6;
color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.8);
color: hsl(217, 91%, 60%);
color: hsla(217, 91%, 60%, 0.8);

--- 新しい書き方 (CSS Color 4) ---
color: rgb(59 130 246);          /* カンマなし */
color: rgb(59 130 246 / 80%);    /* 透明度 */
color: hsl(217 91% 60% / 80%);
color: hwb(217 23% 4%);          /* 色相 白 黒 */
color: lab(58% 0 -60);           /* Lab色空間 */
color: oklch(63% 0.2 252);       /* OKLCh (推奨) */

--- color-mix() ---
color: color-mix(in srgb, red, blue);
color: color-mix(in srgb, #3b82f6 70%, white);
color: color-mix(in oklch, red, blue);

--- relative color ---
color: oklch(from var(--primary) l c h);
color: oklch(from var(--primary) calc(l + 0.1) c h);  /* 明るく */
color: oklch(from var(--primary) l calc(c * 0.5) h);   /* 彩度下げ */

--- ブラウザ対応 ---
rgb/hsl: 全ブラウザ
hwb/lab: Chrome 101+, Safari 15+
oklch: Chrome 111+, Safari 15.4+
color-mix: Chrome 111+, Safari 16.2+

FAQ

よくある質問

ページを一度読み込んだあとは、多くの処理がブラウザ内で完結するためネットワーク接続が切れても動作します。ただし初回アクセス時はオンラインが必要です。

こちらもおすすめ

CSS色混合

2色を指定比率で混合した新しい色を計算する無料オンラインツール。

アクセシブルカラー生成

WCAG 2.1のコントラスト比基準（AA/AAA）を満たす色の組み合わせを自動生成。アクセシビリティ対応のWebデザインに。無料オンラインカラーツール。

ANSIカラー一覧

ANSI 16色のコード一覧を表示する無料オンラインツール。ANSIカラー一覧をブラウザ上で即座に実行でき、カラーツールとして登録不要で利用できます。

ブランドカラー一覧

主要ブランドのブランドカラーを一覧表示する無料オンラインツール。

CMYK→HEX変換

CMYKカラー値をHEXに変換する無料オンラインツール。

コントラスト比チェッカー

文字色と背景色のコントラスト比をWCAG 2.1基準（AA/AAA）でチェック。アクセシビリティ準拠の色選びに。無料オンラインツール。

読み込み中...