入力
URL保存
プリセット
配色
調整
振れ幅
50%落ち着き ←→ 鮮やか
色数
パレット
役割主色
調整
役割補助
調整
役割差し色
調整
役割明色
調整
役割余白
調整
階調50-950
主色 / #E53E3E
補助 / #EB6447
差し色 / #028641
明色 / #6BBC67
余白 / #FBE6E1
書き出し
Web / Tailwind
/* PaletteQL CSS variables
* --ql-color-{id}-on は白/黒のうちコントラスト比が高い推奨文字色。
* 例: background: var(--ql-color-base); color: var(--ql-color-base-on);
* 例: background: color-mix(in oklch, var(--ql-color-base) 12%, white);
* 例: border-color: color-mix(in oklch, var(--ql-color-base) 60%, transparent);
*/
:root {
--ql-color-base: #E53E3E;
--ql-color-base-oklch: oklch(61.4% 0.204 25.6);
--ql-color-base-on: #111111;
--ql-color-support: #EB6447;
--ql-color-support-oklch: oklch(66.8% 0.173 34.0);
--ql-color-support-on: #111111;
--ql-color-accent: #028641;
--ql-color-accent-oklch: oklch(54.2% 0.194 151.6);
--ql-color-accent-on: #FFFFFF;
--ql-color-highlight: #6BBC67;
--ql-color-highlight-oklch: oklch(72.2% 0.143 143.2);
--ql-color-highlight-on: #111111;
--ql-color-quiet: #FBE6E1;
--ql-color-quiet-oklch: oklch(94.0% 0.024 33.6);
--ql-color-quiet-on: #111111;
}CSS変数として貼り付け。Webサイト/アプリのテーマ設定に。oklch値と推奨文字色 (-on) 入り。