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
Frequently asked questions
What colors are in the Oceanic Dream?
The Oceanic Dream is built around a dominant color (#0EA5E9), a support tone (#22D3EE), and an accent color (#2563EB). These are organized into semantic roles—background, surface, border, text, and primary action—so the palette maps directly onto a design token system rather than a loose set of swatches.
What is the Oceanic Dream best used for?
This palette is curated for portfolio / personal. It works especially well for portfolio websites, personal brand sites, tech and design showcases, and freelancer portfolios. It is less suited to corporate enterprise dashboards, admin panels, and data-heavy applications, where a different contrast or saturation balance usually works better.
Does the Oceanic Dream meet accessibility contrast standards?
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.
How do I use the Oceanic Dream in CSS or Tailwind?
Every color in the Oceanic Dream ships as copy-ready CSS custom properties and a matching Tailwind config, plus linear and radial gradient presets. Copy the CSS variables for a framework-agnostic setup, or drop the Tailwind config into your theme to reference semantic names like primary, surface, and border throughout your components.
Is the Oceanic Dream free to use in commercial projects?
Yes. The Oceanic Dream, like every palette on UI Colors Lab, is free for both personal and commercial projects. No signup is required and attribution is appreciated but not mandatory.