HueOdysseyCool Color Palettes
Explore cool color palettes with semantic roles, accessible contrast, live interface previews, and CSS-ready HEX values.
background#F0F9FF
surface#FFFFFF
secondary#0F766E
primary#0369A1
accent#7C3AED
muted#5B7184
text#0F172A
How the colors relate
Blue establishes precision, teal adds a related but distinct secondary signal, and violet provides a controlled contrast for emphasis.
Where to use each role
Use blue for primary actions, teal for supporting controls or data, violet sparingly for emphasis, and pale blue-white for spacious surfaces.
A useful variation
Reduce violet and add a muted warm accent when the interface needs a clearer focal point without losing its cool foundation.
Related directions
Frequently asked questions
How can a cool palette avoid feeling impersonal?
Use warmer neutrals, human imagery, or one restrained warm accent. The functional blue and teal roles can remain unchanged.