Colour Palette

Commentary

These are common color helpers that decorate text and HTML elements. Element color helpers also decorate element borders and are typically used by buttons.

Light and dark versions for the element colours are also available. These are typically used to show hover states or can be used for clicked states or any other feedback indications.

This theme was generated by Claude Sonnet 4.6 with the prompt: Design a three-color theme for a saas style website. The primary color should be authoritative but very approachable and comfortable for a user. The secondary color should support the primary color. The third color should be a complement of the primary color. Primary color should be used on 60% of the website. The secondary color should be used on 30% of the website. The complementary color should be used on 10% of the website and be used for calls to action. For the proposed colors, ensure that they meet web accessibility guidelines and also provide hsl values. Add hsl colors for link, success, warning and danger indicators.

AI response: Here's the Tidal — Ocean Teal color system. Here's the full breakdown: Three Core Colors RoleColorHueMain TokenPrimary (60%)Ocean Teal185°hsl(185, 58%, 32%)Secondary (30%)Warm Sand37°hsl(37, 14%, 50%)CTA (10%)Tangerine22°hsl(22, 94%, 53%) The teal at hue 185° sits between blue and green — authoritative like corporate blue but approachable like green, without fully committing to either. The warm sand grounds it with organic warmth so long work sessions don't feel cold. The tangerine is the true complement (hue 185° + 180° = 5°, shifted to 22° for friendliness rather than alarm). Four Semantic Colors Link — Pure blue hue 240°, perceptually distinct from both teal and tangerine Success — Emerald hue 152°, adjacent to teal so it feels native to the palette Warning — Amber hue 38°, shares the warm family with CTA but muted to read cautionary Danger — Brick red hue 4°, desaturated from pure red to harmonise with warm sand Accessibility — 18 critical pairs tested, all pass AA or better. 12 reach AAA.

Usage