Color palettes

Kinetic's skill colors a piece from a palette unless the brief gives its own colors. It has eleven curated palettes to choose from, the default and ten others, each chosen to look good on screen and checked for contrast.

Each palette in use

Pick a palette to see its colors and three frames set in it: a title, a figure on a dark ground, and a chart.

Tints, shades and gradients

The lighter and darker steps of a palette's colors are mixed, never picked by eye. A tint mixes a color toward the surface it sits on, such as the paper, and a shade mixes it toward the palette's deep ground, never toward plain white or black, so every step keeps the palette's warmth or coolness. The mixing is in OKLab, the color space CSS's color-mix() takes, where a mix looks evenly spaced to the eye and does not pass through gray on its way. The skill uses the steps 85%, 65%, 40% and 20% toward the surface and 30% and 60% toward the deep ground.

:root { --paper: #f4f2ee; --navy: #1f3a5f; --deep: #2b4a40; }

.context { background: color-mix(in oklab, var(--navy), var(--paper) 65%); }   /* a 65% tint */
.line    { stroke: color-mix(in oklab, var(--navy), var(--deep) 30%); }       /* a 30% shade */

A gradient in a background is light falling on one color. It runs over at most three neighboring steps of that color, never from one palette color to another, and it is drawn linear-gradient(in oklab, …) or radial-gradient(in oklab, …), so the browser blends it in OKLab too. There are three kinds:

• A sky: deeper toward the top and paler toward the bottom, as a sky is.
• A spot: lightest behind or beside what the frame is about, deepening toward the edges.
• A lift: the color easing into its 20% tint across the frame.

Text over a gradient meets its contrast at the gradient's worst point, and a gradient behind lines of text runs top to bottom, so each line sits on one color. A data mark has no gradient. Over a large gradient, keep the finish's grain on: a video stores 256 levels of each color, and grain hides the bands a slow gradient can step into. The same light can be sprayed instead, as a tint spray on a colored ground.

<div id="stage" data-composition-id="gradients" data-start="0" data-duration="5" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="gradients" data-start="0" data-duration="5">
        <div class="panel sky"><p data-bind-style="label">Sky</p></div>
        <div class="panel spot"><p data-bind-style="label">Spot</p></div>
        <div class="panel lift"><p data-bind-style="label">Lift</p></div>
    </div>
</div>

const { scene } = wildflower.kinetic;

// The light finish's grain over the gradients, which hides banding.
wildflower.kinetic.config({ finish: { grain: 0.08 } });

scene('gradients', {
    keyframes: {
        label: {
            opacity:    { at: [0.3, 1], to: [0, 1] },
            translateY: { at: [0.3, 1], to: [24, 0], ease: 'power2.out' },
        },
    },
});

html, body { margin: 0; background: #0a0b10; }

/* One color, its deep ground, and the steps mixed from them in OKLab. */
:root {
    --teal: #2e7c74;
    --deep: #16302d;
    --paper: #f2ece2;
    --shade: color-mix(in oklab, var(--teal), var(--deep) 30%);
    --tint: color-mix(in oklab, var(--teal), var(--paper) 20%);
}

#stage { position: relative; overflow: hidden; background: #0b0f1a; }
.layer { position: absolute; inset: 0; }

.panel { position: absolute; top: 40px; width: 380px; height: 640px; border-radius: 16px; overflow: hidden; }
.panel p { position: absolute; left: 32px; top: 40px; margin: 0; font: 800 64px system-ui, sans-serif; color: #fff; }

.sky  { left: 40px;  background: linear-gradient(in oklab, var(--shade), var(--teal) 55%, var(--tint)); }
.spot { left: 450px; background: radial-gradient(in oklab circle at 50% 40%, var(--tint), var(--teal) 45%, var(--shade)); }
.lift { left: 860px; background: linear-gradient(in oklab to right, var(--teal), var(--tint)); }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }