Fluid iOS Violet
Smooth deep violet palette tailored for mobile interfaces, iOS applications, and sleek dark modes.
#App UI#Creative
COLOR 1
#180F33
Elderberry
COLOR 2
#491F79
Rebecca Purple
COLOR 3
#7C3AED
Violet 600
COLOR 4
#A78BFA
Medium Purple
COLOR 5
#F5F3FF
Magnolia White
Suitable Design Applications
iOS Mobile ApplicationsModern Fintech WalletsPersonal AI AssistantsSubscription Management
Visual Psychology & Mood
Friendly, modern, premium, and seamless.
Editorial Application Advice
Smooth Apple-inspired violet and soft lilac. Uses glassmorphic frosted surface layers with subtle 1px border strokes for native tactile depth.
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #180F33;
--color-2: #491F79;
--color-3: #7C3AED;
--color-4: #A78BFA;
--color-5: #F5F3FF;
}Role-Based WCAG Contrast Audit
Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:
Sample Text
#180F33 on #A78BFA6.68:1
Normal Text AA Pass
Sample Text
#180F33 on #F5F3FF16.58:1
Normal Text AA Pass
Sample Text
#491F79 on #A78BFA4.40:1
Large Text Only (Pass)
Sample Text
#491F79 on #F5F3FF10.91:1
Normal Text AA Pass
Sample Text
#7C3AED on #A78BFA2.09:1
Large Text Only (Fail)
Sample Text
#7C3AED on #F5F3FF5.20:1
Normal Text AA Pass
Related Palettes in App UI
Explore App UIFrequently Asked Questions About Fluid iOS Violet
Production design guidance and accessibility rules for applying the Fluid iOS Violet (App UI) color palette.
What is the recommended role hierarchy for the Fluid iOS Violet palette?
In digital interface design, allocate #180F33 and #F5F3FF for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #491F79 or #7C3AED as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Fluid iOS Violet WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Fluid iOS Violet palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.