カラー設定
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS Variable
--color: #3b82f6;
明暗パレット
Luminance scale (10-90)Advertisement
カラーコード変換・作成ツールとは？
本ツールは、Webデザインやアプリ開発に欠かせないHex（ヘックス）・RGB・HSLといったカラー形式を相互に変換し、最適な配色を支援するための高機能ツールです。 単なる変換機能だけでなく、入力した色に基づいた「明暗パレット」の自動生成や背景色に対する文字の「視認性チェック」機能を搭載。 ブラウザ上で直感的にカラーコードを管理できるため、フロントエンド開発やUI設計のスピードを劇的に向上させます。
こんなシーンで便利です
CSS変数やSassの変数定義
開発中のコードに貼り付けるためのCSSカスタムプロパティをワンクリックで生成し、実装の手間を省きます。
アクセシビリティを考慮したUI設計
選択した色が白背景や黒背景で十分なコントラストがあるかを即座に判定。誰にとっても見やすいサイト制作をサポートします。
デザインシステム・パレットの作成
ベースとなる色から9段階の明暗バリエーションを生成。ボタンのホバー状態や背景の塗り分けに使う色を簡単に抽出できます。
異なるツール間でのカラー共有
PhotoshopやFigma、Excelなど、使用ソフトによって異なるカラー形式を素早く変換してコピー＆ペーストできます。
使い方は簡単 3ステップ
- 「HEX Code」欄にカラーコードを入力するか、カラーピッカーで色を選択します。
- 「RGB」「HSL」「CSS変数」が自動生成されるので、必要な形式のコピーボタンをクリックします。
- 下部のパレットから別の明度を選択して、色の微調整を行うことも可能です。
※リフレッシュアイコンを押すと、インスピレーションを得るためのランダムな色を生成します。
ご利用時の注意点
- 入力形式について：HEXコードは3桁（#fff）および6桁（#ffffff）の両方に対応しています。
- 視認性チェックの基準：簡易的な輝度計算（YIQ）を用いています。厳密なWCAG規格の数値が必要な場合は、専門のコントラストチェッカーを併用してください。
- パレットの性質：生成されるパレットはHSLの輝度（Lightness）を調整したものです。彩度を維持したまま自然な明暗を提供します。
Advertisement
Webデザインで頻出するカラーコード早見表
主要な基本色の各形式（Hex / RGB / HSL）と、CSSでの記述例をまとめています。
| 色名（通称） | Hexコード | RGB形式 | HSL形式 |
|---|---|---|---|
| ホワイト (White) | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| ブラック (Black) | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| レッド (Red) | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| ブルー (Blue) | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| ライム (Lime) | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| イエロー (Yellow) | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| シアン (Cyan) | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| マゼンタ (Magenta) | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| シルバー (Silver) | #c0c0c0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
【エンジニア向け：透過度（Alpha）のHex変換表】
CSSのHex（#RRGGBBAA）形式で透明度を指定する際の、代表的な末尾2桁のコードです。
Hex（16進数）: Web制作で最も一般的な形式。#RRGGBBの6桁で表現します。
RGB: 光の三原色（赤・緑・青）を0〜255の数値で指定。エンジニアに馴染みの深い形式です。
HSL: 色相(Hue)・彩度(Saturation)・輝度(Lightness)で指定。直感的な色の微調整（明るくする、鮮やかにするなど）に適しており、昨今のCSS設計で推奨されています。
よくある質問（FAQ）
Q.制作中のブランドカラーや秘匿性の高い色がサーバーに記録されませんか？
A. ご安心ください。本ツールはJavaScriptによりブラウザ上ですべての計算を行っています。入力されたデータがサーバーに送信されることはなく、完全なオフライン環境と同様の安全性でご利用いただけます。
Q.ツールを利用するためにアカウント作成やログインは必要ですか？
A. 一切不要です。Toolkits Labは「登録不要・完全無料」をポリシーとしています。個人情報を取得することもないため、デザイン作業に集中してご利用いただけます。
Q.商用プロジェクトのデザイン配色に利用しても問題ありませんか？
A. はい、もちろんです。当ツールを利用して作成された配色やカラーパレットは、商用・個人問わず自由にご活用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。