ForHosting KIT · 開発者向けツール

HEXカラー省略形を展開

HEXカラー省略形展開ツールは、3桁のコンパクトなCSSカラーを同等の6桁表記へ変換します。#3a7を入力すると、スタイルシート、デザイントークン、設定ファイル、長い表記を求めるAPIですぐ使える#33aa77が得られます。展開前に入力全体を検証するため、6桁の色、アルファ付き形式、誤った文字、不完全な値には明確なエラーを返します。出力は小文字に統一され、CSSへ直接貼り付けられるよう先頭に必ず#が付きます。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

3桁のHEX表記を展開する仕組み

通常のCSSのHEXカラーは、赤、緑、青の各チャンネルを2桁ずつで表します。省略形では各チャンネルが1桁だけです。展開時にゼロを加えたり近い色を推測したりはせず、元の各文字をそのまま2回並べます。そのため#3a7は#33aa77になります。赤の3は33、緑のaはaa、青の7は77となり、CSSの規則で省略形が示す色を正確に保ちます。16進文字は大文字と小文字のどちらでも受け付け、結果は色を変えずに小文字へ統一します。入力の先頭の#は任意です。表計算、コマンドライン、フォームなどでは#なしの値も多いためです。完全な出力には常に#が付き、別のフィールドでは接頭辞なしの6文字も返します。色空間の変換や丸めは行わず、文字を直接かつ決定的に変換します。

有効な入力の条件

有効な入力は、任意の先頭#を除いた後に16進文字がちょうど3桁ある文字列です。0から9、およびAからFを大文字または小文字で使用できます。#09f、abc、F0Cは有効ですが、#12、#1234、#112233、red、0xabc、#gggは無効です。似た形式でも意味が異なるため、この厳密な規則が必要です。4桁はアルファチャンネル付き省略形、6桁は展開済みの色を表す場合があります。それらを黙って受け入れると機能の目的が変わってしまいます。フォームやクリップボードから使いやすいよう外側の空白は除去しますが、色の途中の空白は認めません。数値では先頭の重要なゼロが失われる可能性があるため、入力は文字列でなければなりません。検証に失敗すると、APIは必要な3桁形式を説明する無効入力エラーを返します。自動処理でも誤りを検出でき、不正な値がスタイルシートやトークン集へ保存されるのを防げます。

展開した色を処理で利用する方法

後続ツール、スキーマ、チーム規約が6桁の色を要求する場合に展開値をご利用ください。移行スクリプトでは古いトークンを比較前に統一でき、デザインシステムのインポーターではコンパクトな値を正規トークンとして保存する前に変換できます。検証パイプラインでは、誤って入った色名やアルファ形式を入口で拒否できます。出力は安定した小文字なので、大文字と小文字が異なる入力でも同じ正規値になり、差分やキャッシュキーを整理できます。ブラウザー実行機能とAPIは同じ純粋な展開ロジックを使うため、画面で確認した値は自動化しても同じ結果になります。外部ネットワークや色データベースには依存しません。hexフィールドへ省略色を送り、CSS用にはexpanded、独自の接頭辞を付ける形式にはexpanded_no_hashをご利用ください。API実行は1回$0.002です。RGB、HSL、色名、混色、コントラストが必要な場合は専用の色変換機能をご利用ください。

活用例

デザイントークンを統一

保存や比較の前に、短い値を小文字の一貫した6桁カラーへ変換します。

厳格な処理向けにCSSを準備

完全な#RRGGBB表記を要求するリンター、生成ツール、スキーマ向けに省略色を展開します。

取り込んだ色データを検証

フィード内の正しい3桁値を変換しながら、不正な文字や長さを拒否します。

よくある質問

展開では何を行いますか？

省略形の各桁を2回並べます。たとえば#3a7は#33aa77になります。

先頭の#は必要ですか？

いいえ。#abcとabcの両方を受け付け、expandedフィールドには必ず先頭の#が付きます。

大文字も使用できますか？

はい。AからFは大文字でも小文字でも使用でき、出力は小文字に統一されます。

6桁や4桁の色を送れますか？

いいえ。この機能は16進文字をちょうど3桁だけ受け付け、ほかの長さには無効入力エラーを返します。

APIリクエストの料金はいくらですか？

APIリクエストは1回$0.002です。同じ決定的な展開処理をブラウザーでもご利用いただけます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/hex-shorthand-expand

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/hex-shorthand-expand \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#3a7"}'

const res = await fetch("https://api.kit.forhosting.com/color/hex-shorthand-expand", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hex": "#3a7"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hex-shorthand-expand",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hex": "#3a7"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-shorthand-expand", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hex":"#3a7"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hex":"#3a7"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-shorthand-expand", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "hex": "#3a7"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hex_shorthand_expand",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →