Colour Palette

• 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.

Here's the Tidal — Ocean Teal color system. Here's the full breakdown:

Three Core Colors

Role	Color	Hue	Main Token
Primary (60%)	Ocean Teal	185°	hsl(185, 58%, 32%)
Secondary (30%)	Warm Sand	37°	hsl(37, 14%, 50%)
CTA (10%)	Tangerine	22°	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.