Portfolio Personal UI Gradient: Sky → Blue (Cool-gradient)
A professional sky-blue gradient palette designed for portfolio personal interfaces. This cool-gradient style color scheme is optimized for modern web and mobile applications, providing excellent contrast and visual appeal.
Preview · The Contextual Visualizer
Overview
Switch templates to see this palette in Admin Dashboard, Pricing Page, and Mobile Profile contexts.
Accessibility & Contrast
Real-time Contrast
Design Intent & Use Cases
- •Create a calm and professional portfolio look
- •Highlight personal projects
- •Support modern, minimalistic design
Color Psychology
Oceanic Dream combines Sky Blue (#0EA5E9) with Cyan (#22D3EE) to create a sense of flow, clarity, and depth. It evokes the feeling of water—adaptable, clear, and refreshing. For a freelancer or consultant, this palette subconsciously communicates that you are easy to work with, transparent in your process, and bring a fresh perspective to problems.
Best Usage Context
Excellent for developers, UX designers, or consultants. It feels 'techy' without being cold. Use the gradient for your project cards or case study headers. The cool tones recede visually, allowing your actual work (screenshots, designs) to take center stage. It pairs perfectly with glassmorphism effects.
Accessibility & Contrast
This palette prioritizes clarity. The light blue text (#E0F2FE) on the dark navy background (#0F172A) provides a soothing, high-contrast reading experience (13:1 ratio). The primary button uses dark text on the blue background, avoiding the common mistake of white-on-light-blue which often fails accessibility checks.
Color Palette
Gradient Presets
linear-gradient(135deg, #0EA5E9 0%, #22D3EE 50%, #2563EB 100%)radial-gradient(circle at center, #2563EB 0%, #22D3EE 50%, #0EA5E9 100%)Copy & Use
:root {
--color-primary: #0EA5E9;
--color-accent: #2563EB;
--bg-page: #020617;
--bg-surface: #0F172A;
--border-color: rgba(255,255,255,0.1);
--text-primary: #E0F2FE;
--text-secondary: #BAE6FD;
--button-primary-bg: #0EA5E9;
--button-primary-text: #020617;
--button-secondary-bg: #1E3A8A;
--button-secondary-text: #E0F2FE;
}Best for
✓Best for
- Portfolio websites
- Personal brand sites
- Tech and design showcases
- Freelancer portfolios
✕Not recommended for
- Corporate enterprise dashboards
- Admin panels
- Data-heavy applications