CSS色名をhexへ
CSSの色名tomatoは#ff6347、つまりrgb(255, 99, 71)で、どのブラウザでも同じ色で表示されます。スタイルガイドにある色名を、そのまま貼れるhexコードに変えられます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 名前
- tomato
- 元の名前
- tomato
- 16進
- #ff6347
- 6桁hex
- ff6347
- 抵抗（Ω）
- 255
CSS色名からhexへの変換ツールは、Webプラットフォームの読みやすい名前付き色—tomato、navy、coral、rebeccapurpleなどの語—を受け取り、ブラウザがその名前を描画するときに解決する正確な16進コードと赤・緑・青のチャンネル値を返します。単一のCSS識別子を貼り付けると、ツールは大文字小文字を正規化し、CSS Color Level 4の拡張名前付き色表を照合し、小文字の#rrggbb文字列、0から255までの整数チャンネル、貼り付け可能なrgb()文字列、テストで検証できる段階的な照合行を返します。
CSS名前付き色とは何か、hexの導出方法
カスケーディングスタイルシートは、すべてのモダンブラウザが同じsRGB三つ組に対応付ける、固定の拡張名前付き色語彙を定義します。スタイルシートがcolor tomatoやbackground rebeccapurpleと書くとき、エンジンは色をでっち上げません。
標準表の百四十八の名前—英国・米国のgrey/gray表記とLevel 4追加のrebeccapurpleを含む—を通じてキーワードを三つの8ビットチャンネルに解決します。それらのチャンネルは、デザインツール、デザイントークン、メールHTMLが日常的に使うおなじみの16進形式#RRGGBBに詰め込まれます。
tomatoでは表が赤255、緑99、青71を与え、#ff6347としてパックされます。navyではチャンネルは0、0、128でhexは#000080です。二つの名前が同じ三つ組を共有でき—aquaとcyanは同じ純シアン—英語の近義語が常にWeb名とは限らないからです。
この変換器はまさにその表引きを行います。任意の引用符と周囲の空白を切り、識別子を小文字化し、hexコードや関数色記法に見えるものを拒否し、パックされたhexと三つの整数を出力します。
教室演習やデザイン引き渡しはブランド資料の名前から始まることが多く、決定的な参照があれば大文字小文字、綴り変異、マーケティング語が本当にCSSキーワードかどうかに関する曖昧さを除けます。
実務上のヒント、制限、関連検索
スタイルシートやデザインシステムがすでに使う正確なCSSキーワードを送ることを優先してください。チケットでの表記がcamel風の混在大文字でも構いません。応答は常に小文字のnameと小文字の6桁hexに正規化するため、下流の差分が安定します。
#ff6347のようなhexコードやrgb(255, 99, 71)のような関数記法は渡さないでください—このランディングは意図的に名前付きキーワードに限定され、表の見逃しを黙って失敗させるのではなく気づけるようそれらの形式を拒否します。transparentとcurrentcolorはここでは不透明hexに写像されません。
アルファやシステム色が必要なら別ツールを使ってください。単体テストを書くときは、tomatoのような一般名、rebeccapurpleのようなLevel 4名、grey/grayの綴り対、混在大文字入力、意図的な未認識語を少なくとも一つずつカバーし、検証の退行がすり抜けないようにします。
このページはCSS色名からhexへの変換、tomatoのhexコード、名前付き色から#RRGGBB、rebeccapurpleのhexをオンラインで探す人向けです。hexからRGBへの分割器でも、HSL・LAB・CMYKの完全な複数空間変換でも、画像からのパレット抽出でもありません。
すでにCSSキーワードがありhexトークンやチャンネル整数だけが必要なときにこの機能を選び、元がすでにhexならhexからRGBへの変換器を使ってください。
活用例
名前付きブランド色からのデザイントークン引き渡し
デザイナーがスタイルガイドにCSS名でブランド色を列挙し、エンジニアが各名前を貼ってトークンとチケット用の正確な#rrggbbとrgb()値を受け取ります。
よくある質問
どの色名がサポートされますか？
CSS Color Level 4の拡張名前付き色148色すべてです。rebeccapurpleと、標準が定義するgray/grey両表記を含みます。大文字小文字は無視されます。
#ff6347のようなhexコードを渡せますか？
いいえ。 このツールは名前からhexへの変換のみです。hexからRGBへは、hexからRGBへの変換器を使ってください。
aquaとcyanは同じですか？
はい。 CSS表では両名とも同じ三つ組(0, 255, 255)と同じhex #00ffffに対応します。
tomatoのhexコードは何ですか？
tomatoは#ff6347で、赤255、緑99、青71です。最新のブラウザはどれも、tomatoという名前をまさにこの色で表示します。
色名の大文字と小文字は区別されますか？
区別されません。Tomato、tomato、DarkSlateGrayのどれでも使えます。結果は常に小文字の色名と小文字のhexコードで返ります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/name-hex \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"name":"tomato"}'const res = await fetch("https://api.kit.forhosting.com/color/name-hex", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": "tomato"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/name-hex",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"name": "tomato"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/name-hex", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"name":"tomato"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"name":"tomato"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/name-hex", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"name": "tomato"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_hex",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_name_chars | 64 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
未認識の名前、裸のhexコード、rgb()やhsl()の関数記法、空白を含む複数語の句は、色を捏造せず明確なinvalid_inputエラーで失敗します。経路は純粋な決定的な表引き—ネットワークなし、乱数シードなし、壁時計依存なし—なので、無料のブラウザ実行器と前払いAPIは呼び出すたびに同じJSONを返します。
APIの呼び出し方と返却内容
有効な例はtomato、Tomato、rebeccapurple、DarkSlateGray、lightskyblueです。周囲の空白は切り、任意の引用符は除き、CSS色名は大文字小文字を区別しないため文字は大文字でも小文字でも構いません。必須の文字列フィールドnameを持つJSON本体を送信します—エイリアスcolor、value、text、input、color_nameは同じソルバーが受け付けます。成功時の応答は、正規の小文字キーとしてのname、切り詰め済み元文字列としてのname_raw、正規化された小文字#rrggbb文字列としてのhex、ハッシュなしのhex6、整数フィールドr・g・bとred・green・blueエイリアス、三つの数のrgb配列、rgb(r, g, b)形式のcss文字列、短いメッセージ、正規化キーと各チャンネルからhexへの行を示すsteps配列を返します。検証失敗—欠落フィールド、空文字、非文字列型、ハッシュの有無を問わないhexコード、rgb()やhsl()形式、複数語句内の空白、A–Z外の文字、公開上限を超える長さ、名前付き色表にない任意の文字列—はinvalid_inputを返し、課金されません。料金は成功リクエストごとに固定の$0.002で、単位はitem、限界単価はゼロです。
実務上のヒント、制限、関連検索
invalid_inputを返す失敗タスクは前払い残高を消費しないため、学習者が不完全なクリップボード値を貼っても探索スクリプトとフォーム検証を安価に保てます。
連携の活用例
テーマとパレットfixtureの単体テスト
CSSキーワードから既知のhexとRGB三つ組を固定し、視覚退行とコントラスト比テストが安定したチャンネル値を検証できるようにします。
コンテンツとCMSの色フィールド
編集者がCMS欄にtomatoやnavyを入力し、バックエンドがCSS変数やメールテンプレートを書く前にキーワードをhexに解決します。
技術的な質問
名前がCSS色でない場合はどうなりますか？
APIは名前が未認識であるというメッセージ付きのinvalid_inputを返します。検証失敗には課金されません。
CSS色名からhexへの変換は無料ですか？
ブラウザ実行器では無料です。API経由では成功した変換がリクエストごとに固定の$0.002で課金され、invalid_inputの結果は課金されません。