Tools

PaletteQL

PaletteQL

ベース色とハーモニーを選ぶだけで実用パレットを生成。スウォッチごとにロック + 再生成、画像からのドミナント抽出、URL共有、Adobe ASE / Photoshop ACO / GIMP GPL / Procreate .swatches / DaVinci .cube LUT / CSS変数 / Tailwind / JSON / HEX / PNG への書き出しに対応します。

What it does

ハーモニー7種 + シェード50–950 階調生成
色ロック + 再生成、画像ドミナント抽出、URL共有
ASE / ACO / GPL / Procreate / Cube LUT / Tailwind を直書き出し

Base

状態はURLに残ります

Harmony

色相が180°離れた構成。コントラストが強い。

Variance

50%

落ち着き ←→ 鮮やか

Swatch Count

Palette

5 色構成

Role / baseBase

主役色。サムネやCTA、キャラクターの基準色。

oklch(61.4% 0.204 25.6)

Role / supportSupport

情報量を増やすサブ色。階層を作る。

oklch(66.8% 0.173 34.0)

Role / accentAccent

視線誘導用のアクセント。小面積で使う。

oklch(54.2% 0.194 151.6)

Role / highlightHighlight

ハイライトや背景の差し色。

oklch(72.2% 0.143 143.2)

Role / quietQuiet

余白や下地に。色味を薄く残す。

oklch(94.0% 0.024 33.6)

Shade Ramp

OKLCH L 等差 (50–950)

Base / #E53E3E

Support / #EB6447

Accent / #028641

Highlight / #6BBC67

Quiet / #FBE6E1

Preview

Normal vision

Light composition

New Release

PaletteQL
in action

Thumbnail / 投稿サムネ

主役/支配色/アクセント/背景の役割

Highlight Accent

Dark composition

New Release

PaletteQL
in action

Thumbnail / 投稿サムネ

主役/支配色/アクセント/背景の役割

Highlight Accent

Character Test

Hair / Skin / Eye / Outfit role mapping

Video Grade Strip

Stop 0%#028641
Stop 25%#E53E3E
Stop 50%#EB6447
Stop 75%#6BBC67
Stop 100%#FBE6E1

Cube LUT (sorted by L) のラフプレビュー

Accessibility

WCAG 2.2 / Color Vision Simulation

全色ペアのコントラスト比
FG / BGBaseSupportAccentHighlightQuiet
Base—
1.27Fail
1.13Fail
1.77Fail
3.44AA Lg
Support
1.27Fail
—
1.44Fail
1.40Fail
2.72Fail
Accent
1.13Fail
1.44Fail
—
2.01Fail
3.90AA Lg
Highlight
1.77Fail
1.40Fail
2.01Fail
—
1.94Fail
Quiet
3.44AA Lg
2.72Fail
3.90AA Lg
1.94Fail
—

Export

絵師/動画師の現場で読み込める形式

:root {
  --ql-color-base: #E53E3E;
  --ql-color-base-oklch: oklch(61.4% 0.204 25.6);
  --ql-color-support: #EB6447;
  --ql-color-support-oklch: oklch(66.8% 0.173 34.0);
  --ql-color-accent: #028641;
  --ql-color-accent-oklch: oklch(54.2% 0.194 151.6);
  --ql-color-highlight: #6BBC67;
  --ql-color-highlight-oklch: oklch(72.2% 0.143 143.2);
  --ql-color-quiet: #FBE6E1;
  --ql-color-quiet-oklch: oklch(94.0% 0.024 33.6);
}

Web / Tailwind

:root に --ql-color-* と --ql-color-*-oklch を出力します。OKLCH側はモダンブラウザで広色域を保ったまま使えます。