CSS on Sine Diehttps://sinetris.github.io/sine-die/tags/css/Recent content in CSS on Sine DieSine Die theme for HugoDuilio Ruggieroduilio@sinetris.info© 2023 - 2026, Duilio Ruggiero2026-04-09T07:46:34ZColor Palette2023-07-16T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/palette/#atom<p>This theme uses
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables" rel="external" title="CSS custom properties for cascading variables">CSS cascading variables</a>.</p>
<p>The color palette uses a three-color combination and allows to set the primary color hue angle and the left and right secondary colors hue angle (respectively adding and subtracting from the primary hue angle).</p>
<p>The hue angle is based on the
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" rel="external" title="hsl()">hsl</a> color space but the color palette is generated using
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" rel="external" title="oklch()">oklch</a>, this make it easier to select a color hue from the HSL
<a href="/sine-die/glossary/color-wheel/">Color Wheel</a> while still taking advantage of the benefits that OKLCH provides.</p>Theme Colors2023-07-20T11:10:15+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors/#atom<h2 id="description">Description</h2>
<p>By default the theme uses the <strong>triadic color scheme</strong> (<em>secondary colors angle</em>
set to <code>120deg</code>) with the <em>primary color hue</em> angle set to <code>250deg</code>.</p>
<pre><code>:root {
/* Using default values */
--color-primary-hue: 250deg;
--colors-secondary-hue-angle: 120deg;
}</code></pre>Theme Colors (override)2023-07-20T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors-override/#atom<h2 id="description">Description</h2>
<p>In this example we override the <strong>primary color hue</strong> angle to <code>200deg</code> and the
<strong>secondary colors angle</strong> to <code>330deg</code> to have a <strong>Split-Complementary color
scheme</strong> with left and right inverted.</p>
<pre><code>:root {
--color-primary-hue: 200deg;
--colors-secondary-hue-angle: 210deg;
}</code></pre>
<p>You can see the changes right here on this page.</p>