Iris Twilight Study
Soft teal deepens into cool purples, then warms toward blush pink, evoking twilight reflected in still water.
Psychology
The palette anchors in cool, muted teals and blues that recede visually, creating a grounded foundation, while mid-tone purples bridge toward warmer pinks that feel intimate and approachable. This progression from cool to warm generates visual movement without tension, as low chroma across all five colors softens contrast and invites calm rather than stimulation.
The triadic structure and balanced lightness curve prevent monotony while maintaining coherence, allowing the eye to rest without feeling static.
The triadic structure and balanced lightness curve prevent monotony while maintaining coherence, allowing the eye to rest without feeling static.
Usage
Ideal for luxury skincare and wellness branding, where the cool-to-warm shift suggests both professional calm and personal comfort, and literary or editorial packaging that benefits from the palette's sophisticated, introspective quality.
Fashion lookbooks and interior styling photography gain depth and sophistication from this range, which reads as curated rather than random while remaining accessible to broad audiences.
The moderate contrast suits premium hospitality collateral and lifestyle app interfaces where elegance requires restraint.
Fashion lookbooks and interior styling photography gain depth and sophistication from this range, which reads as curated rather than random while remaining accessible to broad audiences.
The moderate contrast suits premium hospitality collateral and lifestyle app interfaces where elegance requires restraint.
Code
CSS Gradient
/* CSS gradient approximation of mesh gradient */
/* Note: This is a linear approximation. For the full animated mesh effect, use the React/JS export. */
background: linear-gradient(
90deg,
#255d6c 0%,
#5d73a3 25%,
#9c89b5 50%,
#d4a0cd 75%,
#f9c8e7 100%
);Tailwind v4
/* app.css — Tailwind v4 */
@theme {
--color-gradient-1: #255d6c;
--color-gradient-2: #5d73a3;
--color-gradient-3: #9c89b5;
--color-gradient-4: #d4a0cd;
--color-gradient-5: #f9c8e7;
}
/* Usage: bg-gradient-1, text-gradient-2, etc. */CSS Variables
--color-1: #255d6c; --color-2: #5d73a3; --color-3: #9c89b5; --color-4: #d4a0cd; --color-5: #f9c8e7;
Hex values
#255d6c, #5d73a3, #9c89b5, #d4a0cd, #f9c8e7
Building something? Get this palette via the REST API.
History
Similar palettes
Neon Bloom Dusk
Silk Hour Reverie
Periwinkle Linen Study
Jade Hour Glow
Twilight Alchemy
Neon Descent Study
Pastel Lagoon Study
Lavender Milk Hour
Slate Pool Breath