CSS 名前付き色の一覧はどう取得しますか？

GET https://apis-cloud.net/colors/all で全148件がJSONで返ります。1件だけ欲しいときは /colors/random、ID を指定するときは /colors/{name} を使います。

CSS 名前付き色APIに認証は必要ですか？

不要です。API キーもトークンもなく、GET するだけで使えます。CORS も全オリジンに開けているのでブラウザから直接呼べます。

CSS 名前付き色APIにはどんなフィールドがありますか？

name、hex、group、rgb、r、g、b、hsl、h、s、l、luminance、isDark の 13 個です。?fields= で必要な列だけに絞れます。検索は name、hex、group が対象です。

CSS 名前付き色API

CSS Color Module Level 4 で定義された名前付き色 148 種。hex から rgb / hsl / 相対輝度を計算して返す。

エンドポイント	`https://apis-cloud.net/colors`
件数	148 件
形式	JSON（UTF-8）
認証	不要（CORS 全オリジン許可）
ID フィールド	`name`（`hex` でも引ける）
検索対象	`name` `hex` `group`

リクエスト

curl -s "https://apis-cloud.net/colors/aliceblue"

const res = await fetch("https://apis-cloud.net/colors/aliceblue");
const data = await res.json();

import urllib.request, json

with urllib.request.urlopen("https://apis-cloud.net/colors/aliceblue") as r:
    data = json.load(r)

レスポンス 200 OK

{
  "name": "aliceblue",
  "hex": "#F0F8FF",
  "group": "blue",
  "rgb": "rgb(240, 248, 255)",
  "r": 240,
  "g": 248,
  "b": 255,
  "hsl": "hsl(208, 100%, 97%)",
  "h": 208,
  "s": 100,
  "l": 97,
  "luminance": 0.929,
  "isDark": false
}

エンドポイント

CSS 名前付き色APIは、他のリソースと同じ共通の形をしている。パラメータの詳しい説明は共通エンドポイントの節にある。

GET`/colors`	メタ情報（件数・フィールド・エンドポイント）

GET`/colors/all`	全148件

GET`/colors/random`	ランダムに1件

GET`/colors/search?q=al`	部分一致検索

GET`/colors/fields`	フィールド名の一覧

GET`/colors/getName`	name の列だけ取り出す

GET`/colors/aliceblue`	ID 指定で1件

GET`/colors/aliceblue/hex`	1件の特定フィールド

全件取得

curl -s "https://apis-cloud.net/colors/all?limit=3"

const res = await fetch("https://apis-cloud.net/colors/all?limit=3");
const data = await res.json();

import urllib.request, json

with urllib.request.urlopen("https://apis-cloud.net/colors/all?limit=3") as r:
    data = json.load(r)

フィールド

1レコードは次の 13 個のフィールドを持つ。値の例は実際の1件目から取っている。

`name`string	aliceblue
`hex`string	#F0F8FF
`group`string	blue
`rgb`string	rgb(240, 248, 255)
`r`number	240
`g`number	248
`b`number	255
`hsl`string	hsl(208, 100%, 97%)
`h`number	208
`s`number	100
`l`number	97
`luminance`number	0.929
`isDark`boolean	false

必要な列だけ取得

curl -s "https://apis-cloud.net/colors/all?fields=name,hex&limit=3"

const res = await fetch("https://apis-cloud.net/colors/all?fields=name,hex&limit=3");
const data = await res.json();

import urllib.request, json

with urllib.request.urlopen("https://apis-cloud.net/colors/all?fields=name,hex&limit=3") as r:
    data = json.load(r)

使用例

GET`/colors/tomato`

GET`/colors/%23FF6347`

GET`/colors/random`

GET`/colors/search?q=blue`

GET`/colors/all?fields=name,hex&limit=10`

GET`/colors/getHex`

ランダムに3件（seed 固定）

curl -s "https://apis-cloud.net/colors/random?count=3&seed=demo"

const res = await fetch("https://apis-cloud.net/colors/random?count=3&seed=demo");
const data = await res.json();

import urllib.request, json

with urllib.request.urlopen("https://apis-cloud.net/colors/random?count=3&seed=demo") as r:
    data = json.load(r)