Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
:root { --brand: #1a73e8; --white: #ffffff; --black: #000000; } /* 20% brand colour — a very light tint */ .tint-20 { background: color-mix(in srgb, var(--brand) 20%, var(--white)); } /* 80% brand colour — a strong shade */ .shade-80 { background: color-mix(in srgb, var(--brand) 80%, var(--black)); } /* Vibrant mid-blend using oklch */ .mix-oklch { background: color-mix(in oklch, #ff6b6b, #6b6bff); } /* Disabled button — 40% of brand mixed with white */ .btn:disabled { background: color-mix(in srgb, var(--brand) 40%, var(--white)); cursor: not-allowed; } /* Semi-transparent overlay via partial percentages */ .overlay { background: color-mix(in srgb, navy 50%, transparent); }
Result
Open