Calm Serene
A serene and calming palette with soft blues and muted backgrounds. Designed to reduce visual stress and promote tranquility.
Color Breakdown
Role
background
Name
Slate 50
Hex
#f8fafc
Tailwind
bg-slate-50
Role
surface
Name
White
Hex
#ffffff
Tailwind
bg-white
Role
primary
Name
Blue 500
Hex
#3b82f6
Tailwind
text-blue-500
Role
secondary
Name
Slate 400
Hex
#94a3b8
Tailwind
text-slate-400
Role
accent
Name
Teal 500
Hex
#14b8a6
Tailwind
bg-teal-500
Live Preview
Welcome Back
This is a live preview of the Calm Serene color scheme applied to a sample card component. See how the colors work together in a realistic UI context.
Design Rationale
“Soft blues lower heart rate and reduce anxiety according to color psychology. Teal accents add gentle visual interest without disrupting the calm atmosphere.
Use Cases
CSS Variables
:root {
--background: #f8fafc;
--surface: #ffffff;
--primary: #3b82f6;
--secondary: #94a3b8;
--accent: #14b8a6;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'calm-serene': {
'background': '#f8fafc', // bg-slate-50
'surface': '#ffffff', // bg-white
'primary': '#3b82f6', // text-blue-500
'secondary': '#94a3b8', // text-slate-400
'accent': '#14b8a6', // bg-teal-500
},
},
},
},
};Related Color Schemes
Energetic Bold
A bold and energetic palette with vivid reds and bright accents. Designed to excite, motivate, and drive immediate action.
Professional Corporate
A polished corporate palette with conservative blues and structured grays. Conveys reliability, competence, and business credibility.
Playful Fun
A fun and playful palette bursting with cheerful colors. Designed to make users smile and create a lighthearted experience.
Luxurious Premium
A luxurious palette with rich dark backgrounds and gold accents. Every color choice reinforces exclusivity and premium positioning.
Friendly Approachable
A friendly and approachable palette with warm, inviting colors. Makes users feel welcome and lowers barriers to engagement.
Mysterious Dark
A mysterious dark palette with deep shadows and intriguing purple accents. Creates an atmosphere of curiosity and hidden depth.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator