CSSカラーコードジェネレーターとは？

任意の色をCSSに対応するすべての形式（HEX・RGB・RGBA・HSL・HSLA・CSS名前付き色）に変換するツールです。視覚的に色を選択するか、任意の形式で値を入力すると他のすべての形式が即座に表示されます。

使い方

1. ビジュアルピッカーで色を選択するか、HEX・RGB・HSLなどのサポートされている形式で値を入力します。
2. すべてのCSS形式で同時に表示された色を確認し、各形式をワンクリックでコピーします。
3. アルファスライダーで透明度を調整してRGBAおよびHSLAの値を取得し、必要なCSSコードをコピーします。

結果

フロントエンド開発者がブランドのオレンジ #F97316 を選択すると、rgb(249, 115, 22)、hsl(25, 95%, 53%)、その他すべての形式が即座に表示され、スタイルシート全体で一貫して使用できます。

関連ツール