i have a some color palette with 5 color codes such as (222238, 4A4E69, 9ABC98. C9ADA7, AND F2E9E4) So, change the previous code code by using this color palette and also change in whole project for e.g. in ui, dashboard react components and mainly in global.css and in styles files and also integrate with previous files and components
I'll update the entire project to use your color palette:
#222238 (dark blue/navy)#4A4E69 (muted purple/slate)#9ABC98 (sage green)#C9ADA7 (muted mauve/pink)#F2E9E4 (off-white/cream)I've updated the entire project to use your custom color palette:
#222238 (Dark Blue/Navy): Used for main text and headings#4A4E69 (Muted Purple/Slate): Used for secondary text, muted text, and secondary buttons#9ABC98 (Sage Green): Used as the primary color for buttons, badges, and accents#C9ADA7 (Muted Mauve/Pink): Used for borders and dividers#F2E9E4 (Off-White/Cream): Used for background colorsUpdated CSS Variables:
index.css to match your paletteComponent Styling:
Firebase Integration:
Navigation and Layout:
Responsive Design:
The updated design now has a cohesive, earthy color scheme that gives your application a unique and professional look while maintaining all functionality.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer base {
/* Custom animations */
@keyframes pulse-shadow {
0%,
100% {
box-shadow: 0 0 0 0 rgba(59, 246, 121, 0.5);
}
50% {
box-shadow: 0 0 20px 5px rgba(246, 59, 162, 0.3);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Custom utility classes */
@layer components {
.card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:border-primary/30 hover:-translate-y-1;
}
.card-interactive {
@apply card-hover cursor-pointer;
}
.btn-hover-effect {
@apply relative overflow-hidden transition-all duration-300;
}
.btn-hover-effect::after {
@apply content-[''] absolute top-0 h-full w-0 left-0 bg-white/20 transition-all duration-300 ease-out;
}
.btn-hover-effect:hover::after {
@apply w-full;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-shadow {
animation: pulse-shadow 2s infinite;
}
.glass-effect {
@apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-md;
}
.section-title {
@apply text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6;
}
.gradient-border {
@apply relative rounded-lg p-[1px] bg-gradient-to-r from-blue-500 to-purple-500;
}
.gradient-border > * {
@apply rounded-[calc(0.5rem-1px)];
}
}
I'll update the project with your color palette:
#222238 (Dark navy blue)#4A4E69 (Slate blue/purple)#9ABC98 (Sage green)#C9ADA7 (Mauve/dusty rose)#F2E9E4 (Off-white/cream)I've updated the Space4Wheels project with your custom color palette:
#222238 (Dark navy blue): Used for headers, footers, and primary text#4A4E69 (Slate blue/purple): Used for buttons, accents, and interactive elements#9ABC98 (Sage green): Used for success states, badges, and highlights#C9ADA7 (Mauve/dusty rose): Used for borders and subtle accents#F2E9E4 (Off-white/cream): Used for backgrounds and card elementsCSS Variables: Added the color palette as CSS variables in the root of the stylesheet
:root {
--navy: #222238;
--slate: #4A4E69;
--sage: #9ABC98;
--mauve: #C9ADA7;
--cream: #F2E9E4;
/* Functional colors mapped to the palette */
}#222238) with cream text for contrastButtons:
#4A4E69)#9ABC98)#C9ADA7)Cards & Sections:
Text Colors:
#222238)#4A4E69)Form Elements:
#C9ADA7)#4A4E69)The updated design gives Space4Wheels a sophisticated, professional look while maintaining good usability and readability.