CSSカラー形式を変換:HEX・RGB・HSL・CMYK
デザインソフトを開いたり計算式を書き直したりせず、HEX、RGB、HSL、CMYKの間で色を変換できます。完全な色表現を入力して変換先を選ぶと、コピーしやすい正規化済みの値が得られます。計算前に記法を検証し、数値チャンネルを有効範囲へ収めます。不正な入力を推測で補わず明確なエラーにするため、CSSの編集だけでなく、再現性が必要な自動処理にも安心してお使いいただけます。
無料で実行
完全な色表現をご入力ください
対応する記法は、<code>#f80</code>や<code>#ff8800</code>のような3桁または6桁のHEX、コンマ区切りの<code>rgb()</code>、百分率を使う<code>hsl()</code>と<code>cmyk()</code>です。RGBには3チャンネル、HSLには色相と2つの百分率、CMYKには4つの百分率が必要です。HEXの番号記号と必要なパーセント記号は省略しないでください。コンマ周辺の空白は使用できます。厳密な文法により、不完全な値が別の色として解釈されることを防ぎます。アルファチャンネル、CSS色名、空白区切りの新しいCSS記法、その他の色空間には対応していません。4形式のいずれにも合わない場合は、不確かな結果ではなく入力エラーを返します。
範囲補正と丸めの仕組み
構造の検証後、各チャンネルをモデルごとの範囲に収めます。RGBは0から255、HSLの色相は0から360、彩度と明度は0から100パーセントです。CMYKの各成分も0から100パーセントです。そのため、<code>rgb(300, -8, 20)</code>は<code>rgb(255, 0, 20)</code>と同じ色になります。ただし、欠けたチャンネル、誤った関数名、抜けたパーセント記号は修復しません。変換には決定的なsRGB演算を使います。HEXとRGBは整数へ丸め、HSLとCMYKは不要な末尾ゼロを除いた小数第2位までを保持します。応答には検出元と変換先の形式も含まれるため、自動処理でも解析経路をご確認いただけます。
CSSや運用処理での活用方法
応答には、コピー可能な正規化済みの値と、変換元・変換先の短いラベルが含まれます。HEXは大文字6桁で出力し、RGB、HSL、CMYKではコンマと空白を常に同じ形にします。デザイントークンをライブラリ仕様へ合わせる、取り込んだテーマを検証する、フォームの色を画像処理依存なしで統一する、といった用途に適しています。ここでのCMYKは数学的変換であり、印刷機固有のICCプロファイルや実際のインク色を保証しません。アルファも保持しません。個別変換にはブラウザーが便利です。APIは1件$0.002で、同じ決定的な処理をスクリプト、ビルド、テスト、管理された一括処理から利用できます。
活用例
デザイントークンの統一
混在するHEX、RGB、HSL、CMYKを、トークンファイルが必要とする単一の記法へ変換します。
CSS値の準備
受け取った色を、スタイルシートへ貼り付けられる整ったHSL、RGB、HEX表現に変換します。
取り込み色の検証
不正なレコードを拒否し、構造が正しい範囲外チャンネルだけを安全に補正します。
よくある質問
API変換の料金はいくらですか?
APIリクエストは1件$0.002です。ブラウザーツールは個別の対話的な変換にご利用いただけます。
どの入力形式に対応していますか?
3桁または6桁HEX、3チャンネルのrgb()、色相と2つの百分率を持つhsl()、4つの百分率を持つcmyk()です。
チャンネルが範囲外の場合はどうなりますか?
正しい構造の数値を、RGBは0–255、色相は0–360、HSLとCMYKの百分率は0–100へ収めます。
アルファチャンネルに対応していますか?
対応していません。アルファ付きHEX、rgba()、hsla()は不正な入力として拒否します。
不正な入力を自動修正しないのはなぜですか?
欠けた構文の推測は意図した色を変える恐れがあります。数値の範囲超過だけを補正します。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/color-format-convert \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#ff8800","target_format":"hsl"}'const res = await fetch("https://api.kit.forhosting.com/web/color-format-convert", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#ff8800",
"target_format": "hsl"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/color-format-convert",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#ff8800",
"target_format": "hsl"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-format-convert", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#ff8800","target_format":"hsl"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#ff8800","target_format":"hsl"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-format-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#ff8800",
"target_format": "hsl"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.color_format_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |