カラー

カラー変換

色を HEX、RGB、HSL、CSS 表記の間で変換します。

色を選択

HEX 値

HEX

#00c16a

HEX (短縮)

#00c16a

RGB

rgb(0, 193, 106)

RGBA

rgba(0, 193, 106, 1)

HSL

hsl(153, 100%, 38%)

HSLA

hsla(153, 100%, 38%, 1)

CSS 変数

--color: #00c16a;

Tailwind 任意値

bg-[#00c16a]

関連ガイド

HEX、RGB、HSL、そして新しい色空間HEX、RGB、HSL、LCH、OKLCH が互いにどう関係するのか、HSL で作ったパレットが中間調で濁る理由、そして色域のクリッピングとアルファ合成が最終的な色に何をするのかを解説します。推測に頼らず WCAG の色コントラストを満たすコントラスト比が何を測っているのか、テキストと UI コンポーネントに対する AA と AAA のしきい値、そして毎回静かに不合格になる白地にグレーという失敗について解説します。

関連ツール

パレット生成

1 つのベースカラーから明度違いや配色パターンを作ります。

カラー

コントラストチェック

前景色と背景色の組み合わせを WCAG AA・AAA で判定します。

カラー