CSSだけで色を混ぜる、薄める、パレットを作る。
2色と混合比率を自由に変更できます。color-mix(in srgb, ...) の結果をリアルタイムでプレビュー。
color-mix(in srgb, #2563eb 50%, #f43f5e) color-mix(in srgb, color N%, transparent) で不透明度をCSSだけで制御できます。
color-mix(in srgb, #2563eb 50%, transparent) ベースカラーに white / black を混ぜて tint / shade のスケールを生成します。
--base: hsl(220 75% 50%);
--100: color-mix(in srgb, var(--base) 95%, white);
--500: var(--base);
--900: color-mix(in srgb, var(--base) 5%, black);
同じ2色でも色空間によって混合結果が異なります。特に oklch は知覚的に均一な混合を実現します。
color-mix(in srgb, #2563eb 50%, #f43f5e)
color-mix(in oklch, #2563eb 50%, #f43f5e) color-mix() を使った実践的なパターン。コードをクリックでコピーできます。
.btn:hover {
background: color-mix(in srgb, #2563eb 80%, black);
} .card {
border: 1px solid color-mix(in srgb, #1a1a1a 15%, transparent);
} --color-light: color-mix(in srgb, #8b5cf6 40%, white);
--color-dark: color-mix(in srgb, #8b5cf6 70%, black);